/* ============================================================
   Umar Salman — Design System Tokens
   Personal brand · AI workflows & GTM consulting
   Vanilla, black & white, classy, premium, low-distraction
   ============================================================ */

/* ---------- Fonts ---------- */
/* Display: Newsreader (editorial serif, optical sizing, italic-forward)
   Body/UI: Geist Sans (modern neutral sans)
   Mono:    Geist Mono (small caps accents, code, labels)
   ———
   Substitution note: If specific premium foundry fonts (e.g. GT Sectra,
   Reckless Neue, PP Editorial New) are licensed later, swap the
   --font-serif / --font-sans values. Everything else cascades. */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300..700;1,6..72,300..700&family=Geist:wght@300..700&family=Geist+Mono:wght@400;500&display=swap');

:root {
  /* ============ COLOR — raw scale ============ */
  /* Warm-leaning monochrome. Off-white paper, deep ink. */

  --ink-0:   #0a0a0a;   /* deepest text, near-black */
  --ink-1:   #171717;   /* primary text */
  --ink-2:   #2a2a2a;   /* headings on paper */
  --ink-3:   #4a4a4a;   /* secondary text */
  --ink-4:   #6e6e6e;   /* tertiary / captions */
  --ink-5:   #9a9a9a;   /* muted / placeholder */
  --ink-6:   #c4c4c4;   /* disabled / hairline on paper */
  --ink-7:   #e3e1dc;   /* subtle divider */
  --ink-8:   #ede9e1;   /* soft panel tint */
  --ink-9:   #f5f1e8;   /* warm paper (primary bg alt) */
  --ink-10:  #faf7f0;   /* warmest paper */
  --paper:   #fbfaf6;   /* canonical page background */
  --white:   #ffffff;   /* pure white (cards, overlays) */

  /* One allowed accent — reserved. Used sparingly for emphasis,
     selection, and the tiniest dots of warmth. */
  --accent-ink:  #1a1a1a;      /* default accent = just deeper ink */
  --accent-warm: #8b6f47;      /* muted tobacco / old book — sparingly */

  /* ============ SEMANTIC COLOR ============ */
  --bg:            var(--paper);
  --bg-elevated:   var(--white);
  --bg-subtle:     var(--ink-9);
  --bg-panel:      var(--ink-8);
  --bg-inverse:    var(--ink-1);

  --fg:            var(--ink-1);
  --fg-strong:     var(--ink-0);
  --fg-muted:      var(--ink-3);
  --fg-subtle:     var(--ink-4);
  --fg-faint:      var(--ink-5);
  --fg-inverse:    var(--paper);

  --border:        var(--ink-7);
  --border-strong: var(--ink-6);
  --hairline:      var(--ink-7);

  --selection-bg:  var(--ink-1);
  --selection-fg:  var(--paper);

  /* ============ TYPE — families ============ */
  --font-serif: 'Newsreader', 'Times New Roman', Times, Georgia, serif;
  --font-sans:  'Geist', ui-sans-serif, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:  'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ============ TYPE — scale (modular 1.25, opinionated) ============ */
  --text-2xs:  0.6875rem;  /* 11px — micro labels */
  --text-xs:   0.75rem;    /* 12px — eyebrows, captions */
  --text-sm:   0.875rem;   /* 14px — UI, meta */
  --text-base: 1rem;       /* 16px — body */
  --text-md:   1.125rem;   /* 18px — comfortable reading */
  --text-lg:   1.375rem;   /* 22px — lead paragraph */
  --text-xl:   1.75rem;    /* 28px — sub-headings */
  --text-2xl:  2.25rem;    /* 36px — section titles */
  --text-3xl:  3rem;       /* 48px — page titles */
  --text-4xl:  4rem;       /* 64px — hero */
  --text-5xl:  5.5rem;     /* 88px — display hero */
  --text-6xl:  7.5rem;     /* 120px — statement */

  /* Line-heights */
  --lh-tight:   1.05;
  --lh-snug:    1.18;
  --lh-normal:  1.45;
  --lh-relaxed: 1.65;
  --lh-loose:   1.8;

  /* Letter-spacing */
  --tracking-tightest: -0.04em;  /* giant serif display */
  --tracking-tighter:  -0.025em; /* serif headings */
  --tracking-tight:    -0.01em;  /* body-large, UI buttons */
  --tracking-normal:   0em;
  --tracking-wide:     0.04em;   /* small caps, eyebrows */
  --tracking-widest:   0.18em;   /* label caps, nav caps */

  /* Font weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ============ SPACING (4px base, generous scale) ============ */
  --space-0:   0;
  --space-px:  1px;
  --space-1:   0.25rem;   /* 4  */
  --space-2:   0.5rem;    /* 8  */
  --space-3:   0.75rem;   /* 12 */
  --space-4:   1rem;      /* 16 */
  --space-5:   1.5rem;    /* 24 */
  --space-6:   2rem;      /* 32 */
  --space-7:   3rem;      /* 48 */
  --space-8:   4rem;      /* 64 */
  --space-9:   6rem;      /* 96 */
  --space-10:  8rem;      /* 128 */
  --space-11:  12rem;     /* 192 */

  /* ============ RADIUS (restrained — premium = less curvy) ============ */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-full: 999px;

  /* ============ BORDERS ============ */
  --border-hairline: 0.5px solid var(--hairline);
  --border-thin:     1px solid var(--border);
  --border-medium:   1px solid var(--border-strong);
  --border-strong-w: 1.5px solid var(--fg);
  --border-ink:      1px solid var(--ink-1);

  /* ============ SHADOWS (subtle, mostly hairline) ============ */
  --shadow-none: none;
  --shadow-xs:   0 1px 0 rgba(23,23,23,0.04);
  --shadow-sm:   0 1px 2px rgba(23,23,23,0.05), 0 0 0 1px rgba(23,23,23,0.04);
  --shadow-md:   0 4px 12px rgba(23,23,23,0.06), 0 0 0 1px rgba(23,23,23,0.04);
  --shadow-lg:   0 12px 32px rgba(23,23,23,0.08), 0 0 0 1px rgba(23,23,23,0.04);
  --shadow-inset: inset 0 0 0 1px rgba(23,23,23,0.06);

  /* ============ MOTION ============ */
  --ease-out:   cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.2, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:   120ms;
  --duration-base:   220ms;
  --duration-slow:   420ms;
  --duration-page:   600ms;

  /* ============ LAYOUT ============ */
  --container-sm:  640px;
  --container-md:  820px;   /* reading width */
  --container-lg:  1080px;
  --container-xl:  1280px;
  --container-2xl: 1440px;
  --gutter:        clamp(1.25rem, 4vw, 4rem);

  /* ============ Z-INDEX ============ */
  --z-base:    0;
  --z-above:   10;
  --z-sticky:  100;
  --z-overlay: 500;
  --z-modal:   1000;
  --z-toast:   2000;
}

