/* ==========================================================================
   SPACE DS · tokens.css
   Fonte única de verdade do design system.
   Componentes nunca fixam cor, tamanho ou movimento: só consomem estes tokens.
   Camadas:  1) paleta primitiva  2) escalas  3) papéis semânticos por tema
   ========================================================================== */

:root {
  /* ── 1 · Paleta primitiva ─────────────────────────────────────────────── */
  --gray-50:  #fbfbfd;
  --gray-100: #f5f5f7;
  --gray-200: #e8e8ed;
  --gray-300: #d2d2d7;
  --gray-400: #aeaeb2;
  --gray-500: #86868b;
  --gray-600: #6e6e73;
  --gray-700: #424245;
  --gray-800: #2d2d2f;
  --gray-900: #1d1d1f;
  --gray-950: #161617;
  --white: #ffffff;
  --black: #000000;

  --blue-400:   #2997ff;
  --blue-500:   #0071e3;
  --blue-600:   #0066cc;
  --green-400:  #30d158;
  --green-600:  #1d7a34;
  --orange-400: #ff9f0a;
  --orange-600: #bf4800;
  --red-400:    #ff453a;
  --red-600:    #d70015;
  --whatsapp:   #12803c;

  /* ── 2 · Escalas ──────────────────────────────────────────────────────── */

  /* Tipografia — a pilha usa a SF Pro nos aparelhos Apple e Inter nos demais */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

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

  /* tamanho · altura de linha · espaçamento entre letras */
  --fs-hero:     clamp(2.75rem, 1.35rem + 5.9vw, 5.75rem);   /* 44 → 92 */
  --lh-hero:     1.04;
  --ls-hero:     -0.038em;

  --fs-display:  clamp(2.25rem, 1.25rem + 4.2vw, 4rem);      /* 36 → 64 */
  --lh-display:  1.06;
  --ls-display:  -0.034em;

  --fs-headline: clamp(1.75rem, 1.1rem + 2.4vw, 3rem);       /* 28 → 48 */
  --lh-headline: 1.1;
  --ls-headline: -0.028em;

  --fs-title:    clamp(1.3125rem, 1.05rem + 1vw, 1.75rem);   /* 21 → 28 */
  --lh-title:    1.14;
  --ls-title:    -0.022em;

  --fs-subhead:  clamp(1.1875rem, 1rem + 0.7vw, 1.5rem);     /* 19 → 24 */
  --lh-subhead:  1.2;
  --ls-subhead:  -0.018em;

  --fs-body:     1.0625rem;                                   /* 17 */
  --lh-body:     1.47;
  --ls-body:     -0.014em;

  --fs-caption:  0.875rem;                                    /* 14 */
  --lh-caption:  1.43;
  --ls-caption:  -0.01em;

  --fs-micro:    0.75rem;                                     /* 12 */
  --lh-micro:    1.33;
  --ls-micro:    -0.005em;

  /* Espaçamento — base de 4px */
  --sp-1: 0.25rem;   --sp-2: 0.5rem;    --sp-3: 0.75rem;   --sp-4: 1rem;
  --sp-5: 1.25rem;   --sp-6: 1.5rem;    --sp-8: 2rem;      --sp-10: 2.5rem;
  --sp-12: 3rem;     --sp-16: 4rem;     --sp-20: 5rem;     --sp-24: 6rem;
  --sp-30: 7.5rem;

  /* Raios */
  --r-xs: 6px;   --r-sm: 10px;   --r-md: 14px;
  --r-lg: 20px;  --r-xl: 28px;   --r-pill: 999px;

  /* Elevação */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .04), 0 2px 8px rgba(0, 0, 0, .04);
  --shadow-2: 0 4px 24px rgba(0, 0, 0, .08);
  --shadow-3: 0 16px 56px rgba(0, 0, 0, .18);

  /* Movimento */
  --dur-1: 120ms;  --dur-2: 240ms;  --dur-3: 400ms;  --dur-4: 800ms;
  --ease:        cubic-bezier(0.28, 0.11, 0.32, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Camadas */
  --z-nav: 1000;  --z-drawer: 1100;  --z-modal: 1200;  --z-toast: 1300;

  /* Layout */
  --wrap:        1280px;
  --wrap-narrow: 980px;
  --wrap-tiles:  1480px;
  --gutter:      22px;
  --gap-tile:    12px;
  --nav-h:       48px;
}

/* ── 3 · Papéis semânticos — tema claro (padrão) ───────────────────────── */
:root,
[data-theme="light"],
.theme-light {
  color-scheme: light;

  --bg:          var(--white);
  --bg-alt:      var(--gray-100);
  --bg-elev:     var(--white);
  --raised:      var(--white);
  --tile-bg:     var(--gray-100);
  --fill:        rgba(0, 0, 0, .06);
  --fill-strong: rgba(0, 0, 0, .1);

  --text:        var(--gray-900);
  --text-muted:  var(--gray-600);
  --text-subtle: var(--gray-500);

  --border:      var(--gray-300);
  --border-soft: rgba(0, 0, 0, .1);

  /* Cor de destaque: os valores vêm do preset ativo (veja "Cor de destaque" no fim do arquivo) */
  --link:          var(--accent-on-light);
  --accent-strong: var(--accent-on-light);   /* destaque em texto, ícones e bordas sobre fundo neutro */
  --accent-tint:   color-mix(in srgb, var(--accent) 14%, transparent);
  --focus:         color-mix(in srgb, var(--accent-on-light) 60%, transparent);

  --success:     var(--green-600);
  --warning:     var(--orange-600);
  --danger:      var(--red-600);
  --success-tint: rgba(29, 122, 52, .12);
  --warning-tint: rgba(191, 72, 0, .1);
  --danger-tint:  rgba(215, 0, 21, .1);

  --nav-bg:      rgba(251, 251, 253, .8);
  --nav-border:  rgba(0, 0, 0, .12);
  --overlay:     rgba(0, 0, 0, .4);
  --scrim:       rgba(255, 255, 255, .55);
}

