/* =====================================================================
   ZIGU LABS — Design Tokens
   Brand: AI deep-tech, mathematical formulas & theory.
   Values: rationality + efficiency, simplicity + beauty, stability + accuracy.
   Aesthetic: Deep Charcoal canvas, White typography, Gold precision accent.
   ===================================================================== */

/* ---------- Webfonts (Google Fonts substitutions; flagged in README) ---- */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* =========================== COLOR — RAW ============================ */
  /* Deep Charcoal scale — slightly darker than Space Gray, lighter than pure black. */
  --zg-ink-000: #0B0C0F;   /* deepest, for vignette / overlay base    */
  --zg-ink-50:  #14151A;   /* DEEP CHARCOAL — primary brand surface   */
  --zg-ink-100: #1C1D22;   /* secondary surface, cards on dark        */
  --zg-ink-200: #24252B;   /* elevated surface, hover row             */
  --zg-ink-300: #2E2F36;   /* dividers, hairline borders on dark      */
  --zg-ink-400: #3D3F47;   /* strong border, disabled stroke          */
  --zg-ink-500: #5A5C66;   /* muted icon / metadata                   */
  --zg-ink-600: #888A93;   /* tertiary text on dark                   */
  --zg-ink-700: #B4B6BD;   /* secondary text on dark                  */
  --zg-ink-800: #DCDDE1;   /* near-white text on dark                 */
  --zg-ink-900: #FFFFFF;   /* pure white — body type on dark          */

  /* Paper scale — for light mode / printed surfaces */
  --zg-paper-50:  #FAFAF7;  /* warm off-white, primary paper          */
  --zg-paper-100: #F2F1EC;  /* secondary paper                        */
  --zg-paper-200: #E6E5DE;  /* paper hover                            */
  --zg-paper-300: #D4D2C8;  /* paper border                           */

  /* Gold — sampled from the orbital logo (#CAAB29). The precision accent. */
  --zg-gold-300: #E8D27A;   /* soft, decorative                       */
  --zg-gold-400: #D9BC44;   /* lighter, hover state                   */
  --zg-gold-500: #CAAB29;   /* PRIMARY POINT COLOR                    */
  --zg-gold-600: #A88B1E;   /* deeper, pressed state                  */
  --zg-gold-700: #836D14;   /* darkest, text on gold surface          */
  --zg-gold-tint:rgba(202, 171, 41, 0.12);  /* gold wash bg           */
  --zg-gold-edge:rgba(202, 171, 41, 0.28);  /* gold faint border      */

  /* Semantic — muted, palette-consistent (not neon SaaS) */
  --zg-success: #6F9E5C;
  --zg-warning: #D9A23E;
  --zg-danger:  #C95C4A;
  --zg-info:    #6B8FB5;

  /* =========================== COLOR — SEMANTIC ======================= */
  /* Default theme is DARK. See .light below for inversion. */
  --bg-canvas:       var(--zg-ink-50);
  --bg-surface:      var(--zg-ink-100);
  --bg-elevated:     var(--zg-ink-200);
  --bg-hover:        var(--zg-ink-200);
  --bg-overlay:      rgba(11, 12, 15, 0.72);

  --fg-1:            var(--zg-ink-900);   /* primary text             */
  --fg-2:            var(--zg-ink-800);   /* body text                */
  --fg-3:            var(--zg-ink-700);   /* secondary                */
  --fg-4:            var(--zg-ink-600);   /* tertiary / metadata      */
  --fg-5:            var(--zg-ink-500);   /* muted / disabled         */

  --border-1:        var(--zg-ink-300);   /* hairline                 */
  --border-2:        var(--zg-ink-400);   /* strong                   */

  --accent:          var(--zg-gold-500);
  --accent-hover:    var(--zg-gold-400);
  --accent-press:    var(--zg-gold-600);
  --accent-fg:       var(--zg-ink-50);    /* text on gold surfaces    */
  --accent-tint:     var(--zg-gold-tint);
  --accent-edge:     var(--zg-gold-edge);

  /* =========================== TYPE — RAW ============================= */
  --font-serif:  'Instrument Serif', 'Source Serif 4', 'Iowan Old Style', Georgia, serif;
  --font-sans:   'Geist', 'Söhne', 'Helvetica Neue', 'Segoe UI', system-ui, sans-serif;
  --font-mono:   'JetBrains Mono', 'SF Mono', 'Cascadia Mono', ui-monospace, monospace;

  /* Type scale — modular, 1.25 ratio anchored at 16px body */
  --t-12: 0.75rem;     /* 12 */
  --t-13: 0.8125rem;   /* 13 — captions, micro */
  --t-14: 0.875rem;    /* 14 — UI default */
  --t-15: 0.9375rem;   /* 15 — body sm */
  --t-16: 1rem;        /* 16 — body */
  --t-18: 1.125rem;    /* 18 — lead */
  --t-21: 1.3125rem;   /* 21 — h5 */
  --t-25: 1.5625rem;   /* 25 — h4 */
  --t-31: 1.9375rem;   /* 31 — h3 */
  --t-39: 2.4375rem;   /* 39 — h2 */
  --t-49: 3.0625rem;   /* 49 — h1 */
  --t-61: 3.8125rem;   /* 61 — display */
  --t-76: 4.75rem;     /* 76 — hero */
  --t-96: 6rem;        /* 96 — billboard */

  --lh-tight:    1.04;
  --lh-snug:     1.18;
  --lh-default:  1.4;
  --lh-relaxed:  1.6;

  --tr-tight:   -0.02em;
  --tr-snug:    -0.01em;
  --tr-default:  0em;
  --tr-wide:     0.04em;
  --tr-loose:    0.14em;

  --weight-light: 300;
  --weight-reg:   400;
  --weight-med:   500;
  --weight-semi:  600;
  --weight-bold:  700;

  /* =========================== SPACING ================================ */
  --space-0:  0;
  --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:  56px;
  --space-10: 80px;
  --space-11: 120px;
  --space-12: 160px;

  /* =========================== RADIUS ================================= */
  --r-0:    0;
  --r-1:    2px;     /* hairline radius — pure mathematical feel */
  --r-2:    4px;     /* default control radius                   */
  --r-3:    8px;     /* card                                     */
  --r-4:    12px;    /* large card                               */
  --r-5:    16px;    /* sheet                                    */
  --r-full: 9999px;

  /* =========================== ELEVATION ============================== */
  /* Shadows are SUBTLE on dark — we lean on borders + slight lift.       */
  --shadow-0: none;
  --shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 2px 4px rgba(0,0,0,0.35), 0 8px 24px rgba(0,0,0,0.4);
  --shadow-3: 0 4px 8px rgba(0,0,0,0.4),  0 16px 40px rgba(0,0,0,0.5);
  --shadow-gold: 0 0 0 1px var(--zg-gold-edge), 0 6px 24px rgba(202,171,41,0.18);

  /* =========================== MOTION ================================= */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);    /* default UI exit  */
  --ease-in:     cubic-bezier(0.6, 0, 0.8, 0.3);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-precise:cubic-bezier(0.3, 0.7, 0.4, 1);    /* mathematical     */

  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   360ms;
}

