/* =============================================================
   Super Hi-Fi Design System — Foundations
   colors_and_type.css
   Import once at the top of any page in the system.
   ============================================================= */

/* --------------------------- FONTS --------------------------- */
/* Brand font is Montserrat (display + UI). Body sentences and
   long-form copy can use IBM Plex Sans for its slightly warmer,
   editorial feel; mono uses JetBrains Mono. All loaded via Google
   Fonts so the system works without local font files. */

/* Local Montserrat (brand) — full weight family with italics */
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:100; font-display:swap; src:url('fonts/Montserrat-Thin.ttf') format('truetype'); }
@font-face { font-family:'Montserrat'; font-style:italic; font-weight:100; font-display:swap; src:url('fonts/Montserrat-ThinItalic.ttf') format('truetype'); }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:200; font-display:swap; src:url('fonts/Montserrat-ExtraLight.ttf') format('truetype'); }
@font-face { font-family:'Montserrat'; font-style:italic; font-weight:200; font-display:swap; src:url('fonts/Montserrat-ExtraLightItalic.ttf') format('truetype'); }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:300; font-display:swap; src:url('fonts/Montserrat-Light.ttf') format('truetype'); }
@font-face { font-family:'Montserrat'; font-style:italic; font-weight:300; font-display:swap; src:url('fonts/Montserrat-LightItalic.ttf') format('truetype'); }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/Montserrat-Regular.ttf') format('truetype'); }
@font-face { font-family:'Montserrat'; font-style:italic; font-weight:400; font-display:swap; src:url('fonts/Montserrat-Italic.ttf') format('truetype'); }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/Montserrat-Medium.ttf') format('truetype'); }
@font-face { font-family:'Montserrat'; font-style:italic; font-weight:500; font-display:swap; src:url('fonts/Montserrat-MediumItalic.ttf') format('truetype'); }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/Montserrat-SemiBold.ttf') format('truetype'); }
@font-face { font-family:'Montserrat'; font-style:italic; font-weight:600; font-display:swap; src:url('fonts/Montserrat-SemiBoldItalic.ttf') format('truetype'); }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/Montserrat-Bold.ttf') format('truetype'); }
@font-face { font-family:'Montserrat'; font-style:italic; font-weight:700; font-display:swap; src:url('fonts/Montserrat-BoldItalic.ttf') format('truetype'); }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:800; font-display:swap; src:url('fonts/Montserrat-ExtraBold.ttf') format('truetype'); }
@font-face { font-family:'Montserrat'; font-style:italic; font-weight:800; font-display:swap; src:url('fonts/Montserrat-ExtraBoldItalic.ttf') format('truetype'); }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:900; font-display:swap; src:url('fonts/Montserrat-Black.ttf') format('truetype'); }
@font-face { font-family:'Montserrat'; font-style:italic; font-weight:900; font-display:swap; src:url('fonts/Montserrat-BlackItalic.ttf') format('truetype'); }

/* IBM Plex Sans (body) + JetBrains Mono still loaded from Google Fonts. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ===== TYPE FAMILIES ===== */
  --font-display: 'Montserrat', system-ui, -apple-system, sans-serif;
  --font-body:    'IBM Plex Sans', 'Montserrat', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ===== TYPE SCALE (modular, 1.250 ratio anchored at 16px) ===== */
  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   14px;
  --text-md:   16px;     /* base */
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;
  --text-4xl:  48px;
  --text-5xl:  64px;
  --text-6xl:  88px;
  --text-7xl: 120px;

  /* ===== LINE HEIGHTS ===== */
  --lh-tight:   1.05;
  --lh-snug:    1.20;
  --lh-base:    1.45;
  --lh-relaxed: 1.65;

  /* ===== TRACKING ===== */
  --tracking-tightest: -0.04em;
  --tracking-tight:    -0.02em;
  --tracking-normal:    0;
  --tracking-wide:      0.04em;
  --tracking-wider:     0.10em;
  --tracking-widest:    0.22em;  /* used for eyebrow / nav caps */

  /* ===== WEIGHTS ===== */
  --w-light:    300;
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;
  --w-black:    900;

  /* ===== BRAND PALETTE =====
     Super Hi-Fi color story: warm orange accent, generous whites
     with a hint of warmth (paper, not bleached), architectural
     greys with subtle blue-cool undertones for ink/UI. */

  /* Orange — primary signal color. Used sparingly. */
  --orange-50:  #FFF4ED;
  --orange-100: #FFE3CE;
  --orange-200: #FFC79C;
  --orange-300: #FFA467;
  --orange-400: #FF8638;
  --orange-500: #F36F1F;   /* PRIMARY */
  --orange-600: #D85A12;
  --orange-700: #B0440A;
  --orange-800: #82310B;
  --orange-900: #5A220C;

  /* Paper — cool architectural off-white. Pulls a faint silver-greige
     undertone (think gallery walls, museum signage, concrete sealed
     with matte) instead of Anthropic's warm cream. Slightly less
     bright than before so the page reads as a surface, not a void. */
  --paper-0:   #FCFCFB;   /* "white" surfaces (cards) — never bleach */
  --paper-50:  #F4F3EE;   /* PAGE BACKGROUND (default) — cool greige */
  --paper-100: #ECEBE5;
  --paper-200: #E0DFD8;
  --paper-300: #CFCEC6;

  /* Ink — cool architectural greys. Slightly desaturated blue. */
  --ink-50:   #EEF0F2;
  --ink-100:  #DCDFE4;
  --ink-200:  #B8BDC5;
  --ink-300:  #8E949E;
  --ink-400:  #6A707A;
  --ink-500:  #4A5058;
  --ink-600:  #353A41;
  --ink-700:  #23272D;
  --ink-800:  #15181C;
  --ink-900:  #0A0C0F;

  /* Semantic states */
  --success-500: #2F8F5C;
  --warning-500: #D89A18;
  --danger-500:  #C5402F;
  --info-500:    #2C6BB0;

  /* ===== SEMANTIC TOKENS (light theme — default) ===== */
  --bg-page:        var(--paper-50);
  --bg-surface:     var(--paper-0);
  --bg-surface-2:   var(--paper-100);
  --bg-surface-3:   var(--paper-200);
  --bg-inverse:     var(--ink-900);

  --fg-primary:     var(--ink-900);
  --fg-secondary:   var(--ink-500);
  --fg-tertiary:    var(--ink-400);
  --fg-quiet:       var(--ink-300);
  --fg-on-accent:   var(--paper-0);
  --fg-on-inverse:  var(--paper-50);

  --accent:         var(--orange-500);
  --accent-hover:   var(--orange-600);
  --accent-press:   var(--orange-700);
  --accent-soft:    var(--orange-50);
  --accent-line:    var(--orange-200);

  --border-hairline: rgba(10, 12, 15, 0.08);
  --border-line:     rgba(10, 12, 15, 0.14);
  --border-strong:   rgba(10, 12, 15, 0.28);

  /* ===== ELEVATION (kept very low — architectural, not floaty) ===== */
  --shadow-0: none;
  --shadow-1: 0 1px 0 0 rgba(10,12,15,0.04), 0 1px 2px 0 rgba(10,12,15,0.04);
  --shadow-2: 0 1px 0 0 rgba(10,12,15,0.04), 0 4px 12px -2px rgba(10,12,15,0.06);
  --shadow-3: 0 1px 0 0 rgba(10,12,15,0.05), 0 12px 32px -8px rgba(10,12,15,0.10);
  --shadow-4: 0 24px 64px -16px rgba(10,12,15,0.18);
  --shadow-inset: inset 0 1px 0 0 rgba(255,255,255,0.7);

  /* ===== RADII ===== */
  --r-none: 0;
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-pill: 999px;

  /* ===== SPACING (4px grid) ===== */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  /* ===== MOTION ===== */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 520ms;
}

