/* ============================================================================
   EMERSION DESIGN SYSTEM — Foundations
   Color + Type tokens. Light-first. Monochrome with a single blue accent.
   ----------------------------------------------------------------------------
   Typeface: Geist / Geist Mono (Google Fonts) used as the freely-available
   stand-in for the proprietary "OpenAI Sans". Swap the @font-face / @import
   below for licensed font files in production.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300..700&family=Geist+Mono:wght@400;500&display=swap');

:root {
  /* ---- Palette: neutrals --------------------------------------------------
     Pure black-on-white. Two soft gray surfaces. One hairline gray.        */
  --color-white:        #FFFFFF;   /* page background                       */
  --color-surface:      #F5F5F5;   /* primary raised surface / section bg   */
  --color-surface-2:    #F1F1F1;   /* secondary surface / inset / hover     */

  --color-black:        #000000;   /* primary text, primary button          */
  --color-gray-700:     #666666;   /* secondary text                        */
  --color-gray-500:     #8F8F8F;   /* muted text, placeholders, captions    */
  --color-hairline:     #E5E7EB;   /* borders, dividers, rules              */

  /* ---- Palette: accent (blue — used sparingly) ---------------------------- */
  --color-accent:       #1E60E4;   /* links, active, focus, highlight        */
  --color-accent-tint:  #EAF1FE;   /* pale blue wash behind accent elements  */
  --color-accent-deep:  #2E4780;   /* readable text on accent tint           */

  /* ---- Imagery palette (colorful gradients — OpenAI-style hero/tiles) -----
     UI stays monochrome + one blue accent; THESE hues are used ONLY for the
     hero mesh and media tiles — never for text, links, or controls.        */
  --grad-violet: #7c7fff;
  --grad-indigo: #3b4fd6;
  --grad-blue:   #1E60E4;
  --grad-sky:    #79c8ff;
  --grad-teal:   #7fe0d4;
  --grad-lilac:  #a896ff;
  --grad-warm-1: #ffd5a8;
  --grad-warm-2: #ff7a59;
  --hero-base:   #FFFFFF;          /* light-first hero wash                  */

  /* ---- Semantic color roles ---------------------------------------------- */
  --bg:                 var(--color-white);
  --bg-subtle:          var(--color-surface);
  --bg-inset:           var(--color-surface-2);
  --bg-elevated:        var(--color-white);

  --fg:                 var(--color-black);
  --fg-secondary:       var(--color-gray-700);
  --fg-muted:           var(--color-gray-500);
  --fg-on-dark:         var(--color-white);

  --border:             var(--color-hairline);
  --border-strong:      #D4D4D4;

  --link:               var(--color-accent);
  --focus-ring:         var(--color-accent);

  /* ---- Type families ----------------------------------------------------- */
  --font-sans: "Geist", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --font-mono: "Geist Mono", "SF Mono", ui-monospace, "Roboto Mono", Menlo, monospace;

  /* ---- Type scale (px) ---------------------------------------------------
     Display & headings: weight 500, tight negative tracking.
     Body: 17px / 1.65 / -0.01em / 400.                                     */
  --text-display:  112px;  --lh-display:  0.98;  --ls-display:  -0.03em;
  --text-h1:        76px;  --lh-h1:       1.04;  --ls-h1:       -0.03em;
  --text-h2:        50px;  --lh-h2:       1.08;  --ls-h2:       -0.025em;
  --text-h3:        34px;  --lh-h3:       1.15;  --ls-h3:       -0.02em;
  --text-h4:        24px;  --lh-h4:       1.2;   --ls-h4:       -0.02em;
  --text-lead:      22px;  --lh-lead:     1.62;  --ls-lead:     -0.01em;
  --text-body:      18px;  --lh-body:     1.72;  --ls-body:     -0.01em;
  --text-sm:        16px;  --lh-sm:       1.5;   --ls-sm:       -0.005em;
  --text-caption:   13px;  --lh-caption:  1.4;   --ls-caption:  0;
  --text-mono:      14px;  --lh-mono:     1.55;  --ls-mono:     0;
  --text-overline:  12px;  --lh-overline: 1.3;   --ls-overline: 0.08em;

  /* ---- Weights ----------------------------------------------------------- */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;

  /* ---- Spacing scale (4px base) ------------------------------------------ */
  --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;

  /* ---- Radii — large, soft for media/cards; pill for buttons ------------- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 999px;

  /* ---- Elevation — restrained. Mostly hairlines, rarely shadow ----------- */
  --shadow-none: none;
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.06);
  --shadow-lg:   0 12px 40px rgba(0,0,0,0.08);

  /* ---- Layout ------------------------------------------------------------ */
  --max-content: 1280px;
  --header-height: 54px;

  /* ---- Motion — quick, soft, no bounce ----------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}

/* ============================================================================
   SEMANTIC ELEMENT STYLES
   Apply via utility classes (.h1, .lead, .mono…) or scoped to a .em-prose root.
   ============================================================================ */

