/* Sistema visual base. Los alias de app-redesign conservan continuidad con el POS. */
:root {
  color-scheme: dark;
  --color-primary: #df5b47;
  --color-primary-hover: #ef735c;
  --color-primary-strong: #b94136;
  --color-primary-gradient: linear-gradient(135deg, var(--color-primary), var(--color-primary-strong));
  --color-accent: #f3b65d;
  --color-success: #43c995;
  --color-warning: #f3b65d;
  --color-danger: #f87171;
  --color-info: #60a5fa;

  --color-background: #101214;
  --color-surface: #181b1f;
  --color-surface-raised: #20252b;
  --color-surface-hover: #272d34;
  --color-input: #111417;
  --color-text-primary: #f7f3ec;
  --color-text-secondary: #c4cbd1;
  --color-text-muted: #9ca5ae;
  --color-border: #2b3239;
  --color-border-strong: #424b54;
  --color-focus: #f3b65d;

  --radius-sm: .5rem;
  --radius-md: .75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.375rem;
  --radius-pill: 999px;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --font-size-xs: .75rem;
  --font-size-sm: .875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.375rem;
  --shadow-sm: 0 2px 8px rgb(0 0 0 / .16);
  --shadow-md: 0 10px 24px rgb(0 0 0 / .22);
  --shadow-lg: 0 18px 42px rgb(0 0 0 / .28);
  --elevation-sm: 0 2px 8px rgb(0 0 0 / .16);
  --elevation-md: 0 10px 24px rgb(0 0 0 / .22);
  --elevation-lg: 0 18px 42px rgb(0 0 0 / .28);
  --focus-ring: 0 0 0 3px rgb(243 182 93 / .3);
}

body.app-redesign {
  --color-primary: #df5b47;
  --color-primary-hover: #ef735c;
  --color-primary-strong: #b94136;
  --color-primary-gradient: linear-gradient(135deg, var(--color-primary), var(--color-primary-strong));
  --color-accent: #f3b65d;
  --color-success: #43c995;
  --color-warning: #f3b65d;
  --color-danger: #f87171;
  --color-info: #60a5fa;
  --color-background: #101214;
  --color-surface: #181b1f;
  --color-surface-raised: #20252b;
  --color-surface-hover: #272d34;
  --color-input: #111417;
  --color-text-primary: #f7f3ec;
  --color-text-secondary: #c4cbd1;
  --color-text-muted: #9ca5ae;
  --color-border: #2b3239;
  --color-border-strong: #424b54;
  --color-focus: #f3b65d;
  --elevation-sm: 0 2px 8px rgb(0 0 0 / .16);
  --elevation-md: 0 10px 24px rgb(0 0 0 / .22);
  --elevation-lg: 0 18px 42px rgb(0 0 0 / .28);
}

body:not(.dark-mode).app-redesign {
  --color-primary: #df5b47;
  --color-primary-hover: #ef735c;
  --color-primary-strong: #b94136;
  --color-primary-gradient: linear-gradient(135deg, var(--color-primary), var(--color-primary-strong));
  --color-accent: #f3b65d;
  --color-success: #26885e;
  --color-background: #f4f6f8;
  --color-surface: #ffffff;
  --color-surface-raised: #f8fafc;
  --color-surface-hover: #fff7ed;
  --color-input: #ffffff;
  --color-text-primary: #17202a;
  --color-text-secondary: #344252;
  --color-text-muted: #64717d;
  --color-border: #dce3e9;
  --color-border-strong: #c4ced8;
  --color-focus: #9a5700;
  --color-warning: #d99022;
  --color-danger: #dc4444;
  --color-info: #2563eb;
  --elevation-sm: 0 2px 8px rgb(31 45 61 / .08);
  --elevation-md: 0 10px 24px rgb(31 45 61 / .10);
  --elevation-lg: 0 18px 42px rgb(31 45 61 / .14);
}