/* ===== DARK THEME (set [data-theme="dark"] on <html>) ===== */
[data-theme="dark"] {
  --bg-page:       var(--ink-900);
  --bg-surface:    var(--ink-800);
  --bg-surface-2:  var(--ink-700);
  --bg-surface-3:  var(--ink-600);
  --bg-inverse:    var(--paper-50);

  --fg-primary:    var(--paper-50);
  --fg-secondary:  var(--ink-200);
  --fg-tertiary:   var(--ink-300);
  --fg-quiet:      var(--ink-400);
  --fg-on-accent:  var(--paper-0);
  --fg-on-inverse: var(--ink-900);

  --border-hairline: rgba(255,255,255,0.06);
  --border-line:     rgba(255,255,255,0.12);
  --border-strong:   rgba(255,255,255,0.24);

  --shadow-1: 0 1px 0 0 rgba(0,0,0,0.4), 0 1px 2px 0 rgba(0,0,0,0.4);
  --shadow-2: 0 1px 0 0 rgba(0,0,0,0.4), 0 4px 12px -2px rgba(0,0,0,0.5);
  --shadow-3: 0 1px 0 0 rgba(0,0,0,0.4), 0 12px 32px -8px rgba(0,0,0,0.6);
  --shadow-inset: inset 0 1px 0 0 rgba(255,255,255,0.05);
}

/* ===== BASE ELEMENT STYLES ===== */
html, body {
  background: var(--bg-page);
  color: var(--fg-primary);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* DISPLAY HEADINGS — Montserrat, very tight, very confident */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--text-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tightest);
  margin: 0 0 var(--s-6);
  color: var(--fg-primary);
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--text-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--s-5);
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--s-3);
}
h4, .h4 {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
  margin: 0 0 var(--s-2);
}

/* DISPLAY — for hero / oversized statements */
.display-1 {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--text-7xl);
  line-height: 0.95;
  letter-spacing: -0.05em;
}
.display-2 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--text-6xl);
  line-height: 1.0;
  letter-spacing: -0.045em;
}

/* EYEBROW — small allcaps category label, signature SHF detail */
.eyebrow {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--fg-secondary);
}

p, .p {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--lh-relaxed);
  color: var(--fg-primary);
  margin: 0 0 var(--s-4);
  text-wrap: pretty;
  max-width: 64ch;
}
.lede {
  font-size: var(--text-xl);
  line-height: var(--lh-base);
  color: var(--fg-secondary);
  font-weight: var(--w-light);
  letter-spacing: -0.005em;
}
.small  { font-size: var(--text-sm); line-height: var(--lh-base); }
.tiny   { font-size: var(--text-xs); line-height: var(--lh-base); color: var(--fg-tertiary); }

code, .code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-surface-2);
  padding: 0.12em 0.36em;
  border-radius: var(--r-xs);
  border: 1px solid var(--border-hairline);
}

a {
  color: var(--fg-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--accent);
  transition: color var(--dur-1) var(--ease-out);
}
a:hover { color: var(--accent); }

hr {
  border: 0;
  border-top: 1px solid var(--border-hairline);
  margin: var(--s-8) 0;
}

::selection { background: var(--orange-200); color: var(--ink-900); }