/*
  Design tokens — Thiago Hatore / O Thiago Comunica
  Source: ui-guide/guia-ui-webdesign-thiago-hatore.md v2.0, Section 15 (verbatim values)

  Core doctrine (v2, Section 5.2): VIOLET IS LIGHT, NOT PAINT.
    - As opaque paint (button fill, chip, icon, band) it stays <=10% of the composition.
    - As ambient light (halo, pool, lit hairline) it may bathe the BACKGROUND plane only.
    - Gradient exists ONLY as a fall of light on a background — never inside the fill of
      a button, chip, badge or icon. That prohibition (Fase 4) is unchanged.
  Text rule: violet-600/-400 are NEVER a font color (1.62:1 / 3.02:1 on base).
             violet-200 IS (8.97:1) — labels and framework letters only.
*/

:root {
  /* ================================================================ */
  /* INK RAMP — cool neutrals                                          */
  /* ================================================================ */
  --ink-900: #0B0B0C;   /* well — footer, recessed block */
  --ink-800: #121212;   /* canonical base (Fase 4) */
  --ink-700: #16161A;   /* raised base, subtle alternating band */
  --ink-600: #1C1C21;   /* card over base — separation without a border */
  --ink-500: #2A2A2E;   /* canonical surface (Fase 4) */
  --ink-400: #3A3A3F;   /* structural hairline, divider, border */
  --ink-300: #4E4E55;   /* hover border, neutral focus */

  /* ================================================================ */
  /* VIOLET RAMP — single accent hue, six steps                        */
  /* ================================================================ */
  --violet-900: #1B1020;  /* ambient light floor — always used with alpha */
  --violet-700: #33203A;  /* lit block, offer band */
  --violet-600: #4B2E52;  /* canonical accent (Fase 4) — fills only */
  --violet-500: #5E3A68;  /* solid hover — never a gradient */
  --violet-400: #7E4F8C;  /* icon stroke / component border — 3.02:1, NOT text */
  --violet-200: #C9A8D6;  /* text-safe accent — 8.97:1 on base, labels only */

  /* ================================================================ */
  /* NEUTRAL TEXT + WARM ANNOTATION LAYER                              */
  /* ================================================================ */
  --text-primary: #F4F3F0;    /* 16.88:1 on base */
  --text-secondary: #A8A6A2;  /* 7.71:1 on base, 5.88:1 on surface */
  --bone: #EDE2D2;            /* 14.64:1 — hand-drawn marks, arrows, marker strokes */

  /* functional — desaturated, same matte temperature */
  --color-success: #6B8F71;
  --color-warning: #B08A4E;
  --color-error: #A85C4A;
  --color-info: #7A8A96;

  /* ---------------------------------------------------------------- */
  /* Backwards-compatible aliases (bio page + any legacy selector)      */
  /* ---------------------------------------------------------------- */
  --color-base: var(--ink-800);
  --color-surface: var(--ink-500);
  --color-structure: var(--ink-400);
  --color-border: var(--ink-400);
  --color-accent: var(--violet-600);
  --color-accent-hover: var(--violet-500);
  --color-text-primary: var(--text-primary);
  --color-text-secondary: var(--text-secondary);

  /* ================================================================ */
  /* TYPOGRAPHY                                                        */
  /* ================================================================ */
  --font-display: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Inter', 'Segoe UI', Arial, sans-serif;

  /* fluid scale — ui-guide v2 Section 4.2 */
  --text-xs:      clamp(0.75rem, 0.72rem + 0.12vw, 0.8125rem);   /* 12–13px microcopy */
  --text-sm:      clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);  /* 13–14px small */
  --text-base:    clamp(0.9375rem, 0.90rem + 0.18vw, 1.0625rem); /* 15–17px body */
  --text-md:      clamp(1rem, 0.95rem + 0.30vw, 1.125rem);       /* 16–18px */
  --text-lg:      clamp(1.0625rem, 0.99rem + 0.38vw, 1.25rem);   /* 17–20px subtitle */
  --text-xl:      clamp(1.1875rem, 1.10rem + 0.45vw, 1.625rem);  /* 19–26px H3 */
  --text-2xl:     clamp(1.375rem, 1.18rem + 0.95vw, 2rem);       /* 22–32px */
  --text-3xl:     clamp(1.625rem, 1.28rem + 1.70vw, 2.75rem);    /* 26–44px H2 */
  /* Display caps at 64px: the longest meaning-unit line in the hero H1 is 27 characters,
     which at Montserrat 800 needs ~1090px — inside the 1200px content box, with slack. */
  --text-display: clamp(2.125rem, 1.05rem + 4.40vw, 4rem);       /* 34–64px hero */
  --text-display-sm: clamp(1.875rem, 1.10rem + 3.30vw, 3.5rem);  /* 30–56px CTA final */
  --text-ghost:   clamp(3.5rem, 1.4rem + 9.5vw, 10rem);          /* 56–160px hollow numeral */

  --label-tracking: 0.16em;

  --leading-tight: 1.06;
  --leading-snug: 1.24;
  --leading-normal: 1.62;

  /* ================================================================ */
  /* SPACING — 8px base scale                                          */
  /* ================================================================ */
  --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;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ================================================================ */
  /* SHAPE — asymmetric radii are the "not-a-box" system               */
  /* ================================================================ */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-bubble: 16px 16px 16px 4px;    /* speech bubble, tail bottom-left */
  --radius-bubble-r: 16px 16px 4px 16px;  /* mirrored, tail bottom-right */
  --radius-full: 999px;                   /* real circles only — never pill buttons */

  /* regular hexagon, flat-top — the logo's structural motif */
  --hex-clip: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);

  /* ================================================================ */
  /* EFFECTS                                                           */
  /* ================================================================ */
  --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.24);
  --shadow-lift: 0 12px 32px rgba(0, 0, 0, 0.38);
  --glow-edge: inset 0 1px 0 rgba(126, 79, 140, 0.45);  /* lit hairline, not an outer glow */
  --grain-opacity: 0.035;
  --tilt-sticker: -4deg;
  --tilt-card: -1.5deg;

  /* ================================================================ */
  /* MOTION                                                            */
  /* ================================================================ */
  --transition-fast: 150ms ease;
  --transition-base: 240ms ease;
  --transition-slow: 420ms ease;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --reveal-duration: 680ms;
  --ticker-duration: 38s;
  --drift-duration: 22s;

  /* ================================================================ */
  /* LAYOUT                                                            */
  /* ================================================================ */
  --container-max: 1280px;
  --reading-max: 1180px;
  --header-h: 84px;
  --header-h-scrolled: 66px;
}