/* ============================================================
   TOKENS — design system éter (estado atual de produção)
   Tudo via CSS custom properties. Qualquer página consome esses
   tokens. Não hardcode valores nos arquivos de componentes/pages.

   Ordem:
     1. Brand core (cores da identidade)
     2. Scales (dark + light)
     3. Tokens semânticos (bg, text, border)
     4. Overlays / glows
     5. Tipografia (famílias, weights, leadings, trackings, scale)
     6. Spacing (1-9, section, layout)
     7. Containers
     8. Radius, borders, shadows
     9. Transitions
   ============================================================ */

:root {
  /* ---------- BRAND CORE ---------- */
  --color-brand-energy:   #10B981;  /* energy green — destaque (emerald) */
  --color-brand-dark:     #0B0F14;  /* dark — superfície */
  --color-brand-teal:     #5C7E7D;  /* teal gray — texto subtle */
  --color-brand-bluish:   #AFC2C2;  /* bluish gray — texto muted */
  --color-brand-offwhite: #F2F2F2;  /* off-white — texto primary */

  /* ---------- DARK SCALE ---------- */
  --color-dark-900: #0B0F14;
  --color-dark-800: #0B0F14;
  --color-dark-700: #061115;
  --color-dark-600: #11161C;

  /* ---------- LIGHT SCALE ---------- */
  --color-light-100: #FFFFFF;
  --color-light-200: #F2F2F2;
  --color-light-300: #E2E8E8;

  /* ---------- SEMANTIC TOKENS (dark theme default) ---------- */
  --bg-default:    var(--color-dark-900);
  --bg-surface:    var(--color-dark-800);
  --bg-elevated:   var(--color-dark-700);
  --bg-hover:      var(--color-dark-600);

  --text-primary:  var(--color-brand-offwhite);
  --text-muted:    var(--color-brand-bluish);
  --text-subtle:   var(--color-brand-teal);
  --text-on-brand: var(--color-dark-900);

  --border-subtle: color-mix(in srgb, #FFFFFF 8%, transparent);
  --border-strong: color-mix(in srgb, #FFFFFF 18%, transparent);
  --border-brand:  color-mix(in srgb, var(--color-brand-energy) 35%, transparent);

  /* ---------- OVERLAYS / GLOWS ---------- */
  --overlay-image:    linear-gradient(180deg, transparent 40%, rgba(11, 15, 20, 0.85) 100%);
  --overlay-hero:     radial-gradient(80% 60% at 70% 30%, color-mix(in srgb, var(--color-brand-energy) 12%, transparent), transparent 60%);
  --glow-brand-soft:  radial-gradient(ellipse at center, color-mix(in srgb, var(--color-brand-energy) 10%, transparent), transparent 60%);
  --glow-brand-card:  0 0 32px color-mix(in srgb, var(--color-brand-energy) 14%, transparent);

  /* ---------- TYPOGRAPHY ---------- */
  --font-display: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

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

  --leading-small:  1;
  --leading-medium: 1.1;
  --leading-large:  1.3;
  --leading-xlarge: 1.4;
  --leading-huge:   1.55;

  --tracking-tight:  -0.03em;
  --tracking-normal:  0em;
  --tracking-medium:  0.08em;

  /* Type scale fluido — viewport 320px → 1440px */
  --text-xsmall:  clamp(0.75rem,  calc(0.6875rem + 0.25vw), 0.875rem);  /* 12 → 14 */
  --text-small:   clamp(0.875rem, calc(0.8125rem + 0.25vw), 1rem);      /* 14 → 16 */
  --text-main:    clamp(1rem,     calc(0.9375rem + 0.25vw), 1.125rem);  /* 16 → 18 */
  --text-large:   clamp(1.125rem, calc(1.0625rem + 0.25vw), 1.25rem);   /* 18 → 20 */
  --text-xlarge:  clamp(1.25rem,  calc(1.125rem + 0.5vw),   1.5rem);    /* 20 → 24 */
  --text-h4:      clamp(1.5rem,   calc(1.125rem + 1.5vw),   2.25rem);   /* 24 → 36 */
  --text-h3:      clamp(2rem,     calc(1.625rem + 1.875vw), 3rem);      /* 32 → 48 */
  --text-h2:      clamp(2.25rem,  calc(1.5rem + 2vw),       3.25rem);   /* 36 → 52 */
  --text-h1:      clamp(2.25rem,  calc(1.25rem + 5vw),      4.5rem);    /* 36 → 72 */
  --text-display: clamp(4rem,     calc(2.75rem + 6.25vw),   8rem);      /* 64 → 128 */

  /* ---------- SPACING ---------- */
  --space-1: clamp(0.375rem, calc(0.339rem + 0.179vw), 0.5rem);
  --space-2: clamp(0.625rem, calc(0.589rem + 0.179vw), 0.75rem);
  --space-3: clamp(0.875rem, calc(0.839rem + 0.179vw), 1rem);
  --space-4: clamp(1.25rem,  calc(1.179rem + 0.357vw), 1.5rem);
  --space-5: clamp(1.75rem,  calc(1.679rem + 0.357vw), 2rem);
  --space-6: clamp(2rem,     calc(1.857rem + 0.714vw), 2.5rem);
  --space-7: clamp(2.25rem,  calc(2.036rem + 1.071vw), 3rem);
  --space-8: clamp(2.5rem,   calc(2.071rem + 2.143vw), 4rem);
  --space-9: clamp(4rem,     calc(3.143rem + 4.286vw), 7rem);

  --section-small:    clamp(3rem,   calc(2.429rem + 2.857vw), 5rem);
  --section-main:     clamp(4rem,   calc(2.857rem + 5.714vw), 8rem);
  --section-large:    clamp(5.5rem, calc(4.214rem + 6.429vw), 10rem);
  --section-page-top: clamp(8rem,   calc(6.286rem + 8.571vw), 14rem);

  --layout-margin:  clamp(1.25rem, calc(0.679rem + 2.857vw), 3rem);
  --layout-gutter:  clamp(1rem,    calc(0.714rem + 1.429vw), 2rem);

  --header-clearance: 6.5rem;

  /* ---------- CONTAINERS ---------- */
  --container-main:  90rem;   /* 1440px */
  --container-small: 56rem;   /* 896px  */
  --container-text:  42rem;   /* 672px  */

  /* ---------- RADIUS ---------- */
  --radius-xs:   0.375rem;
  --radius-sm:   0.625rem;
  --radius-md:   1rem;
  --radius-lg:   1.5rem;
  --radius-xl:   2rem;
  --radius-full: 999px;

  /* ---------- BORDERS ---------- */
  --bw:       1px;
  --bw-thick: 2px;

  /* ---------- SHADOWS ---------- */
  --shadow-raised:   0 2px 8px rgba(0, 0, 0, 0.24), 0 1px 2px rgba(0, 0, 0, 0.18);
  --shadow-elevated: 0 12px 32px rgba(0, 0, 0, 0.36), 0 2px 6px rgba(0, 0, 0, 0.24);
  --shadow-overlay:  0 24px 64px rgba(0, 0, 0, 0.5),  0 4px 12px rgba(0, 0, 0, 0.32);
  --shadow-brand:    0 8px 50px color-mix(in srgb, var(--color-brand-energy) 16%, transparent);

  /* ---------- TRANSITIONS ---------- */
  --duration-fast: 100ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}