/* ── Tema escuro (seção, componente ou página inteira) ─────────────────── */
[data-theme="dark"],
.theme-dark {
  color-scheme: dark;

  --bg:          var(--black);
  --bg-alt:      var(--gray-950);
  --bg-elev:     var(--gray-900);
  --raised:      #3a3a3c;
  --tile-bg:     var(--gray-900);
  --fill:        rgba(255, 255, 255, .12);
  --fill-strong: rgba(255, 255, 255, .2);

  --text:        #f5f5f7;
  --text-muted:  #a1a1a6;
  --text-subtle: var(--gray-500);

  --border:      var(--gray-700);
  --border-soft: rgba(255, 255, 255, .16);

  --link:          var(--accent-on-dark);
  --accent-strong: var(--accent-on-dark);
  --accent-tint:   color-mix(in srgb, var(--accent) 24%, transparent);
  --focus:         color-mix(in srgb, var(--accent-on-dark) 70%, white);

  --success:     var(--green-400);
  --warning:     var(--orange-400);
  --danger:      var(--red-400);
  --success-tint: rgba(48, 209, 88, .16);
  --warning-tint: rgba(255, 159, 10, .16);
  --danger-tint:  rgba(255, 69, 58, .16);

  --nav-bg:      rgba(22, 22, 23, .8);
  --nav-border:  rgba(255, 255, 255, .16);
  --overlay:     rgba(0, 0, 0, .6);
  --scrim:       rgba(0, 0, 0, .5);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 4px 24px rgba(0, 0, 0, .5);
  --shadow-3: 0 16px 56px rgba(0, 0, 0, .7);
}

[data-theme="dark"] { background: var(--bg); color: var(--text); }
.theme-dark         { color: var(--text); }

/* ── Cor de destaque (acento) ──────────────────────────────────────────── *
 * O padrão é o amarelo da marca. Cada preset define 4 valores:
 *   --accent            cor de ação (botões, seleção)
 *   --accent-ink        texto sobre a cor de ação
 *   --accent-on-light   links e destaques em texto/ícone sobre fundo claro
 *   --accent-on-dark    links e destaques sobre fundo escuro
 * Hover e pressionado são derivados. Para mudar a cor padrão, edite o :root abaixo. */
:root {
  --accent:          #F8F411;   /* amarelo da marca */
  --accent-ink:      #1d1d1f;
  --accent-on-light: #1d1d1f;
  --accent-on-dark:  #F8F411;
  --accent-hover:    color-mix(in srgb, var(--accent) 90%, black);
  --accent-active:   color-mix(in srgb, var(--accent) 80%, black);
}

/* Presets (o painel Personalizar troca o atributo data-accent no <html>) */
:root[data-accent="yellow"] { --accent: #F8F411; --accent-ink: #1d1d1f; --accent-on-light: #1d1d1f; --accent-on-dark: #F8F411; }
:root[data-accent="gold"]   { --accent: #FBD30C; --accent-ink: #1d1d1f; --accent-on-light: #1d1d1f; --accent-on-dark: #FBD30C; }
:root[data-accent="blue"]   { --accent: #0071e3; --accent-ink: #ffffff; --accent-on-light: #0066cc; --accent-on-dark: #2997ff;
                              --accent-hover: #0077ed; --accent-active: #006edb; }
:root[data-accent="violet"]   { --accent: #6e56cf; --accent-ink: #ffffff; --accent-on-light: #5b45b8; --accent-on-dark: #a899f2; }
:root[data-accent="green"]    { --accent: #1d9a4b; --accent-ink: #ffffff; --accent-on-light: #177a3c; --accent-on-dark: #30d158; }
:root[data-accent="orange"]   { --accent: #e8590c; --accent-ink: #ffffff; --accent-on-light: #c2410c; --accent-on-dark: #ff9f0a; }
:root[data-accent="graphite"] { --accent: #1d1d1f; --accent-ink: #ffffff; --accent-on-light: #1d1d1f; --accent-on-dark: #f5f5f7; }

/* Cores escuras: o hover clareia em vez de escurecer */
:root[data-accent="violet"],
:root[data-accent="green"],
:root[data-accent="orange"],
:root[data-accent="graphite"] {
  --accent-hover:  color-mix(in srgb, var(--accent) 88%, white);
  --accent-active: color-mix(in srgb, var(--accent) 86%, black);
}

/* Grafite sobre fundo escuro: o botão vira claro */
:root[data-accent="graphite"][data-theme="dark"],
:root[data-accent="graphite"] .theme-dark { --accent: #f5f5f7; --accent-ink: #1d1d1f; }