/* =========================================================
   (i)Sage — Center Node brand tokens  ·  v1.0  ·  October 2026
   Single source of truth for color, type, space and shape.
   Pair with isage.css (components) and ../fonts/fonts.css.
   ========================================================= */
:root {
  /* ---- Color: core ---- */
  --isage-abyss:        #0B2A38;  /* Primary ground. Deep Teal, darkened. */
  --isage-abyss-deep:   #082230;  /* Recessed bands, footer */
  --isage-abyss-raised: #12384A;  /* Raised surfaces on Abyss */
  --isage-teal:         #1E6B8C;  /* Deep Teal — shared with TheGreyMatter.ai */
  --isage-teal-ink:     #155573;  /* Teal for text/links on Bone (7.1:1) */
  --isage-tide:         #4E9BBB;  /* Vectors, lines, focus rings on Abyss */
  --isage-orange:       #E5A33A;  /* Brand Orange — the center node. One per view. */
  --isage-bone:         #F4EFE6;  /* Light ground, text on Abyss */
  --isage-fog:          #A9B8BF;  /* Secondary text on Abyss */
  --isage-mist:         #C3CED3;  /* Body text on Abyss */
  --isage-graphite:     #4A5A62;  /* Secondary text on Bone */
  --isage-white:        #FFFFFF;

  /* ---- Color: lines ---- */
  --isage-rule-dark:    #1D4556;  /* Hairlines on Abyss */
  --isage-rule-light:   #E2DACB;  /* Hairlines on Bone */

  /* ---- Color: semantic (dark-first) ---- */
  --bg:            var(--isage-abyss);
  --bg-recessed:   var(--isage-abyss-deep);
  --bg-raised:     var(--isage-abyss-raised);
  --text:          var(--isage-bone);
  --text-body:     var(--isage-mist);
  --text-muted:    var(--isage-fog);
  --accent:        var(--isage-orange);
  --line:          var(--isage-rule-dark);
  --link:          var(--isage-orange);
  --focus:         var(--isage-tide);

  /* ---- Typography ---- */
  --font-display: 'Sora', 'Segoe UI', system-ui, sans-serif;
  --font-text:    'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-display: clamp(2.75rem, 1.6rem + 4.6vw, 5rem);    /* 44 → 80 */
  --fs-h1:      clamp(2.25rem, 1.5rem + 3vw, 3.75rem);   /* 36 → 60 */
  --fs-h2:      clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem); /* 28 → 44 */
  --fs-h3:      clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);  /* 20 → 24 */
  --fs-lead:    clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem); /* 18 → 20 */
  --fs-body:    1.0625rem;  /* 17 */
  --fs-small:   0.875rem;   /* 14 */
  --fs-label:   0.8125rem;  /* 13 */
  --fs-figure:  clamp(2rem, 1.7rem + 0.9vw, 2.375rem);  /* 32 → 38 */

  --lh-tight: 1.04;
  --lh-snug:  1.25;
  --lh-body:  1.65;

  --ls-display: -0.03em;
  --ls-heading: -0.02em;
  --ls-caps:     0.2em;   /* Sora caps: wordmark, section heads */
  --ls-label:    0.14em;  /* Plex Mono labels */

  /* ---- Space (8-pt) ---- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;
  --space-9: 96px;  --space-10: 128px;
  --section-y: clamp(64px, 8vw, 128px);
  --gutter:    clamp(20px, 4vw, 40px);
  --container: 1200px;
  --measure:   66ch;

  /* ---- Shape & depth ---- */
  --radius-sm: 2px;   /* buttons, inputs */
  --radius-md: 4px;   /* panels, images */
  --stroke:    1px;
  --shadow:    0 16px 48px rgba(0, 0, 0, 0.35);

  /* ---- Motion ---- */
  --ease:      cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast:  150ms;
  --dur:       300ms;
}

/* Light ("Bone") surface — apply .surface-bone to any section */
.surface-bone {
  --bg:          var(--isage-bone);
  --bg-raised:   var(--isage-white);
  --text:        var(--isage-abyss);
  --text-body:   #2A3B43;
  --text-muted:  var(--isage-graphite);
  --line:        var(--isage-rule-light);
  --link:        var(--isage-teal-ink);
  --focus:       var(--isage-teal);
  /* Orange is graphic-only on Bone (1.9:1) — never text. */
}