/* ============================================================
   SEMANTIC TYPE (use these for consistency)
   ============================================================ */

.type-display {
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  font-size: var(--text-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tightest);
  font-style: italic;         /* editorial signature */
  font-optical-sizing: auto;
}

.type-h1 {
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  font-size: var(--text-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tighter);
}

.type-h2 {
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  font-size: var(--text-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tighter);
}

.type-h3 {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}

.type-h4 {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-md);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}

.type-lead {
  font-family: var(--font-serif);
  font-weight: var(--weight-light);
  font-size: var(--text-lg);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--tracking-tight);
  font-style: italic;
}

.type-body {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--fg);
}

.type-body-sm {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-sm);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
}

.type-caption {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-xs);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

.type-eyebrow {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-size: var(--text-xs);
  line-height: 1;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.type-label {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-size: var(--text-2xs);
  line-height: 1;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.type-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  letter-spacing: 0;
}

.type-quote {
  font-family: var(--font-serif);
  font-weight: var(--weight-light);
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tighter);
  font-style: italic;
}

/* ============================================================
   BASE ELEMENT STYLES (use on element selectors inside contexts
   where you want auto-styled prose)
   ============================================================ */

.prose h1 { @extend .type-h1; }       /* if using postcss-nested */
/* Fallback: plain mappings */
.prose > h1 { font: inherit; font-family: var(--font-serif); font-size: var(--text-3xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-tighter); margin: 0 0 var(--space-5); }
.prose > h2 { font-family: var(--font-serif); font-size: var(--text-2xl); line-height: var(--lh-snug); letter-spacing: var(--tracking-tighter); margin: var(--space-7) 0 var(--space-4); }
.prose > h3 { font-family: var(--font-sans); font-weight: var(--weight-medium); font-size: var(--text-xl); letter-spacing: var(--tracking-tight); margin: var(--space-6) 0 var(--space-3); }
.prose > p  { font-family: var(--font-sans); font-size: var(--text-md); line-height: var(--lh-relaxed); margin: 0 0 var(--space-5); color: var(--fg); }
.prose > blockquote { font-family: var(--font-serif); font-style: italic; font-size: var(--text-lg); line-height: var(--lh-snug); border-left: 1px solid var(--border-strong); padding-left: var(--space-5); margin: var(--space-6) 0; color: var(--fg-muted); }
.prose a  { color: var(--fg); text-decoration: underline; text-decoration-thickness: 0.5px; text-underline-offset: 0.2em; transition: opacity var(--duration-fast) var(--ease-out); }
.prose a:hover { opacity: 0.6; }

/* ============================================================
   SELECTION
   ============================================================ */
::selection { background: var(--selection-bg); color: var(--selection-fg); }