/* ============================================
   DESIGN TOKENS — Full Stack Marketing
   3 direções visuais controladas por [data-direction]
   ============================================ */

:root {
  /* ——— Color system ——— */
  --green-50:  oklch(97% 0.04 140);
  --green-100: oklch(93% 0.08 140);
  --green-200: oklch(88% 0.14 140);
  --green-400: oklch(78% 0.18 140);  /* primary */
  --green-500: oklch(72% 0.2 140);
  --green-700: oklch(55% 0.16 145);
  --green-900: oklch(32% 0.09 150);
  --green-950: oklch(22% 0.06 150);
  --green-bg:  #041B15;   /* forest — bg oficial dark */

  --ink-900: oklch(12% 0.015 150);
  --ink-700: oklch(28% 0.02 150);
  --ink-500: oklch(45% 0.015 150);
  --ink-300: oklch(70% 0.01 150);
  --ink-100: oklch(92% 0.005 150);

  --paper:     oklch(97% 0.006 120);   /* off-white */
  --paper-warm: oklch(96% 0.015 90);
  --white:     #ffffff;

  /* ——— Manual de identidade dotb (cores oficiais) ——— */
  --abyss:      #020E0A;
  --forest:     #041B15;
  --canopy:     #072B20;
  --moss:       #0D3D2C;
  --fern:       #1A5440;
  --deep-green: #3D7030;
  --sage:       #5E9F4E;
  --lime:       #89CC72;
  --sprout:     #A8E08F;
  --glow:       rgba(137, 204, 114, 0.15);

  /* ——— Gradientes oficiais (sutis) ——— */
  --grad-forest-depth: linear-gradient(180deg, #041B15 0%, #072B20 100%);
  --grad-canopy-glow:  linear-gradient(180deg, #041B15 0%, #0D3D2C 100%);
  --grad-green-aura:   radial-gradient(ellipse at 50% 30%, rgba(137,204,114,0.10) 0%, transparent 65%);
  --grad-paper-warm:   linear-gradient(180deg, oklch(97% 0.006 120) 0%, oklch(95% 0.012 90) 100%);
  --grad-paper-soft:   linear-gradient(180deg, oklch(97% 0.006 120) 0%, oklch(94% 0.02 145) 100%);

  /* Semantic — default (brutalist) */
  --bg: var(--green-400);
  --bg-dark: var(--green-bg);
  --fg: var(--ink-900);
  --fg-on-dark: var(--paper);
  --accent: var(--green-400);
  --accent-strong: var(--green-500);
  --surface: var(--white);
  --surface-dark: var(--green-950);

  /* ——— Type system ——— */
  --font-display: 'Figtree', system-ui, sans-serif;
  --font-display-weight: 800;
  --font-display-tracking: -0.02em;
  --font-display-line: 1.05;

  --font-body: 'Figtree', system-ui, sans-serif;
  --font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* ——— Scale (fluid) ——— */
  --step--2: clamp(.69rem, .66rem + .15vw, .79rem);
  --step--1: clamp(.83rem, .8rem + .17vw, .94rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.13rem);
  --step-1:  clamp(1.2rem, 1.15rem + .25vw, 1.35rem);
  --step-2:  clamp(1.44rem, 1.37rem + .34vw, 1.62rem);
  --step-3:  clamp(1.73rem, 1.64rem + .45vw, 1.95rem);
  --step-4:  clamp(2.07rem, 1.95rem + .61vw, 2.44rem);
  --step-5:  clamp(2.49rem, 2.33rem + .82vw, 3.05rem);
  --step-6:  clamp(2.99rem, 2.78rem + 1.07vw, 3.82rem);
  --step-7:  clamp(3.58rem, 3.3rem + 1.41vw, 4.77rem);
  --step-8:  clamp(4.3rem, 3.93rem + 1.86vw, 5.96rem);
  --step-9:  clamp(5.16rem, 4.66rem + 2.5vw, 7.45rem);
  --step-10: clamp(6.19rem, 5.51rem + 3.4vw, 9.31rem);

  /* ——— Spacing ——— */
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  20px;
  --space-lg:  32px;
  --space-xl:  56px;
  --space-2xl: 96px;
  --space-3xl: 140px;
  --space-4xl: 200px;

  /* ——— Radii / shadow ——— */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-xl: 36px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.06);
  --shadow-sm: 0 2px 6px rgba(0,0,0,.08);
  --shadow-md: 0 8px 24px rgba(0,0,0,.12);
  --shadow-lg: 0 24px 60px -20px rgba(0,0,0,.35);
  --shadow-card: 0 1px 0 rgba(0,0,0,.04), 0 8px 30px -12px rgba(0,0,0,.18);

  /* ——— Motion ——— */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-editorial: cubic-bezier(.22, 1, .36, 1);
  --dur-fast: 180ms;
  --dur-med: 320ms;
  --dur-slow: 640ms;
  --dur-reveal: 900ms;

  /* layout */
  --content: 1240px;
  --content-narrow: 860px;
  --content-wide: 1440px;
  --gutter: clamp(20px, 4vw, 48px);
}

/* ===== Direction: EDITORIAL ===== */
[data-direction="editorial"] {
  --font-display: 'Figtree', system-ui, sans-serif;
  --font-display-weight: 500;
  --font-display-tracking: -0.025em;
  --font-display-line: 1.05;

  --bg: var(--paper);
  --fg: var(--ink-900);
  --accent: var(--green-700);
  --accent-strong: var(--green-900);
}

/* ===== Direction: TECH ===== */
[data-direction="tech"] {
  --font-display: 'Figtree', system-ui, sans-serif;
  --font-display-weight: 600;
  --font-display-tracking: -0.035em;
  --font-display-line: 1.04;

  --bg: var(--ink-900);
  --fg: var(--paper);
  --fg-on-dark: var(--paper);
  --accent: var(--green-200);
  --accent-strong: var(--green-400);
  --surface: oklch(16% 0.015 150);
}

/* ===== Direction: BRUTALIST (default) ===== */
[data-direction="brutalist"] {
  --font-display: 'Figtree', system-ui, sans-serif;
  --font-display-weight: 900;
  --font-display-tracking: -0.03em;
  --font-display-line: 1.02;
}

/* ===== Green variants ===== */
[data-green="accent"] {
  --bg: var(--paper);
  --fg: var(--ink-900);
}
[data-green="forest"] {
  --green-400: oklch(62% 0.15 150);
  --green-500: oklch(56% 0.16 150);
  --green-bg:  oklch(18% 0.05 150);
  --green-950: oklch(16% 0.04 150);
}