/* ──────────────────────────────────────────────────────────────
   15ELEMENT.AI — Colors & Type
   ────────────────────────────────────────────────────────────── */

/* Fonts ── Saira Condensed for display (matches the wordmark feel),
   IBM Plex Sans for body, IBM Plex Mono for code/data. All three live
   on Google Fonts. */
@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@400;500;600;700;800;900&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ── Brand colors (extracted from logo) ───────────────────── */
  --brand-navy:        #2A2E46;   /* primary background / ink   */
  --brand-navy-deep:   #1F2236;   /* deeper shade for elevation */
  --brand-navy-soft:   #353A56;   /* one step up from navy      */

  --brand-green:       #7EB749;   /* element 1 — top stroke     */
  --brand-red:         #BD2429;   /* element 2 — left stroke    */
  --brand-teal:        #209499;   /* element 3 — tongue / dot   */
  --brand-orange:      #ED9321;   /* element 4 — bottom curl    */

  /* Color steps for state / hover */
  --brand-green-600:   #6FA13E;
  --brand-green-400:   #97C766;
  --brand-red-600:     #A41F23;
  --brand-red-400:     #D44A4F;
  --brand-teal-600:    #1A7B80;
  --brand-teal-400:    #3FB2B7;
  --brand-orange-600:  #D17E15;
  --brand-orange-400:  #F2A647;

  /* ── Neutrals ─────────────────────────────────────────────── */
  --ink-0:   #FFFFFF;
  --ink-50:  #F6F7F9;
  --ink-100: #EBEDF1;
  --ink-200: #D8DBE3;
  --ink-300: #BDBEC0;   /* the wordmark "ELEMENT" gray         */
  --ink-400: #8C90A1;
  --ink-500: #5E6378;
  --ink-600: #404560;
  --ink-700: #2A2E46;   /* brand navy                          */
  --ink-800: #1F2236;
  --ink-900: #14162A;

  /* ── Semantic tokens — LIGHT mode (default) ───────────────── */
  --bg:           var(--ink-50);
  --bg-elevated:  var(--ink-0);
  --bg-sunken:    var(--ink-100);
  --bg-inverse:   var(--brand-navy);

  --fg:           var(--brand-navy);   /* primary text          */
  --fg-muted:     var(--ink-500);
  --fg-subtle:    var(--ink-400);
  --fg-inverse:   var(--ink-0);
  --fg-on-brand:  var(--ink-0);

  --border:        var(--ink-200);
  --border-strong: var(--ink-300);
  --border-focus:  var(--brand-teal);

  --accent:        var(--brand-teal);     /* primary action     */
  --accent-hover:  var(--brand-teal-600);
  --accent-fg:     var(--ink-0);

  --success: var(--brand-green-600);
  --danger:  var(--brand-red);
  --warning: var(--brand-orange);
  --info:    var(--brand-teal);

  /* ── Type families ────────────────────────────────────────── */
  --font-display: "Saira Condensed", "Oswald", "Bebas Neue", system-ui, sans-serif;
  --font-body:    "IBM Plex Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ── Type scale ───────────────────────────────────────────── */
  --fs-display-xl: clamp(56px, 7.5vw, 112px);
  --fs-display-lg: clamp(44px, 5.5vw, 80px);
  --fs-display-md: clamp(32px, 4vw, 56px);
  --fs-h1: 40px;
  --fs-h2: 30px;
  --fs-h3: 22px;
  --fs-h4: 18px;
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-body-sm: 14px;
  --fs-caption: 12px;
  --fs-eyebrow: 11px;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-loose:   1.65;

  --tracking-display: -0.02em;
  --tracking-eyebrow: 0.18em;
  --tracking-tight: -0.01em;
  --tracking-wide: 0.04em;

  /* ── Spacing scale (4px base) ─────────────────────────────── */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ── Radii ────────────────────────────────────────────────── */
  --r-none: 0;
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(20, 22, 42, 0.06);
  --shadow-sm: 0 2px 6px rgba(20, 22, 42, 0.08), 0 1px 2px rgba(20, 22, 42, 0.04);
  --shadow-md: 0 8px 24px rgba(20, 22, 42, 0.10), 0 2px 6px rgba(20, 22, 42, 0.05);
  --shadow-lg: 0 20px 48px rgba(20, 22, 42, 0.14), 0 4px 10px rgba(20, 22, 42, 0.06);
  --shadow-xl: 0 32px 80px rgba(20, 22, 42, 0.22);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --ring-focus: 0 0 0 3px rgba(32, 148, 153, 0.35);

  /* ── Motion ───────────────────────────────────────────────── */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* ── Brand signature gradient (use sparingly: accents only) ─ */
  --gradient-element:
    conic-gradient(from 220deg at 50% 50%,
      var(--brand-red) 0deg,
      var(--brand-orange) 90deg,
      var(--brand-green) 200deg,
      var(--brand-teal) 300deg,
      var(--brand-red) 360deg);

  --gradient-element-linear:
    linear-gradient(135deg,
      var(--brand-green) 0%,
      var(--brand-teal) 33%,
      var(--brand-red) 66%,
      var(--brand-orange) 100%);
}

/* ── Dark theme — flip semantic tokens, brand colors unchanged ─ */
:root[data-theme="dark"],
.theme-dark {
  --bg:           var(--brand-navy-deep);
  --bg-elevated:  var(--brand-navy);
  --bg-sunken:    #15172A;
  --bg-inverse:   var(--ink-0);

  --fg:           var(--ink-50);
  --fg-muted:     var(--ink-300);
  --fg-subtle:    var(--ink-400);
  --fg-inverse:   var(--brand-navy);

  --border:        rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.16);
}

/* ──────────────────────────────────────────────────────────────
   SEMANTIC ELEMENT STYLES
   ────────────────────────────────────────────────────────────── */
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
}

.display-xl, .display-lg, .display-md,
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-tight);
  color: var(--fg);
  text-transform: uppercase;
}
.display-xl { font-size: var(--fs-display-xl); font-weight: 800; }
.display-lg { font-size: var(--fs-display-lg); font-weight: 800; }
.display-md { font-size: var(--fs-display-md); font-weight: 700; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); text-transform: none; letter-spacing: var(--tracking-tight); }

h4 {
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}

p { font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--fg); }
.lead { font-size: var(--fs-body-lg); line-height: var(--lh-loose); color: var(--fg-muted); }
small, .caption { font-size: var(--fs-caption); color: var(--fg-muted); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}

code, kbd, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
code {
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  padding: 1px 6px;
  color: var(--brand-teal-600);
}

a {
  color: var(--brand-teal);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-standard);
}
a:hover { border-bottom-color: currentColor; }

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