/* =========================== LIGHT THEME =============================== */
.light, [data-theme="light"] {
  --bg-canvas:    var(--zg-paper-50);
  --bg-surface:   #FFFFFF;
  --bg-elevated:  #FFFFFF;
  --bg-hover:     var(--zg-paper-100);
  --bg-overlay:   rgba(20, 21, 26, 0.48);

  --fg-1: var(--zg-ink-50);
  --fg-2: #2A2C33;
  --fg-3: #54565E;
  --fg-4: #7B7D85;
  --fg-5: #A2A4AB;

  --border-1: var(--zg-paper-300);
  --border-2: #B9B7AD;
}

/* =========================== SEMANTIC TYPE ============================= */
/* Apply directly OR use the utility classes below. */

body {
  font-family: var(--font-sans);
  font-size: var(--t-16);
  line-height: var(--lh-default);
  color: var(--fg-1);
  background: var(--bg-canvas);
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.display, h1.display {
  font-family: var(--font-serif);
  font-size: clamp(var(--t-61), 7vw, var(--t-96));
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  font-weight: 400;
  font-style: italic;          /* signature display treatment */
}

h1, .h1 {
  font-family: var(--font-serif);
  font-size: var(--t-49);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  font-weight: 400;
}

h2, .h2 {
  font-family: var(--font-serif);
  font-size: var(--t-39);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  font-weight: 400;
}

h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--t-31);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  font-weight: var(--weight-semi);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--t-25);
  line-height: var(--lh-snug);
  font-weight: var(--weight-semi);
}

h5, .h5 {
  font-family: var(--font-sans);
  font-size: var(--t-21);
  line-height: var(--lh-snug);
  font-weight: var(--weight-semi);
}

h6, .h6, .eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-13);
  font-weight: var(--weight-med);
  letter-spacing: var(--tr-loose);
  text-transform: uppercase;
  color: var(--fg-3);
}

p, .body {
  font-size: var(--t-16);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
  max-width: 68ch;
}

.lead {
  font-size: var(--t-21);
  line-height: var(--lh-snug);
  color: var(--fg-2);
  font-weight: var(--weight-light);
}

.caption {
  font-size: var(--t-13);
  line-height: var(--lh-default);
  color: var(--fg-4);
}

code, kbd, samp, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-feature-settings: 'zero', 'ss01';
}

.numeric {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* Editorial pull-quote / formula display */
.formula {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--t-31);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

/* Gold accent text — sparing use only */
.accent-text { color: var(--accent); }

/* Hairline horizontal divider, used between editorial blocks */
.rule {
  border: 0;
  height: 1px;
  background: var(--border-1);
}
.rule.gold { background: var(--accent); height: 1px; }