/* ============================================================
   CAIRO — Giza Grid marketing surface tokens (light)
   Source of truth: CAIRO Giza Grid design language LOCK (internal)
   One brand, two surfaces: this file = MARKETING (light/paper).
   The app panel surface (dark) lives in ../styles.css — do not mix.

   CR-A026-4: fonts self-hosted (no external CDN) — see @font-face
   block below. Files: assets/fonts/*.woff2 (Inter + JetBrains Mono,
   static weight instances, latin subset).
   ============================================================ */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Inter-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/Inter-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/Inter-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/Inter-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/JetBrainsMono-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/JetBrainsMono-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/JetBrainsMono-SemiBold.woff2') format('woff2');
}

:root {
  /* -- Brand core -- */
  --paper:          #FAF7F2;
  --paper-deep:     #F2EDE4;
  --gold:           #D4A574;
  --gold-deep:      #C89660;
  --gold-soft:      #E8C9A4;
  --gold-ink:       #8A5F2E;   /* small gold TEXT on light surfaces only (a11y contrast) */

  /* -- Slate ramp -- */
  --slate-50:       #EFF1F3;
  --slate-100:      #E2E5E8;
  --slate-200:      #CBD0D6;
  --slate-300:      #A8AFB8;
  --slate-400:      #8B8680;
  --slate-500:      #6B7380;
  --slate-600:      #4A5463;
  --slate-700:      #3A4354;
  --slate-800:      #2D3E50;
  --slate-900:      #1A1F26;

  /* -- Semantic -- */
  --fg-1:           var(--slate-900);
  --fg-2:           var(--slate-700);
  --fg-3:           var(--slate-500);
  --fg-muted:       var(--slate-400);
  --fg-accent:      var(--gold-deep);
  --bg-1:           var(--paper);
  --bg-2:           var(--paper-deep);
  --bg-3:           #FFFFFF;
  --bg-inverted:    var(--slate-800);
  --border-default: var(--slate-100);
  --border-strong:  var(--slate-900);
  --border-gold:    var(--gold);

  /* -- Giza Grid grammar -- */
  --hairline:       1px;                 /* the ONE stroke weight at 1x */
  --line-ink:       var(--slate-800);    /* primary line-work */
  --line-faint:     var(--slate-200);    /* grid planes, secondary geometry */
  --line-gold:      var(--gold);         /* the traced / active / honest line */
  --grid-cell:      24px;                /* blueprint background cell */

  /* -- Space / radius / shadow -- */
  --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;
  --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px;
  --radius-lg: 12px; --radius-xl: 20px; --radius-pill: 999px;
  --shadow-hairline: 0 1px 2px rgba(45,62,80,.04), 0 0 0 1px rgba(45,62,80,.06);
  --shadow-card:     0 8px 24px rgba(45,62,80,.08), 0 0 0 1px rgba(45,62,80,.10);
  --shadow-focus:    0 0 0 3px rgba(212,165,116,.35);

  /* -- Type -- */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* -- Motion -- */
  --dur-fast: 150ms; --dur-base: 350ms; --dur-slow: 900ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --content-max: 1200px;
}

* { box-sizing: border-box; margin: 0; }
body {
  font-family: var(--font-body);
  background: var(--bg-1);
  color: var(--fg-1);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* -- Type scale (marketing) -- */
.gg-display  { font-size: 56px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; }
.gg-h1       { font-size: 40px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.1; }
.gg-h2       { font-size: 28px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.gg-h3       { font-size: 19px; font-weight: 600; line-height: 1.3; }
.gg-body-lg  { font-size: 18px; color: var(--fg-2); }
.gg-body     { font-size: 16px; color: var(--fg-2); }
.gg-small    { font-size: 14px; color: var(--fg-3); }
.gg-eyebrow  { font-family: var(--font-mono); font-size: 12px; font-weight: 500;
               text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold-ink); }
.gg-mono     { font-family: var(--font-mono); font-size: 13px; }

/* -- Blueprint grid backdrop (sections) -- */
.gg-blueprint {
  background-image:
    linear-gradient(to right,  rgba(45,62,80,.055) var(--hairline), transparent var(--hairline)),
    linear-gradient(to bottom, rgba(45,62,80,.055) var(--hairline), transparent var(--hairline));
  background-size: var(--grid-cell) var(--grid-cell);
}

/* -- Line-work defaults for inline SVG -- */
.gg-lines        { stroke: var(--line-ink);   stroke-width: var(--hairline); fill: none;
                   vector-effect: non-scaling-stroke; }
.gg-lines-faint  { stroke: var(--line-faint); stroke-width: var(--hairline); fill: none;
                   vector-effect: non-scaling-stroke; }
.gg-lines-gold   { stroke: var(--line-gold);  stroke-width: var(--hairline); fill: none;
                   vector-effect: non-scaling-stroke; }

/* -- The honest cell (awaiting input) -- */
.gg-awaiting {
  background: rgba(212,165,116,.12);
  border: var(--hairline) dashed var(--gold-deep);
  color: var(--gold-ink);
  font-family: var(--font-mono);
}