.em-display, .em-h1, .em-h2, .em-h3, .em-h4 {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}

.em-display { font-size: var(--text-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.em-h1      { font-size: var(--text-h1);      line-height: var(--lh-h1);      letter-spacing: var(--ls-h1); }
.em-h2      { font-size: var(--text-h2);      line-height: var(--lh-h2);      letter-spacing: var(--ls-h2); }
.em-h3      { font-size: var(--text-h3);      line-height: var(--lh-h3);      letter-spacing: var(--ls-h3); }
.em-h4      { font-size: var(--text-h4);      line-height: var(--lh-h4);      letter-spacing: var(--ls-h4); }

.em-lead {
  font-family: var(--font-sans);
  font-size: var(--text-lead); line-height: var(--lh-lead); letter-spacing: var(--ls-lead);
  font-weight: var(--weight-regular); color: var(--fg-secondary); margin: 0;
}
.em-body {
  font-family: var(--font-sans);
  font-size: var(--text-body); line-height: var(--lh-body); letter-spacing: var(--ls-body);
  font-weight: var(--weight-regular); color: var(--fg); margin: 0;
  text-wrap: pretty;
}
.em-sm {
  font-family: var(--font-sans);
  font-size: var(--text-sm); line-height: var(--lh-sm); letter-spacing: var(--ls-sm);
  font-weight: var(--weight-regular); color: var(--fg-secondary); margin: 0;
}
.em-caption {
  font-family: var(--font-sans);
  font-size: var(--text-caption); line-height: var(--lh-caption); letter-spacing: var(--ls-caption);
  color: var(--fg-muted); margin: 0;
}
.em-overline {
  font-family: var(--font-sans);
  font-size: var(--text-overline); line-height: var(--lh-overline); letter-spacing: var(--ls-overline);
  font-weight: var(--weight-medium); text-transform: uppercase; color: var(--fg-muted); margin: 0;
}
.em-mono {
  font-family: var(--font-mono);
  font-size: var(--text-mono); line-height: var(--lh-mono); letter-spacing: var(--ls-mono);
  font-weight: var(--weight-regular); color: var(--fg); margin: 0;
}

.em-link {
  color: var(--link);
  text-decoration: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.em-link:hover { opacity: 0.7; }

/* ----- Optional: scope element styles to a prose container ----- */
.em-prose { font-family: var(--font-sans); font-size: var(--text-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); color: var(--fg); }
.em-prose h1 { font: var(--weight-medium) var(--text-h1)/var(--lh-h1) var(--font-sans); letter-spacing: var(--ls-h1); margin: 0 0 var(--space-5); }
.em-prose h2 { font: var(--weight-medium) var(--text-h2)/var(--lh-h2) var(--font-sans); letter-spacing: var(--ls-h2); margin: var(--space-8) 0 var(--space-4); }
.em-prose h3 { font: var(--weight-medium) var(--text-h3)/var(--lh-h3) var(--font-sans); letter-spacing: var(--ls-h3); margin: var(--space-7) 0 var(--space-3); }
.em-prose p  { margin: 0 0 var(--space-5); }
.em-prose a  { color: var(--link); text-decoration: none; }
.em-prose a:hover { opacity: 0.7; }
.em-prose code { font-family: var(--font-mono); font-size: 0.92em; background: var(--bg-inset); padding: 0.1em 0.4em; border-radius: var(--radius-sm); }