/* ==========================================================================
   tokens.css — Spotlar Design System (ver DESIGN.md, Seção 3)
   Fonte única de verdade: cores, tipografia, espaçamento, raios, sombras.
   Importe ESTE arquivo antes de qualquer outro CSS.
   Regra de ouro: nos componentes, use sempre var(--token), nunca hex/px solto.
   ========================================================================== */

:root {
  /* --- TIPOGRAFIA ------------------------------------------------------- */
  /* Fontes reais da marca Spotlar (spotlar.com.br): Manrope no corpo,
     Hepta Slab (serifada) nos títulos de destaque. */
  --font-family-base: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-family-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-family-display: "Hepta Slab", Georgia, serif;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  --font-size-xxs: 0.625rem; /* 10px */
  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.875rem;  /* 14px */
  --font-size-md: 1rem;      /* 16px (base) */
  --font-size-lg: 1.125rem;  /* 18px */
  --font-size-xl: 1.5rem;    /* 24px */
  --font-size-2xl: 2rem;     /* 32px */
  --font-size-3xl: 2.25rem;  /* 36px */
  --font-size-4xl: 3rem;     /* 48px */
  --font-size-5xl: 3.5rem;   /* 56px */

  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.57;
  --line-height-loose: 1.66;
  --line-height-overline: 2.5;

  --letter-spacing-overline: 0.5px;

  /* --- ESPAÇAMENTO (escala base 4px) ----------------------------------- */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* --- RADIUS ----------------------------------------------------------- */
  --radius-none: 0px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 9999px;
  --radius-full: 50%;

  /* --- Z-INDEX ---------------------------------------------------------- */
  --z-nav-main: 1000;
  --z-nav-side: 1100;
  --z-nav-mobile: 1100;
  --z-settings-button: 1200;
  --z-dropdown: 1300;
  --z-settings-drawer: 1400;
  --z-modal: 1500;
  --z-toast: 1600;
  --z-tooltip: 1700;

  /* --- LAYOUT ----------------------------------------------------------- */
  --layout-sidenav-width: 280px;
  --layout-mobilenav-width: 320px;
  --layout-container-max: 1440px;
  --breakpoint-sm: 600px;
  --breakpoint-md: 900px;
  --breakpoint-lg: 1440px;
  --breakpoint-xl: 1920px;

  /* --- ÍCONES ----------------------------------------------------------- */
  --icon-size-sm: 1rem;    /* 16px */
  --icon-size-md: 1.25rem; /* 20px */
  --icon-size-lg: 1.5rem;  /* 24px */

  /* --- SOMBRAS (elevação) ---------------------------------------------- */
  --shadow-0: none;
  --shadow-1: 0px 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-2: 0px 1px 5px rgba(0, 0, 0, 0.08);
  --shadow-3: 0px 1px 8px rgba(0, 0, 0, 0.08);
  --shadow-4: 0px 1px 10px rgba(0, 0, 0, 0.08);
  --shadow-6: 0px 1px 18px rgba(0, 0, 0, 0.08);
  --shadow-8: 0px 3px 14px rgba(0, 0, 0, 0.08);
  --shadow-card: 0px 0px 0px 0.5px rgba(0, 0, 0, 0.03),
    0px 5px 22px 0px rgba(0, 0, 0, 0.04);
  --shadow-16: 0px 6px 30px rgba(0, 0, 0, 0.08);

  /* --- INPUT FIELD ------------------------------------------------------ */
  --input-min-height-md: 56px;
  --input-min-height-sm: 40px;
  --input-padding-inline: 12px;

  /* --- TRANSIÇÕES ------------------------------------------------------- */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 320ms ease;

  /* --- CORES: paleta crua (referência; prefira os tokens semânticos) ---- */
  /* PRIMARY — amarelo-limão pálido da marca (botões/CTAs de destaque) */
  --primary-lightest: #FEFFE0;
  --primary-light: #FDFFA8;
  --primary-main: #FDFFA8;
  --primary-dark: #EAEE7E;
  --primary-darkest: #272622;
  --primary-contrast: #272622;

  /* SECONDARY — verde-menta pálido da marca (badges/realces suaves) */
  --secondary-lightest: #F4FBF8;
  --secondary-light: #DCF2E9;
  --secondary-main: #B3DFCF;
  --secondary-dark: #272622;
  --secondary-darkest: #1B1A17;
  --secondary-contrast: #FFFFFF;

  /* NEUTRAL — escala de cinza */
  --neutral-50: #F9FAFB;
  --neutral-100: #F1F1F4;
  --neutral-200: #DCDFE4;
  --neutral-300: #B3B9C6;
  --neutral-400: #8A94A6;
  --neutral-500: #667085;
  --neutral-600: #565E73;
  --neutral-700: #434A60;
  --neutral-800: #313749;
  --neutral-900: #212636;
  --neutral-950: #121621;

  /* SEMÂNTICAS */
  --error-lightest: #FEF3F2;
  --error-light: #FEE4E2;
  --error-main: #F04438;
  --error-dark: #DE3024;
  --error-darkest: #80231C;
  --error-contrast: #FFFFFF;

  --warning-lightest: #FFFAEA;
  --warning-light: #FFF3C6;
  --warning-main: #DE7101;
  --warning-dark: #B84D05;
  --warning-darkest: #7B310C;
  --warning-contrast: #FFFFFF;

  --info-lightest: #ECFDFF;
  --info-light: #CFF8FE;
  --info-main: #22CBEE;
  --info-dark: #06AED4;
  --info-darkest: #164B63;
  --info-contrast: #FFFFFF;

  --success-lightest: #F0FDF9;
  --success-light: #CCFBEF;
  --success-main: #15B79F;
  --success-dark: #0E9382;
  --success-darkest: #134E48;
  --success-contrast: #FFFFFF;

  /* --- CORES: tokens semânticos (USE ESTES nos componentes) ------------- */
  --color-bg-default: #FFFCF6;
  --color-bg-paper: #FFFFFF;
  --color-bg-paper-tertiary: #F9FAFB;
  --color-bg-paper-glass: #F1F1F4;

  --color-text-primary: #272622;
  --color-text-secondary: #667085;
  --color-text-disabled: #8A94A6;

  --color-divider: #DCDFE4;

  --color-primary-main: var(--primary-main);
  --color-primary-light: var(--primary-light);
  --color-primary-dark: var(--primary-dark);
  --color-primary-contrast: var(--primary-contrast);

  --color-secondary-main: var(--secondary-main);
  --color-secondary-light: var(--secondary-light);
  --color-secondary-dark: var(--secondary-dark);
  --color-secondary-contrast: var(--secondary-contrast);

  --color-error-main: var(--error-main);
  --color-warning-main: var(--warning-main);
  --color-info-main: var(--info-main);
  --color-success-main: var(--success-main);

  /* Estados de ação (hover/focus/disabled) */
  --color-action-hover: rgba(33, 38, 54, 0.04);
  --color-action-selected: rgba(33, 38, 54, 0.08);
  --color-action-disabled-text: #6C737F;
  --color-action-disabled-bg: var(--neutral-100);
  --color-focus-ring: var(--color-primary-main);
}

/* --- TEMA ESCURO: só os tokens semânticos mudam (ver DESIGN.md, Seção 9) -- */
[data-theme="dark"] {
  --color-bg-default: #090A0B;
  --color-bg-paper: #121517;
  --color-bg-paper-tertiary: #202427;
  --color-bg-paper-glass: #32383E;

  --color-text-primary: #FBFCFE;
  --color-text-secondary: #9FA6AD;
  --color-text-disabled: #FBFCFE;

  --color-divider: #32383E;

  --color-primary-main: #FDFFA8;
  --color-primary-light: #EAEE7E;
  --color-primary-dark: #FDFFA8;
  --color-primary-contrast: #272622;

  --color-secondary-main: #B3DFCF;
  --color-secondary-light: #DCF2E9;
  --color-secondary-dark: #8FC2AF;
  --color-secondary-contrast: #121621;

  --color-error-main: #F04438;
  --color-warning-main: #DE7101;
  --color-info-main: #06AED4;
  --color-success-main: #15B79F;

  --color-action-hover: rgba(255, 255, 255, 0.06);
  --color-action-selected: rgba(255, 255, 255, 0.10);
  --color-action-disabled-text: #6C737F;
  --color-action-disabled-bg: var(--neutral-100);
}