/* ============================================================================
   OrdaForma v2 — DESIGN TOKENS  (the single source of truth)
   ----------------------------------------------------------------------------
   Everything visual inherits from the variables below. Change a value here and
   it ripples across the whole site. This is the "Apple Liquid Glass" system:
   a clean white/grey canvas, one confident OrdaForma blue, and small, glossy
   glass-ivory accents — with vibrant contrast and smooth, purposeful motion.

   Sections:  1) Color   2) Glass   3) Type   4) Space/Radius
              5) Shadow/Glow   6) Motion   7) Layout/Z-index
   ============================================================================ */

:root {

  /* ---- 1) COLOR ---------------------------------------------------------- */
  /* Canvas: soft, warm-neutral whites (never pure #fff — easier on the eye) */
  --bg:            #f6f7f9;   /* page canvas            */
  --bg-2:          #eef0f4;   /* recessed / alt bands   */
  --surface:       #ffffff;   /* solid cards            */
  --surface-2:     #fbfcfe;   /* slightly lifted        */

  /* Ink: a calm neutral-slate text ramp (high contrast, not harsh black) */
  --ink:           #10131a;   /* headings / primary     */
  --ink-2:         #384152;   /* body text              */
  --muted:         #6b7280;   /* secondary / captions   */
  --faint:         #767c88;   /* hints / placeholders (AA ~4.5:1 on white) */
  --line:          #e4e7ee;   /* hairline borders       */
  --line-strong:   #d3d8e2;

  /* OrdaForma Blue — the one accent, as a full scale */
  --blue-50:       #eaf1fe;
  --blue-100:      #d3e2fd;
  --blue-200:      #a9c6fb;
  --blue-300:      #7aa6f6;
  --blue-400:      #4d84ee;
  --blue-500:      #2f6fe0;   /* ★ brand core           */
  --blue-600:      #205bc8;   /* hover / pressed        */
  --blue-700:      #1a49a3;
  --blue-900:      #12306b;   /* deep, for dark bands   */
  --blue:          var(--blue-500);
  --blue-ink:      #0b1c3e;   /* text on pale blue      */

  /* Glossy glass-ivory — used SPARINGLY as a warm luxe accent */
  --ivory:         #f5efe0;
  --ivory-2:       #efe6d2;
  --ivory-line:    #e6dcc2;
  --ivory-ink:     #5a4d33;

  /* Signal colors */
  --good:          #1f9d63;
  --warn:          #d98a1f;
  --bad:           #d64550;

  /* Selection + focus */
  --focus:         color-mix(in srgb, var(--blue-500) 55%, white);

  /* Vibrant gradients (contrast + color feel) */
  --grad-blue:     linear-gradient(135deg, var(--blue-400) 0%, var(--blue-600) 55%, var(--blue-700) 100%);
  --grad-hero:     radial-gradient(120% 120% at 15% 0%, #ffffff 0%, var(--bg) 42%, var(--bg-2) 100%);
  --grad-sheen:    linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,0) 42%);
  --grad-ivory:    linear-gradient(135deg, #fbf6ea 0%, var(--ivory) 55%, var(--ivory-2) 100%);

  /* ---- 2) GLASS ---------------------------------------------------------- */
  /* The "liquid glass" material. Frosted, glossy, with a bright top edge.    */
  --glass-bg:      rgba(255,255,255,.62);
  --glass-bg-strong: rgba(255,255,255,.78);
  --glass-tint:    rgba(244,247,252,.55);      /* cool tint over glass   */
  --glass-border:  rgba(255,255,255,.75);
  --glass-edge:    rgba(16,19,26,.06);         /* outer definition line  */
  --glass-blur:    22px;
  --glass-blur-lg: 40px;
  --glass-sat:     140%;                        /* backdrop saturation    */
  /* the glossy top-highlight + inner shading that sells the "wet" look */
  --glass-sheen:
      inset 0 1px 0 rgba(255,255,255,.9),
      inset 0 -1px 0 rgba(16,19,26,.05),
      inset 0 22px 34px -26px rgba(255,255,255,.9);

  /* Ivory glass variant (warm) */
  --iglass-bg:     rgba(245,239,224,.55);
  --iglass-border: rgba(255,250,238,.8);

  /* ---- 3) TYPE ----------------------------------------------------------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;

  /* Fluid type scale (clamped) — display down to caption */
  --t-display: 700 clamp(2.7rem, 6.2vw, 4.6rem)/1.04 var(--font-sans);
  --t-h1:      700 clamp(2.1rem, 4.4vw, 3.2rem)/1.08 var(--font-sans);
  --t-h2:      680 clamp(1.6rem, 3vw, 2.3rem)/1.12 var(--font-sans);
  --t-h3:      650 clamp(1.2rem, 2vw, 1.5rem)/1.2 var(--font-sans);
  --t-lead:    400 clamp(1.02rem, 1.3vw, 1.2rem)/1.6 var(--font-sans);
  --t-body:    400 1rem/1.6 var(--font-sans);
  --t-small:   400 .875rem/1.5 var(--font-sans);
  --t-caption: 500 .78rem/1.4 var(--font-sans);
  --t-eyebrow: 700 .74rem/1 var(--font-sans);   /* uppercase kicker */

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-wide:  0.14em;   /* eyebrows */

  /* ---- 4) SPACE + RADIUS ------------------------------------------------- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 96px;  --sp-10: 128px;

  --r-xs: 8px;   --r-sm: 12px;  --r-md: 16px;  --r-lg: 20px;
  --r-xl: 28px;  --r-2xl: 36px; --r-pill: 999px;

  /* ---- 5) SHADOW + GLOW -------------------------------------------------- */
  /* Neutral, Apple-soft elevation ramp */
  --sh-1: 0 1px 2px rgba(16,19,26,.06), 0 1px 1px rgba(16,19,26,.04);
  --sh-2: 0 4px 14px -6px rgba(16,19,26,.14), 0 2px 6px -4px rgba(16,19,26,.1);
  --sh-3: 0 14px 40px -14px rgba(16,19,26,.22), 0 6px 14px -8px rgba(16,19,26,.12);
  --sh-4: 0 30px 70px -24px rgba(16,19,26,.3), 0 10px 24px -12px rgba(16,19,26,.16);
  --sh-float: 0 24px 60px -20px rgba(20,40,90,.32);
  /* Accent glow (used on primary actions + active nodes) */
  --glow-blue: 0 8px 26px -6px color-mix(in srgb, var(--blue-500) 55%, transparent);
  --glow-blue-strong: 0 10px 34px -4px color-mix(in srgb, var(--blue-500) 70%, transparent);

  /* ---- 6) MOTION --------------------------------------------------------- */
  /* NOTE: --ease and --spring are also consumed by the node-map JS via inline
     styles (var(--spring)/var(--ease)). Keep these names. */
  --ease:        cubic-bezier(.22,.61,.36,1);      /* smooth deceleration */
  --ease-out:    cubic-bezier(.16,1,.3,1);         /* silky, long tail    */
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --spring:      cubic-bezier(.34,1.56,.64,1);     /* gentle overshoot    */
  --spring-lg:   cubic-bezier(.22,1.7,.36,1);      /* bouncier            */

  --dur-1: .12s;  --dur-2: .2s;   --dur-3: .32s;
  --dur-4: .5s;   --dur-5: .8s;   --dur-6: 1.1s;

  /* ---- 7) LAYOUT + Z-INDEX ---------------------------------------------- */
  --sidebar-w: 264px;
  --maxw: 1180px;
  --maxw-narrow: 760px;
  --gutter: clamp(18px, 4vw, 40px);

  --z-base: 1;  --z-raised: 10;  --z-sticky: 100;  --z-sidebar: 200;
  --z-drawer: 400;  --z-modal: 600;  --z-toast: 800;  --z-burst: 900;
}

/* Selection + accessibility niceties */
::selection { background: color-mix(in srgb, var(--blue-500) 24%, white); color: var(--ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-xs); }

/* Honor reduced-motion: strip long/looping motion, keep instant clarity */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-3:.001s; --dur-4:.001s; --dur-5:.001s; --dur-6:.001s; }
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.08s !important; scroll-behavior:auto !important; }
}