/* ============================================================
   GRAPHISION — BRAND DESIGN TOKENS
   v1.0 · 2026 · Generated from the Graphision Brand Guidelines.

   The single source of truth for the Graphision digital brand.
   Drop into any build (e.g. the Orisa template rebuild) and
   reference every value via var(--token-name).
   ============================================================ */

:root {

  /* ---- BRAND RED — the core equity ------------------------- */
  --color-red-50:   #FDF0F0;
  --color-red-100:  #F8D2D4;
  --color-red-300:  #E97A7F;
  --color-red-500:  #D9303A;
  --color-red-600:  #CB2129;   /* PRIMARY — brand red, matches logo + print */
  --color-red-700:  #A4191F;
  --color-red-900:  #66100F;

  --color-brand:        var(--color-red-600);
  --color-brand-hover:  var(--color-red-500);
  --color-brand-active: var(--color-red-700);

  /* ---- INK — dark surfaces (hero & feature bands) ---------- */
  --color-ink-950:  #09090C;
  --color-ink-900:  #121217;
  --color-ink-800:  #1C1C23;
  --color-ink-700:  #2A2A33;
  --color-ink-600:  #3C3C47;

  /* ---- NEUTRAL — light surfaces (body) --------------------- */
  --color-white:        #FFFFFF;
  --color-neutral-50:   #F7F7F8;
  --color-neutral-100:  #EEEEF0;
  --color-neutral-200:  #E3E3E7;
  --color-neutral-400:  #A0A0A8;
  --color-neutral-600:  #51515A;
  --color-neutral-900:  #17171B;

  /* ---- SEMANTIC — states only ------------------------------ */
  --color-success:  #16A34A;
  --color-warning:  #D98A0B;
  --color-info:     #2563EB;
  --color-danger:   #DC2626;

  /* ---- ROLE TOKENS — light mode ---------------------------- */
  --surface-page:    var(--color-neutral-50);
  --surface-raised:  var(--color-white);
  --surface-sunken:  var(--color-neutral-100);
  --border-subtle:   var(--color-neutral-200);
  --text-primary:    var(--color-neutral-900);
  --text-secondary:  var(--color-neutral-600);
  --text-muted:      var(--color-neutral-400);
  --text-on-brand:   var(--color-white);

  /* ---- ROLE TOKENS — dark mode ----------------------------- */
  --surface-dark:         var(--color-ink-900);
  --surface-dark-raised:  var(--color-ink-800);
  --border-dark:          var(--color-ink-700);
  --text-on-dark:         var(--color-white);
  --text-on-dark-muted:   var(--color-neutral-400);

  /* ---- SIGNATURE — Ember Glow ------------------------------ */
  --glow-ember: radial-gradient(circle,
                  rgba(203, 33, 41, .55) 0%,
                  rgba(203, 33, 41, 0) 70%);

  /* ---- TYPOGRAPHY — families ------------------------------- */
  --font-display: 'Jost', 'Century Gothic', sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'Cascadia Code', Consolas, monospace;

  /* ---- TYPOGRAPHY — fluid type scale ----------------------- */
  --text-display-xl: clamp(2.5rem, 1.30rem + 3.9vw, 4.5rem);   /* 40 → 72 */
  --text-display-l:  clamp(2.125rem, 1.42rem + 2.3vw, 3.5rem); /* 34 → 56 */
  --text-h1:         clamp(1.875rem, 1.42rem + 1.5vw, 2.75rem);/* 30 → 44 */
  --text-h2:         clamp(1.625rem, 1.40rem + 0.8vw, 2.125rem);/*26 → 34 */
  --text-h3:         1.625rem;    /* 26 */
  --text-h4:         1.25rem;     /* 20 */
  --text-h5:         1.0625rem;   /* 17 */
  --text-overline:   0.8125rem;   /* 13 */
  --text-lead:       1.25rem;     /* 20 */
  --text-body-l:     1.125rem;    /* 18 */
  --text-body:       1rem;        /* 16 — base */
  --text-body-s:     0.875rem;    /* 14 */
  --text-caption:    0.8125rem;   /* 13 */
  --text-button:     0.9375rem;   /* 15 */

  /* ---- TYPOGRAPHY — weights -------------------------------- */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---- TYPOGRAPHY — leading & tracking --------------------- */
  --leading-tight:   1.05;
  --leading-snug:    1.18;
  --leading-normal:  1.6;
  --leading-relaxed: 1.65;
  --tracking-display: -0.03em;
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.14em;
  --measure:          68ch;

  /* ---- SPACING — 4px base scale ---------------------------- */
  --space-0:  0;
  --space-1:  0.25rem;   /* 4  */
  --space-2:  0.5rem;    /* 8  */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.5rem;    /* 24 */
  --space-6:  2rem;      /* 32 */
  --space-7:  3rem;      /* 48 */
  --space-8:  4rem;      /* 64 */
  --space-9:  6rem;      /* 96 — section rhythm */
  --space-10: 8rem;      /* 128 */
  --section-y: clamp(4rem, 2rem + 6vw, 6rem);

  /* ---- RADIUS ---------------------------------------------- */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --radius-pill: 999px;

  /* ---- ELEVATION — neutral shadows on light ---------------- */
  --shadow-sm: 0 1px 2px rgba(16,16,20,.06), 0 1px 3px rgba(16,16,20,.10);
  --shadow-md: 0 4px 12px rgba(16,16,20,.08), 0 2px 4px rgba(16,16,20,.06);
  --shadow-lg: 0 16px 40px rgba(16,16,20,.12);
  /* on dark, prefer a 1px --border-dark + red glow */
  --glow-red:  0 8px 32px rgba(203,33,41,.45);

  /* ---- LAYOUT ---------------------------------------------- */
  --container-max:  1280px;
  --container-wide: 1440px;
  --grid-columns:   12;
  --grid-gutter:    24px;

  /* ---- MOTION ---------------------------------------------- */
  --ease-out:       cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast:  150ms;
  --duration-base:  250ms;
  --duration-slow:  600ms;
}