/* ==========================================================================
   Peça Ajuda · Design System — Tokens
   Fonte única de verdade para cor, tipografia, espaço, forma, sombra e movimento.
   Componentes e seções NUNCA usam valores soltos: sempre um token daqui.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ------------------------------------------------------------------------
     COR · Primitivas
     Extraídas dos materiais da marca (avatar, monograma, artes dos planos).
     ------------------------------------------------------------------------ */

  /* Ink — fundos e superfícies (preto esverdeado) */
  --ink-1000: #020403;
  --ink-950: #040706; /* fundo da página */
  --ink-900: #070c0a;
  --ink-850: #0a110e; /* superfície (cards) */
  --ink-800: #0f1a15; /* superfície elevada */
  --ink-750: #13211b;
  --ink-700: #1a2a23; /* borda sólida */
  --ink-600: #26382f;
  --ink-500: #3a4d44;

  /* Mist — texto (off-white esverdeado da marca) */
  --mist-50: #e9f2ed; /* texto principal */
  --mist-200: #c5d2cb;
  --mist-300: #a3b3ab; /* texto secundário */
  --mist-400: #778a81; /* texto terciário */
  --mist-500: #5a6b63;

  /* Mint — acento da marca */
  --mint-100: #d5f6e9;
  --mint-200: #a8edd2;
  --mint-300: #7fe3be;
  --mint-400: #4fd6a5; /* cor da marca */
  --mint-500: #36bf8e;
  --mint-600: #2c8f6f; /* menta profunda (anel do monograma, waveform) */
  --mint-700: #1f6b52;
  --mint-800: #173d2f; /* brilho de fundo */
  --mint-900: #0e2a20;
  --mint-ink: #020e09; /* texto sobre menta */

  /* Sinais — uso pontual em estados (erro, aviso). Nunca decorativo. */
  --signal-coral: #f2877a;
  --signal-amber: #f2c46d;

  /* RGB "canais" para composições com alpha: rgb(var(--rgb-mint) / .2) */
  --rgb-mint: 79 214 165;
  --rgb-mist: 233 242 237;
  --rgb-ink: 4 7 6;

  /* ------------------------------------------------------------------------
     COR · Semântica (é o que os componentes consomem)
     ------------------------------------------------------------------------ */
  --color-bg: var(--ink-950);
  --color-bg-deep: var(--ink-1000);
  --color-surface: var(--ink-850);
  --color-surface-raised: var(--ink-800);
  --color-surface-hover: var(--ink-750);
  --color-surface-glass: rgb(10 17 14 / 0.62);
  --color-surface-tint: rgb(var(--rgb-mist) / 0.04);

  --color-border: rgb(var(--rgb-mist) / 0.08);
  --color-border-strong: rgb(var(--rgb-mist) / 0.14);
  --color-border-solid: var(--ink-700);
  --color-border-accent: rgb(var(--rgb-mint) / 0.4);

  --color-text: var(--mist-50);
  --color-text-secondary: var(--mist-300);
  --color-text-tertiary: var(--mist-400);
  --color-text-disabled: var(--mist-500);

  --color-accent: var(--mint-400);
  --color-accent-hover: var(--mint-300);
  --color-accent-press: var(--mint-500);
  --color-accent-deep: var(--mint-600);
  --color-accent-soft: rgb(var(--rgb-mint) / 0.12);
  --color-accent-glow: var(--mint-800);
  --color-on-accent: var(--mint-ink);

  --color-focus: var(--mint-300);
  --color-danger: var(--signal-coral);
  --color-warning: var(--signal-amber);
  --color-selection: rgb(var(--rgb-mint) / 0.28);

  /* Gradientes nomeados (os únicos permitidos) */
  --gradient-text-silver: linear-gradient(180deg, var(--mist-50) 0%, var(--mist-200) 55%, var(--mist-400) 100%);
  --gradient-hairline: linear-gradient(180deg, rgb(var(--rgb-mist) / 0.16), rgb(var(--rgb-mist) / 0.03));
  --gradient-hairline-accent: linear-gradient(180deg, rgb(var(--rgb-mint) / 0.7), rgb(var(--rgb-mint) / 0.12));
  --gradient-surface: linear-gradient(180deg, var(--ink-800) 0%, var(--ink-850) 100%);
  --gradient-glow-top: radial-gradient(ellipse 70% 55% at 50% 0%, rgb(23 61 47 / 0.95) 0%, rgb(23 61 47 / 0) 70%);
  --gradient-beam: linear-gradient(180deg, transparent, rgb(var(--rgb-mint) / 0.75), transparent);

  /* ------------------------------------------------------------------------
     TIPOGRAFIA
     ------------------------------------------------------------------------ */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Escala — fixa até xl, fluida (360px → 1280px) a partir de 2xl */
  --text-2xs: 0.6875rem; /* 11 · labels mono */
  --text-xs: 0.75rem; /* 12 */
  --text-sm: 0.875rem; /* 14 */
  --text-md: 1rem; /* 16 · corpo */
  --text-lg: clamp(1.0625rem, 1.014rem + 0.2174vw, 1.1875rem); /* 17 → 19 · lead */
  --text-xl: 1.25rem; /* 20 */
  --text-2xl: clamp(1.5rem, 1.353rem + 0.6522vw, 1.875rem); /* 24 → 30 · h4 */
  --text-3xl: clamp(1.875rem, 1.63rem + 1.087vw, 2.5rem); /* 30 → 40 · h3 */
  --text-4xl: clamp(2.25rem, 1.761rem + 2.174vw, 3.5rem); /* 36 → 56 · h2 */
  --text-5xl: clamp(2.625rem, 1.793rem + 3.696vw, 4.75rem); /* 42 → 76 · h1 */
  --text-6xl: clamp(3.25rem, 1.783rem + 6.522vw, 7rem); /* 52 → 112 · display */

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

  --leading-none: 1;
  --leading-display: 0.95;
  --leading-tight: 1.08;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-display: -0.045em;
  --tracking-tight: -0.025em;
  --tracking-snug: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-widest: 0.18em;

  /* ------------------------------------------------------------------------
     ESPAÇO (base 4px)
     ------------------------------------------------------------------------ */
  --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-8: 2rem; /* 32 */
  --space-10: 2.5rem; /* 40 */
  --space-12: 3rem; /* 48 */
  --space-16: 4rem; /* 64 */
  --space-20: 5rem; /* 80 */
  --space-24: 6rem; /* 96 */
  --space-32: 8rem; /* 128 */

  /* Ritmo de seção (fluido 80 → 144) */
  --section-pad-y: clamp(5rem, 3.435rem + 6.957vw, 9rem);

  /* ------------------------------------------------------------------------
     LAYOUT
     ------------------------------------------------------------------------ */
  --container-max: 80rem; /* 1280 */
  --container-narrow: 48rem; /* 768 · textos longos */
  --container-text: 36rem; /* 576 · parágrafos */
  --gutter: clamp(1.25rem, 0.7609rem + 2.174vw, 2.5rem); /* 20 → 40 */
  --grid-columns: 12;
  --grid-gap: clamp(1rem, 0.8043rem + 0.8696vw, 1.5rem); /* 16 → 24 */
  --header-h: 4.5rem; /* 72 */

  /* Breakpoints (referência — use os valores literais nas media queries)
     sm 40em/640 · md 48em/768 · lg 64em/1024 · xl 80em/1280 */

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

  --border-width: 1px;
  --border-width-strong: 1.5px;

  /* Quadrado da marca (o "." do monograma) */
  --brand-dot-size: 0.17em;

  /* ------------------------------------------------------------------------
     PROFUNDIDADE
     ------------------------------------------------------------------------ */
  --shadow-inset-top: inset 0 1px 0 rgb(255 255 255 / 0.06);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.45), 0 2px 6px -2px rgb(0 0 0 / 0.4);
  --shadow-md: 0 10px 24px -10px rgb(0 0 0 / 0.7), 0 4px 10px -4px rgb(0 0 0 / 0.5);
  --shadow-lg:
    0 6px 9px rgb(0 0 0 / 0.07), 0 14px 11px rgb(0 0 0 / 0.1), 0 26px 21px rgb(0 0 0 / 0.12),
    0 46px 37px rgb(0 0 0 / 0.15), 0 86px 69px rgb(0 0 0 / 0.18);

  --glow-sm: 0 0 18px rgb(var(--rgb-mint) / 0.22);
  --glow-md: 0 0 28px rgb(var(--rgb-mint) / 0.28), 0 8px 40px rgb(var(--rgb-mint) / 0.14);
  --glow-lg: 0 0 56px 6px rgb(var(--rgb-mint) / 0.32);

  --blur-sm: 8px;
  --blur-md: 16px;
  --blur-lg: 32px;

  /* ------------------------------------------------------------------------
     MOVIMENTO
     ------------------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); /* padrão: entradas e hovers */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* trocas de estado */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* pilhas/cards */

  --dur-instant: 100ms;
  --dur-fast: 160ms;
  --dur-base: 260ms;
  --dur-slow: 500ms;
  --dur-slower: 800ms;
  --dur-reveal: 1000ms;
  --stagger: 90ms;

  /* ------------------------------------------------------------------------
     CAMADAS
     ------------------------------------------------------------------------ */
  --z-bg: 0;
  --z-content: 1;
  --z-raised: 10;
  --z-header: 50;
  --z-overlay: 100;
}