/* ------------------------------------------------------------------
 * babylon · GRAPHITE — web tokens (CSS variables)
 * A calm, grey-based, Apple-native direction. Light only by design;
 * the dark counterpart is the separate "Warm" direction.
 *
 * Base:   cool grey canvas · near-ink primary action (no separate hue)
 * Type:   Hanken Grotesk — one family, weight does the work
 * Shape:  crisp hairlines, soft 18px cards, pills for actions
 * ------------------------------------------------------------------ */

@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap");

:root {
  /* base */
  --paper: #FFFFFF;
  --ink:   #1A1C20;   /* darkest text — never pure black */

  /* graphite neutral ramp (cool-cast) */
  --graphite-50:  #F7F8FA;
  --graphite-100: #F3F4F6;
  --graphite-200: #E4E6EB;
  --graphite-300: #CFD2D9;
  --graphite-400: #9A9EA8;
  --graphite-500: #6E7280;
  --graphite-600: #5A5E68;
  --graphite-700: #3D414A;
  --graphite-800: #26282D;  /* ← primary action (ink) */
  --graphite-900: #1A1C20;  /* ← primary text */
  --graphite-950: #0E0F12;

  /* semantic — surfaces & lines */
  --background:    var(--graphite-100);  /* app canvas */
  --surface:       var(--paper);         /* cards, sheets */
  --surface-alt:   var(--paper);         /* card fill (depth via hairline) */
  --surface-high:  #EEF0F3;              /* inset chips / wells */
  --border:        var(--graphite-200);  /* hairline */
  --border-strong: var(--graphite-300);

  /* semantic — text */
  --text-primary:   var(--graphite-900);
  --text-secondary: var(--graphite-600);
  --text-muted:     var(--graphite-400);
  --text-faint:     #C4C7CE;
  --text-inverse:   var(--paper);

  /* primary action — graphite ink, not a separate accent hue */
  --accent:         var(--graphite-800);
  --accent-hover:   #101216;
  --accent-pressed: #000000;
  --accent-tint:    #ECEDF0;
  --on-accent:      var(--paper);
  --progress-track: #E9EAEE;
  --ring-track:     #E9EAEE;

  /* signal colors — muted, used sparingly for data & status */
  --success: #4F8A5B;  --success-tint: #E7F0E9;
  --error:   #C2553F;  --error-tint:   #F6E7E3;
  --warning: #B5852F;  --warning-tint: #F5ECD9;

  /* type */
  --font-display: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-text:    "Hanken Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;

  /* radii */
  --radius-xs: 4px;  --radius-sm: 8px;  --radius-md: 12px;
  --radius-lg: 16px; --radius-card: 18px; --radius-xl: 22px; --radius-pill: 9999px;

  /* spacing (4px base) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px;

  /* shadows — soft, neutral-tinted */
  --shadow-sm:   0 1px 2px rgba(20,22,28,0.04);
  --shadow-card: 0 1px 2px rgba(20,22,28,0.04), 0 2px 10px rgba(20,22,28,0.05);
  --shadow-lg:   0 8px 30px rgba(20,22,28,0.12), 0 2px 8px rgba(20,22,28,0.05);
  --shadow-sheet: 0 -10px 44px rgba(20,22,28,0.14);
  --shadow-focus: 0 0 0 3px rgba(38,40,45,0.16);

  /* nav — liquid glass over content */
  --nav-glass-bg:     rgba(255,255,255,0.82);
  --nav-glass-border: rgba(20,22,28,0.08);
  --nav-blur:         blur(20px) saturate(170%);

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-morph: cubic-bezier(0.22, 1, 0.36, 1);  /* nav collapse/expand */
  --dur-fast: 120ms; --dur-med: 240ms; --dur-slow: 500ms; --dur-morph: 380ms;
}

/* type roles --------------------------------------------------------- */
.display { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1.15; letter-spacing: -0.02em; }
.metric  { font-family: var(--font-display); font-weight: 700; font-size: 38px; line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.h2 { font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1.25; letter-spacing: -0.01em; }
.h3 { font-family: var(--font-display); font-weight: 600; font-size: 16px; line-height: 1.3; }
.body    { font-family: var(--font-text); font-weight: 400; font-size: 15px; line-height: 1.5; }
.body-sm { font-family: var(--font-text); font-weight: 400; font-size: 13.5px; line-height: 1.45; }
.label   { font-family: var(--font-text); font-weight: 600; font-size: 12px; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.caption { font-family: var(--font-text); font-weight: 500; font-size: 11px; line-height: 1.35; color: var(--text-muted); }