/* =============================================================
   MemoryStore Design System — Tokens
   Colors, type, spacing, radii, shadows, motion.
   Import this file first. All other styles depend on these vars.
   ============================================================= */

/* Google Fonts — substitutes until brand fonts are provided ---- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

/* Material Symbols — canonical icon set for the brand ---------- */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,300..700,0..1,-25..200');

:root {
  /* ---------- COLOR: Neutrals / Ink ---------- */
  --ink-1000: #0B0A0C;
  --ink-900:  #141317;
  --ink-800:  #1E1C22;
  --ink-700:  #2A2830;
  --ink-600:  #3C3944;
  --ink-500:  #6B6775;
  --ink-400:  #8A8592;
  --ink-300:  #B6B1BC;
  --ink-200:  #D4CFD8;
  --ink-100:  #EDEAE2;
  --paper:    #F6F2E9;
  --paper-deep: #EEE8DA;
  --white:    #FFFFFF;

  /* ---------- COLOR: Memory (primary) — cyan ---------- */
  --memory-900: #003A42;
  --memory-700: #006D7A;
  --memory-600: #0093A8;
  --memory-500: #00B8CE;   /* primary CTA / pills */
  --memory-400: #1ECBDE;   /* bright accent / wordmark */
  --memory-300: #59DCEB;
  --memory-200: #9DE9F2;
  --memory-100: #CDF3F8;
  --memory-50:  #E7FAFC;

  /* ---------- COLOR: Ember (secondary warmth) ---------- */
  --ember-700: #8F4E0E;
  --ember-600: #C8761A;
  --ember-500: #E0902A;
  --ember-400: #F0A93B;
  --ember-300: #F5C473;
  --ember-200: #FBDCA6;
  --ember-100: #FDEDD1;

  /* ---------- COLOR: Graph nodes ---------- */
  --node-a: #5B4BE1;   /* memory */
  --node-b: #F0A93B;   /* ember */
  --node-c: #3FB6A8;   /* teal connections */
  --node-d: #E85D75;   /* coral "you" */
  --node-e: #8A8592;   /* neutral / orphan */
  --edge:   rgba(91, 75, 225, 0.30);

  /* ---------- COLOR: Silver (logo only) ---------- */
  --silver-hi:  #F3F3F5;
  --silver-mid: #B9BAC0;
  --silver-lo:  #6E7078;

  /* ---------- COLOR: Semantic ---------- */
  --success: #2EA87E;
  --warn:    #E89A2B;
  --danger:  #D8465F;
  --info:    var(--memory-500);

  /* ---------- Semantic surfaces — DARK (default app) ---------- */
  --bg:         #000000;
  --bg-raised:  #0F1416;
  --bg-hover:   #1A1F22;
  --bg-active:  #242A2D;
  --fg:         #F5F2EA;
  --fg-muted:   var(--ink-300);
  --fg-dim:     var(--ink-500);
  --fg-inverse: var(--ink-1000);
  --border:     rgba(255,255,255,0.06);
  --border-strong: rgba(255,255,255,0.12);
  --accent:     var(--memory-500);
  --accent-fg:  #FFFFFF;

  /* ---------- Typography families ---------- */
  --ff-display: 'Fraunces', 'Tiempos Headline', Georgia, serif;
  --ff-sans:    'Geist', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-mono:    'Geist Mono', 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* ---------- Type scale (px) ---------- */
  --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px;
  --fs-16: 16px; --fs-18: 18px; --fs-20: 20px; --fs-24: 24px;
  --fs-30: 30px; --fs-38: 38px; --fs-48: 48px; --fs-60: 60px; --fs-76: 76px;

  /* ---------- Line heights ---------- */
  --lh-display: 1.05;
  --lh-heading: 1.15;
  --lh-body:    1.55;
  --lh-tight:   1.25;

  /* ---------- Weights ---------- */
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* ---------- Letter spacing ---------- */
  --tr-display: -0.025em;
  --tr-tight:   -0.01em;
  --tr-normal:  0;
  --tr-eyebrow: 0.12em;

  /* ---------- Spacing scale ---------- */
  --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-14: 56px;
  --sp-20: 80px;
  --sp-30: 120px;

  /* ---------- Radii ---------- */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-1: 0 1px 2px rgba(11,10,12,.06), 0 2px 8px rgba(11,10,12,.04);
  --shadow-2: 0 4px 12px rgba(11,10,12,.08), 0 16px 40px rgba(11,10,12,.10);
  --shadow-1-dark: 0 1px 2px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.20);
  --shadow-2-dark: 0 4px 12px rgba(0,0,0,.35), 0 16px 40px rgba(0,0,0,.45);

  /* ---------- Motion ---------- */
  --ease:         cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in:      cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-emph:    cubic-bezier(0.16, 1, 0.3, 1);
  --dur-tap:      120ms;
  --dur-state:    200ms;
  --dur-layout:   400ms;
  --dur-hero:     800ms;

  /* ---------- Layout ---------- */
  --container:  1240px;
  --reading:    720px;
  --nav-h:      64px;
  --tabbar-h:   72px;
}

