/* =========================================================================
   HS Store CRM — Design tokens · Marca "HS Store"
   Verde-azeitona #62645A (fundo do logo) + dourado #D2B04A (monograma).
   Claro: azeitona escuro em ações/texto, dourado como acento decorativo.
   Escuro: dourado como acento (contraste AA sobre superfícies azeitona escuras).
   Regra: os componentes usam SÓ tokens semânticos (--color-*, --space-*, ...).
   As escalas brutas (--stone-*, --olive-*, --gold-*) são referência/styleguide.
   Modo escuro: prefers-color-scheme, com override por [data-theme] (cookie `theme`).
   ========================================================================= */

:root {
  /* ---- Escala neutra (azeitona-pedra) --------------------------------- */
  --stone-0:   #ffffff;
  --stone-50:  #f6f6f2;
  --stone-100: #eeeee8;
  --stone-150: #e5e5dd;
  --stone-200: #dedfd5;
  --stone-300: #c8c9bd;
  --stone-400: #9a9c8f;
  --stone-500: #6b6d62;
  --stone-600: #53554c;
  --stone-700: #3f4139;
  --stone-800: #2c2e28;
  --stone-850: #252721;
  --stone-900: #1c1d19;
  --stone-950: #131410;

  /* ---- Marca 1: verde-azeitona (#62645A = olive-600) ------------------ */
  --olive-50:  #f3f3ef;
  --olive-100: #e7e8e1;
  --olive-200: #cfd0c5;
  --olive-300: #b0b2a4;
  --olive-400: #8a8c7e;
  --olive-500: #75776c;
  --olive-600: #62645a;
  --olive-700: #51534a;
  --olive-800: #41433b;
  --olive-900: #33352f;

  /* ---- Marca 2: dourado (#D2B04A = gold-400) -------------------------- */
  --gold-50:  #fbf6e6;
  --gold-100: #f6ecc8;
  --gold-200: #eedb9b;
  --gold-300: #e3c670;
  --gold-400: #d2b04a;
  --gold-500: #b8962f;
  --gold-600: #96771f;
  --gold-700: #755d1a;
  --gold-800: #5a4817;
  --gold-900: #453716;
  /* ---- Tipografia ------------------------------------------------------ */
  --font-display: "Bricolage Grotesque", "Inter", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace;

  /* Escala modular 1.25 a partir de 14 px (arredondada a px inteiros) */
  --text-2xs: 0.6875rem; /* 11 */
  --text-xs:  0.75rem;   /* 12 */
  --text-sm:  0.8125rem; /* 13 */
  --text-base: 0.875rem; /* 14 */
  --text-md:  1rem;      /* 16 */
  --text-lg:  1.125rem;  /* 18 */
  --text-xl:  1.375rem;  /* 22 */
  --text-2xl: 1.75rem;   /* 28 */
  --text-3xl: 2.25rem;   /* 36 */
  --text-4xl: 2.75rem;   /* 44 */

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --tracking-tight: -0.02em;
  --tracking-display: -0.03em;
  --tracking-caps: 0.06em;

  /* ---- Espaçamento (base 4 px) ---------------------------------------- */
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 0.125rem; /* 2 */
  --space-1: 0.25rem;    /* 4 */
  --space-1-5: 0.375rem; /* 6 */
  --space-2: 0.5rem;     /* 8 */
  --space-2-5: 0.625rem; /* 10 */
  --space-3: 0.75rem;    /* 12 */
  --space-4: 1rem;       /* 16 */
  --space-5: 1.25rem;    /* 20 */
  --space-6: 1.5rem;     /* 24 */
  --space-7: 1.75rem;    /* 28 */
  --space-8: 2rem;       /* 32 */
  --space-10: 2.5rem;    /* 40 */
  --space-12: 3rem;      /* 48 */
  --space-16: 4rem;      /* 64 */

  /* ---- Raios ----------------------------------------------------------- */
  --radius-xs: 4px;    /* swatches, kbd, barras finas */
  --radius-sm: 8px;    /* inputs, selects, itens de menu */
  --radius-md: 10px;   /* botões, toasts, dropdowns */
  --radius-lg: 14px;   /* cartões, modais, drawers */
  --radius-xl: 20px;
  --radius-pill: 999px; /* badges, chips, interruptores */

  /* ---- Alturas de controlo (alvos de toque) --------------------------- */
  --control-sm: 2rem;    /* 32 — só em tabelas/toolbars densas */
  --control-md: 2.5rem;  /* 40 — por defeito */
  --control-lg: 3rem;    /* 48 — mobile/feira */

  /* ---- Layout ---------------------------------------------------------- */
  --sidebar-width: 248px;
  --sidebar-width-collapsed: 72px;
  --topbar-height: 60px;
  --content-max: 1440px;
  --gutter: var(--space-7);

  /* ---- Z-index --------------------------------------------------------- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-sidebar: 200;
  --z-topbar: 300;
  --z-dropdown: 400;
  --z-overlay: 500;
  --z-drawer: 510;
  --z-modal: 520;
  --z-toast: 600;
  --z-tooltip: 700;

  /* ---- Movimento ------------------------------------------------------- */
  --duration-instant: 80ms;
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 280ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  /* ---- Cores semânticas · MODO CLARO ---------------------------------- */
  color-scheme: light;

  --color-bg: var(--stone-50);
  --color-surface: var(--stone-0);
  --color-surface-2: var(--stone-100);
  --color-surface-3: var(--stone-150);
  --color-surface-inverse: var(--stone-900);
  --color-overlay: rgba(24, 26, 18, 0.45);

  --color-border: var(--stone-200);
  --color-border-strong: var(--stone-300);

  --color-text: #1c1d18;
  --color-text-2: var(--stone-600);
  --color-text-3: var(--stone-500);      /* unidades, legendas — 4.6:1 sobre bg */
  --color-text-inverse: var(--stone-50);
  --color-text-disabled: var(--stone-400);

  --color-accent: var(--olive-600);      /* #62645A · 6.0:1 sobre branco */
  --color-accent-hover: var(--olive-700);
  --color-accent-active: var(--olive-800);
  --color-accent-soft: var(--olive-100);
  --color-accent-text: var(--olive-700); /* texto/links em acento · 8:1 */
  --color-on-accent: #ffffff;
  --color-brand-gold: var(--gold-400);   /* #D2B04A · decorativo (marcadores, gráficos); NUNCA como texto sobre claro */
  --color-brand-gold-soft: var(--gold-100);
  --color-brand-gold-text: var(--gold-700); /* dourado legível sobre claro · 6.5:1 */

  --color-success: #13773a;
  --color-success-soft: #e4f4e8;
  --color-warning: #9a5a05;
  --color-warning-soft: #fcf0d6;
  --color-danger: #b4231f;
  --color-danger-hover: #961a17;
  --color-danger-soft: #fbe5e2;
  --color-info: #1e4fc2;
  --color-info-soft: #e5ecfb;

  /* Cor positiva usada sobre superfície invertida (herói de preço) */
  --color-success-on-inverse: #7ee2a4;
  --color-danger-on-inverse: #ffb0a6;

  --color-focus: var(--olive-600);
  --focus-ring: 0 0 0 3px rgba(210, 176, 74, 0.45), 0 0 0 1px var(--color-accent);

  /* Skeleton */
  --color-skeleton: var(--stone-150);
  --color-skeleton-shine: var(--stone-100);

  /* Gráficos (Chart.js lê estes tokens) */
  --chart-1: var(--olive-600);
  --chart-2: var(--gold-400);
  --chart-3: var(--olive-300);
  --chart-4: var(--gold-200);
  --chart-5: var(--olive-800);
  --chart-6: var(--gold-600);
  --chart-7: var(--olive-200);
  --chart-positive: var(--color-success);
  --chart-negative: var(--color-danger);
  --chart-grid: var(--stone-200);
  --chart-text: var(--stone-500);

  /* ---- Sombras (quentes, suaves) -------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(36, 38, 26, 0.06);
  --shadow-sm: 0 1px 2px rgba(36, 38, 26, 0.06), 0 4px 16px rgba(36, 38, 26, 0.05);
  --shadow-md: 0 2px 6px rgba(36, 38, 26, 0.08), 0 12px 32px rgba(36, 38, 26, 0.10);
  --shadow-lg: 0 8px 24px rgba(36, 38, 26, 0.12), 0 24px 64px rgba(36, 38, 26, 0.16);
  --shadow-inset-button: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 0 rgba(0, 0, 0, 0.08);
}

/* ---- MODO ESCURO -------------------------------------------------------
   Repetido em dois seletores: preferência do sistema (sem override) e
   override explícito. Mantém os dois blocos sincronizados.
   ----------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: var(--stone-950);
    --color-surface: var(--stone-900);
    --color-surface-2: var(--stone-850);
    --color-surface-3: #30322b;
    --color-surface-inverse: #f1f1ea;
    --color-overlay: rgba(0, 0, 0, 0.6);
    --color-border: #34362e;
    --color-border-strong: #4a4c41;
    --color-text: #f1f1ea;
    --color-text-2: #c5c7b9;
    --color-text-3: #a0a293;
    --color-text-inverse: var(--stone-950);
    --color-text-disabled: #686a5b;
    --color-accent: var(--gold-400);
    --color-accent-hover: #e0c264;
    --color-accent-active: var(--gold-300);
    --color-accent-soft: rgba(210, 176, 74, 0.15);
    --color-accent-text: var(--gold-300);
    --color-on-accent: #1f1b08;
    --color-brand-gold: var(--gold-400);
    --color-brand-gold-soft: rgba(210, 176, 74, 0.15);
    --color-brand-gold-text: var(--gold-300);
    --color-success: #4fcf82;
    --color-success-soft: rgba(79, 207, 130, 0.13);
    --color-warning: #f2b54a;
    --color-warning-soft: rgba(242, 181, 74, 0.13);
    --color-danger: #ff7a6e;
    --color-danger-hover: #ff958b;
    --color-danger-soft: rgba(255, 122, 110, 0.13);
    --color-info: #7ea6ff;
    --color-info-soft: rgba(126, 166, 255, 0.13);
    --color-success-on-inverse: #13773a;
    --color-danger-on-inverse: #b4231f;
    --color-focus: var(--gold-400);
    --focus-ring: 0 0 0 3px rgba(210, 176, 74, 0.32), 0 0 0 1px var(--gold-400);
    --color-skeleton: #2a2c25;
    --color-skeleton-shine: #34362e;
    --chart-1: var(--gold-400);
    --chart-2: var(--olive-300);
    --chart-3: var(--gold-700);
    --chart-4: var(--olive-600);
    --chart-5: var(--gold-200);
    --chart-6: var(--olive-400);
    --chart-7: var(--gold-800);
    --chart-grid: #34362e;
    --chart-text: #a0a293;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.35), 0 12px 32px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45), 0 24px 64px rgba(0, 0, 0, 0.5);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: var(--stone-950);
  --color-surface: var(--stone-900);
  --color-surface-2: var(--stone-850);
  --color-surface-3: #30322b;
  --color-surface-inverse: #f1f1ea;
  --color-overlay: rgba(0, 0, 0, 0.6);
  --color-border: #34362e;
  --color-border-strong: #4a4c41;
  --color-text: #f1f1ea;
  --color-text-2: #c5c7b9;
  --color-text-3: #a0a293;
  --color-text-inverse: var(--stone-950);
  --color-text-disabled: #686a5b;
  --color-accent: var(--gold-400);
  --color-accent-hover: #e0c264;
  --color-accent-active: var(--gold-300);
  --color-accent-soft: rgba(210, 176, 74, 0.15);
  --color-accent-text: var(--gold-300);
  --color-on-accent: #1f1b08;
  --color-brand-gold: var(--gold-400);
  --color-brand-gold-soft: rgba(210, 176, 74, 0.15);
  --color-brand-gold-text: var(--gold-300);
  --color-success: #4fcf82;
  --color-success-soft: rgba(79, 207, 130, 0.13);
  --color-warning: #f2b54a;
  --color-warning-soft: rgba(242, 181, 74, 0.13);
  --color-danger: #ff7a6e;
  --color-danger-hover: #ff958b;
  --color-danger-soft: rgba(255, 122, 110, 0.13);
  --color-info: #7ea6ff;
  --color-info-soft: rgba(126, 166, 255, 0.13);
  --color-success-on-inverse: #13773a;
  --color-danger-on-inverse: #b4231f;
  --color-focus: var(--gold-400);
  --focus-ring: 0 0 0 3px rgba(210, 176, 74, 0.32), 0 0 0 1px var(--gold-400);
  --color-skeleton: #2a2c25;
  --color-skeleton-shine: #34362e;
  --chart-1: var(--gold-400);
  --chart-2: var(--olive-300);
  --chart-3: var(--gold-700);
  --chart-4: var(--olive-600);
  --chart-5: var(--gold-200);
  --chart-6: var(--olive-400);
  --chart-7: var(--gold-800);
  --chart-grid: #34362e;
  --chart-text: #a0a293;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.35), 0 12px 32px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45), 0 24px 64px rgba(0, 0, 0, 0.5);
}

:root[data-theme="light"] { color-scheme: light; }

@media (max-width: 640px) {
  :root { --gutter: var(--space-4); }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}