/* ---------- Light theme surface swap ---------- */
[data-theme="light"] {
  --bg:         var(--paper);
  --bg-raised:  #FFFFFF;
  --bg-hover:   var(--paper-deep);
  --bg-active:  #E6E0D0;
  --fg:         var(--ink-1000);
  --fg-muted:   var(--ink-600);
  --fg-dim:     var(--ink-500);
  --fg-inverse: #FFFFFF;
  --border:     #E4DFD3;
  --border-strong: #CFC8B6;
}

/* =============================================================
   Semantic type classes
   ============================================================= */

body {
  font-family: var(--ff-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ms-display-xl,
h1.ms-hero {
  font-family: var(--ff-display);
  font-weight: var(--fw-regular);
  font-size: clamp(48px, 7vw, var(--fs-76));
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  text-wrap: balance;
}

.ms-display-lg { font-family: var(--ff-display); font-weight: 400; font-size: var(--fs-60); line-height: var(--lh-display); letter-spacing: var(--tr-display); }
.ms-display    { font-family: var(--ff-display); font-weight: 400; font-size: var(--fs-48); line-height: var(--lh-heading); letter-spacing: var(--tr-display); }

.ms-h1 { font-family: var(--ff-sans); font-weight: var(--fw-semi); font-size: var(--fs-38); line-height: var(--lh-heading); letter-spacing: var(--tr-tight); }
.ms-h2 { font-family: var(--ff-sans); font-weight: var(--fw-semi); font-size: var(--fs-30); line-height: var(--lh-heading); letter-spacing: var(--tr-tight); }
.ms-h3 { font-family: var(--ff-sans); font-weight: var(--fw-semi); font-size: var(--fs-24); line-height: var(--lh-heading); letter-spacing: var(--tr-tight); }
.ms-h4 { font-family: var(--ff-sans); font-weight: var(--fw-medium); font-size: var(--fs-20); line-height: var(--lh-tight); }

.ms-body-lg { font-size: var(--fs-18); line-height: var(--lh-body); }
.ms-body    { font-size: var(--fs-16); line-height: var(--lh-body); }
.ms-body-sm { font-size: var(--fs-14); line-height: var(--lh-body); }

.ms-caption { font-size: var(--fs-13); line-height: var(--lh-tight); color: var(--fg-muted); }
.ms-micro   { font-size: var(--fs-11); line-height: 1.2;  color: var(--fg-dim); }

.ms-eyebrow {
  font-family: var(--ff-sans);
  font-weight: var(--fw-semi);
  font-size: var(--fs-12);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--memory-400);
}

.ms-mono { font-family: var(--ff-mono); font-size: var(--fs-13); }

/* Pull-quote / editorial */
.ms-pullquote {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: var(--fs-38);
  line-height: 1.25;
  letter-spacing: var(--tr-tight);
  color: var(--fg);
}

/* =============================================================
   Utility primitives
   ============================================================= */

.ms-card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
}

.ms-btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  height: 44px; padding: 0 var(--sp-5);
  border-radius: var(--r-pill);
  font-family: var(--ff-sans); font-weight: var(--fw-medium); font-size: var(--fs-15, 15px);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-tap) var(--ease), background var(--dur-state) var(--ease), border-color var(--dur-state) var(--ease);
}
.ms-btn:active { transform: scale(0.985); }

.ms-btn--primary {
  background: var(--memory-500); color: #fff;
}
.ms-btn--primary:hover { background: var(--memory-400); }

.ms-btn--secondary {
  background: transparent; color: var(--fg);
  border-color: var(--border-strong);
}
.ms-btn--secondary:hover { background: var(--bg-hover); }

.ms-btn--ghost {
  background: transparent; color: var(--fg-muted);
}
.ms-btn--ghost:hover { color: var(--fg); background: var(--bg-hover); }

.ms-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px;
  border-radius: var(--r-pill);
  background: var(--memory-50); color: var(--memory-700);
  font-size: var(--fs-12); font-weight: var(--fw-medium);
  border: 1px solid var(--memory-100);
}
[data-theme="dark"] .ms-chip,
.dark .ms-chip {
  background: rgba(91, 75, 225, 0.18); color: var(--memory-200); border-color: rgba(91, 75, 225, 0.30);
}

.ms-input {
  width: 100%;
  height: 44px; padding: 0 var(--sp-4);
  background: var(--bg-raised); color: var(--fg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  font-family: var(--ff-sans); font-size: var(--fs-14);
  transition: border-color var(--dur-state) var(--ease), box-shadow var(--dur-state) var(--ease);
}
.ms-input:focus { outline: none; border-color: var(--memory-400); box-shadow: 0 0 0 3px rgba(91,75,225,0.20); }

/* Material Symbols base */
.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'opsz' 24, 'wght' 400, 'FILL' 0, 'GRAD' 0;
}
.material-symbols-rounded.filled { font-variation-settings: 'opsz' 24, 'wght' 500, 'FILL' 1, 'GRAD' 0; }