/* =========================================================================
   SENOVA — INK & IVORY  (senova-ui.css)
   The single canonical design system. SP-01 of the 2026 redesign.

   A warm-ivory ground, near-black ink, one ember accent, an editorial serif
   over a flat grotesk, hairline-bordered cards, pill buttons, and calm ~180ms
   motion. Built to read as a sibling of anthropic.com / platform.claude.com —
   not a clone, our own ember and our own serif.

   Load this ONCE per page, first. Everything below the token block is built on
   the tokens, so a page can adopt the whole language with a single <link>.
   ========================================================================= */

/* ----------------------------------------------------------------------- *
 * 1. TOKENS — light theme (default: landing, docs, console)
 * ----------------------------------------------------------------------- */
:root {
  /* Ground & surfaces — layered ivories, never grey scales */
  --sn-bg:          #FAF9F5;   /* page ground (ivory) */
  --sn-bg-raised:   #F0EEE6;   /* raised panels, code chrome, hover fills */
  --sn-surface:     #FFFFFF;   /* cards, inputs, tables */

  /* Ink */
  --sn-ink:         #141413;   /* primary text, primary buttons */
  --sn-ink-2:       #5E5D59;   /* secondary text */
  --sn-ink-3:       #8A8984;   /* metadata, placeholders */

  /* Hairline — 1px borders everywhere */
  --sn-hairline:    #E5E3DA;

  /* Ember — our accent. Used ~once per screen. */
  --sn-accent:      #C15F3C;
  --sn-accent-ink:  #A54E2F;   /* accent text on ivory (AA) / hover */
  --sn-accent-soft: #F4E5DD;   /* tints, selected states */

  /* Status — muted, never neon */
  --sn-success:     #4C7C59;
  --sn-warn:        #B9862F;
  --sn-error:       #B3402E;

  /* Typography */
  --sn-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sn-sans:  "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sn-mono:  "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Type scale (fluid) */
  --sn-display-1: clamp(2.75rem, 1.9rem + 3.6vw, 5.25rem);  /* 44 → 84 */
  --sn-display-2: clamp(2.125rem, 1.6rem + 2.2vw, 3.5rem);  /* 34 → 56 */
  --sn-h3: 1.75rem;   /* 28 */
  --sn-h4: 1.25rem;   /* 20 */
  --sn-body-lg: 1.125rem; /* 18 */
  --sn-body: 1rem;    /* 16 */
  --sn-ui: 0.875rem;  /* 14 */
  --sn-meta: 0.8125rem; /* 13 */
  --sn-overline: 0.75rem; /* 12 */

  /* Spacing (8px base) */
  --sn-1: 4px;  --sn-2: 8px;  --sn-3: 12px; --sn-4: 16px;
  --sn-5: 24px; --sn-6: 32px; --sn-7: 48px; --sn-8: 64px;
  --sn-9: 96px; --sn-10: 128px;

  /* Shape */
  --sn-r-pill: 999px;
  --sn-r-card: 12px;
  --sn-r-input: 8px;
  --sn-r-media: 16px;

  /* Elevation — hairlines almost everywhere; one ambient shadow reserved
     for genuinely floating elements (modals, the prompt card). */
  --sn-shadow: 0 1px 2px rgba(20,19,19,.04), 0 8px 24px rgba(20,19,19,.06);
  --sn-shadow-lg: 0 2px 4px rgba(20,19,19,.05), 0 18px 48px rgba(20,19,19,.10);

  /* Motion */
  --sn-ease: cubic-bezier(.2,.6,.2,1);
  --sn-micro: 180ms;
  --sn-panel: 320ms;

  /* Layout */
  --sn-maxw: 1200px;
  --sn-focus: 0 0 0 2px var(--sn-bg), 0 0 0 4px var(--sn-accent);
}

/* Dark "Studio" theme — warm brown-black, not blue-black. One brand. */
[data-theme="studio"], [data-theme="dark"] {
  --sn-bg:          #121110;
  --sn-bg-raised:   #1C1B19;
  --sn-surface:     #232220;
  --sn-ink:         #F5F4EF;
  --sn-ink-2:       #B7B4AC;
  --sn-ink-3:       #86837C;
  --sn-hairline:    #2E2C29;
  --sn-accent:      #D97757;
  --sn-accent-ink:  #E68A6C;
  --sn-accent-soft: #33241D;
  /* Status on dark. The light values are unreadable here: #B3402E on #232220 is
     2.79:1 and fails AA for text. These lift error to 4.73:1 and success to
     5.30:1 on the darkest surface. --sn-warn already passes at 4.93:1 and is
     deliberately unchanged. Measured against #232220 / #1C1B19 / #121110. */
  --sn-error:       #DB6B54;
  --sn-success:     #6FA07D;
  --sn-shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.4);
  --sn-shadow-lg: 0 2px 4px rgba(0,0,0,.4), 0 18px 48px rgba(0,0,0,.55);
  --sn-focus: 0 0 0 2px var(--sn-bg), 0 0 0 4px var(--sn-accent);
}

/* ----------------------------------------------------------------------- *
 * 2. RESET & BASE
 * ----------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--sn-bg);
  color: var(--sn-ink);
  font-family: var(--sn-sans);
  font-size: var(--sn-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
:focus-visible { outline: none; box-shadow: var(--sn-focus); border-radius: 4px; }
::selection { background: var(--sn-accent-soft); color: var(--sn-ink); }
hr { border: 0; border-top: 1px solid var(--sn-hairline); margin: var(--sn-6) 0; }

/* ----------------------------------------------------------------------- *
 * 3. TYPOGRAPHY
 * ----------------------------------------------------------------------- */
.sn-display-1, .sn-display-2, .sn-h1, .sn-h2 {
  font-family: var(--sn-serif);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.04;
  color: var(--sn-ink);
  margin: 0;
}
.sn-display-1, .sn-h1 { font-size: var(--sn-display-1); }
.sn-display-2, .sn-h2 { font-size: var(--sn-display-2); line-height: 1.08; }
.sn-display-1 em, .sn-display-2 em, .sn-h1 em, .sn-h2 em {
  font-style: italic; font-weight: 600;
}
.sn-h3 { font-family: var(--sn-sans); font-weight: 600; font-size: var(--sn-h3); line-height: 1.2; letter-spacing: -0.01em; margin: 0; }
.sn-h4 { font-family: var(--sn-sans); font-weight: 600; font-size: var(--sn-h4); line-height: 1.35; margin: 0; }
.sn-lead { font-size: var(--sn-body-lg); line-height: 1.6; color: var(--sn-ink-2); margin: 0; max-width: 62ch; }
.sn-body { font-size: var(--sn-body); color: var(--sn-ink-2); }
.sn-mono { font-family: var(--sn-mono); font-feature-settings: "tnum" 1; }
.sn-overline {
  font-family: var(--sn-sans);
  font-size: var(--sn-overline);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sn-ink-3);
}
.sn-accent-text { color: var(--sn-accent-ink); }
.sn-link { color: var(--sn-ink); border-bottom: 1px solid var(--sn-hairline); transition: border-color var(--sn-micro) var(--sn-ease); }
.sn-link:hover { border-color: var(--sn-ink); }
.sn-link-accent { color: var(--sn-accent-ink); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; transition: gap var(--sn-micro) var(--sn-ease); }
.sn-link-accent:hover { gap: 10px; }

/* ----------------------------------------------------------------------- *
 * 4. LAYOUT
 * ----------------------------------------------------------------------- */
.sn-container { width: 100%; max-width: var(--sn-maxw); margin-inline: auto; padding-inline: var(--sn-5); }
.sn-section { padding-block: clamp(var(--sn-8), 6vw, 112px); }
.sn-section-tight { padding-block: var(--sn-8); }
.sn-eyebrow-row { display: flex; align-items: center; gap: var(--sn-3); margin-bottom: var(--sn-4); }
.sn-stack > * + * { margin-top: var(--sn-4); }

/* ----------------------------------------------------------------------- *
 * 5. BUTTONS
 * ----------------------------------------------------------------------- */
.sn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sn-2);
  font-family: var(--sn-sans); font-size: var(--sn-ui); font-weight: 500;
  padding: 10px 18px; border-radius: var(--sn-r-pill);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background var(--sn-micro) var(--sn-ease),
              color var(--sn-micro) var(--sn-ease),
              border-color var(--sn-micro) var(--sn-ease),
              transform var(--sn-micro) var(--sn-ease);
}
.sn-btn:active { transform: translateY(1px); }
.sn-btn-primary { background: var(--sn-ink); color: var(--sn-bg); }
.sn-btn-primary:hover { background: #000; }
.sn-btn-secondary { background: transparent; color: var(--sn-ink); border-color: var(--sn-hairline); }
.sn-btn-secondary:hover { border-color: var(--sn-ink); background: var(--sn-bg-raised); }
.sn-btn-accent { background: var(--sn-accent); color: #fff; }
.sn-btn-accent:hover { background: var(--sn-accent-ink); }
.sn-btn-ghost { background: transparent; color: var(--sn-ink-2); }
.sn-btn-ghost:hover { color: var(--sn-ink); background: var(--sn-bg-raised); }
.sn-btn-lg { padding: 13px 24px; font-size: var(--sn-body); }
.sn-btn-sm { padding: 7px 14px; font-size: var(--sn-meta); }

/* ----------------------------------------------------------------------- *
 * 6. CARD + METADATA ROW  (Anthropic release-card anatomy)
 * ----------------------------------------------------------------------- */
.sn-card {
  background: var(--sn-surface);
  border: 1px solid var(--sn-hairline);
  border-radius: var(--sn-r-card);
  padding: var(--sn-5);
  transition: border-color var(--sn-micro) var(--sn-ease), transform var(--sn-micro) var(--sn-ease);
}
.sn-card-hover:hover { border-color: var(--sn-ink-3); transform: translateY(-2px); }
.sn-meta-row { display: flex; align-items: center; gap: var(--sn-2); font-size: var(--sn-overline); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: var(--sn-ink-3); }
.sn-meta-row .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--sn-ink-3); }

/* ----------------------------------------------------------------------- *
 * 7. INPUTS + PROMPT CARD
 * ----------------------------------------------------------------------- */
.sn-input, .sn-textarea, .sn-select {
  width: 100%; font-family: var(--sn-sans); font-size: var(--sn-body);
  color: var(--sn-ink); background: var(--sn-surface);
  border: 1px solid var(--sn-hairline); border-radius: var(--sn-r-input);
  padding: 11px 14px; transition: border-color var(--sn-micro) var(--sn-ease);
}
.sn-input::placeholder, .sn-textarea::placeholder { color: var(--sn-ink-3); }
.sn-input:focus, .sn-textarea:focus, .sn-select:focus { border-color: var(--sn-ink); outline: none; box-shadow: none; }
.sn-textarea { resize: vertical; min-height: 96px; line-height: 1.6; }

.sn-prompt-card {
  display: flex; align-items: flex-end; gap: var(--sn-3);
  background: var(--sn-surface); border: 1px solid var(--sn-hairline);
  border-radius: var(--sn-r-media); padding: var(--sn-3) var(--sn-3) var(--sn-3) var(--sn-5);
  box-shadow: var(--sn-shadow);
}
.sn-prompt-card textarea {
  flex: 1; border: 0; background: transparent; resize: none; font-family: var(--sn-sans);
  font-size: var(--sn-body-lg); line-height: 1.5; color: var(--sn-ink); padding: 10px 0; min-height: 28px;
}
.sn-prompt-card textarea:focus { outline: none; }
.sn-prompt-send {
  flex: none; width: 44px; height: 44px; border-radius: var(--sn-r-pill);
  background: var(--sn-accent); color: #fff; border: 0; cursor: pointer;
  display: grid; place-items: center; transition: background var(--sn-micro) var(--sn-ease);
}
.sn-prompt-send:hover { background: var(--sn-accent-ink); }

/* ----------------------------------------------------------------------- *
 * 8. BADGE / CHIP
 * ----------------------------------------------------------------------- */
.sn-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--sn-overline); font-weight: 600; letter-spacing: 0.02em;
  padding: 3px 9px; border-radius: var(--sn-r-pill);
  background: var(--sn-bg-raised); color: var(--sn-ink-2); border: 1px solid var(--sn-hairline);
}
.sn-badge-accent { background: var(--sn-accent-soft); color: var(--sn-accent-ink); border-color: transparent; }
.sn-badge-new { background: var(--sn-accent); color: #fff; border-color: transparent; text-transform: uppercase; }
.sn-badge-success { color: var(--sn-success); }
.sn-badge-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ----------------------------------------------------------------------- *
 * 9. TABLE
 * ----------------------------------------------------------------------- */
.sn-table { width: 100%; border-collapse: collapse; font-size: var(--sn-ui); }
.sn-table th { text-align: left; font-weight: 600; color: var(--sn-ink-3); font-size: var(--sn-overline); text-transform: uppercase; letter-spacing: 0.06em; padding: 10px 12px; border-bottom: 1px solid var(--sn-hairline); }
.sn-table td { padding: 12px; border-bottom: 1px solid var(--sn-hairline); color: var(--sn-ink-2); }
.sn-table td.num, .sn-table th.num { text-align: right; font-family: var(--sn-mono); font-feature-settings: "tnum" 1; }
.sn-table tr:last-child td { border-bottom: 0; }

/* ----------------------------------------------------------------------- *
 * 10. USAGE METER  (thin bar, ink fill, accent when hot)
 * ----------------------------------------------------------------------- */
.sn-meter { height: 6px; border-radius: var(--sn-r-pill); background: var(--sn-bg-raised); overflow: hidden; }
.sn-meter > i { display: block; height: 100%; background: var(--sn-ink); border-radius: inherit; transition: width var(--sn-panel) var(--sn-ease); }
.sn-meter.hot > i { background: var(--sn-accent); }

/* ----------------------------------------------------------------------- *
 * 11. CODE BLOCK
 * ----------------------------------------------------------------------- */
.sn-code { background: var(--sn-bg-raised); border: 1px solid var(--sn-hairline); border-radius: var(--sn-r-card); overflow: hidden; }
.sn-code-bar { display: flex; align-items: center; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--sn-hairline); }
.sn-code-tab { font-size: var(--sn-meta); font-family: var(--sn-mono); color: var(--sn-ink-3); padding: 5px 12px; border-radius: 6px; cursor: pointer; background: transparent; border: 0; }
.sn-code-tab.on { color: var(--sn-ink); background: var(--sn-surface); }
.sn-code pre { margin: 0; padding: var(--sn-4) var(--sn-5); overflow-x: auto; font-family: var(--sn-mono); font-size: var(--sn-meta); line-height: 1.7; color: var(--sn-ink); }

/* ----------------------------------------------------------------------- *
 * 12. KEYBOARD HINT
 * ----------------------------------------------------------------------- */
.sn-kbd { font-family: var(--sn-mono); font-size: 11px; color: var(--sn-ink-3); background: var(--sn-surface); border: 1px solid var(--sn-hairline); border-radius: 5px; padding: 2px 6px; }

/* ----------------------------------------------------------------------- *
 * 13. EMPTY STATE
 * ----------------------------------------------------------------------- */
.sn-empty { text-align: center; padding: var(--sn-8) var(--sn-5); }
.sn-empty h3 { font-family: var(--sn-serif); font-weight: 600; font-size: var(--sn-h3); color: var(--sn-ink); margin: 0 0 var(--sn-3); }
.sn-empty p { color: var(--sn-ink-2); margin: 0 0 var(--sn-5); }

/* ----------------------------------------------------------------------- *
 * 14. MARKETING HEADER / FOOTER SHELL
 * ----------------------------------------------------------------------- */
.sn-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--sn-bg) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid transparent; transition: border-color var(--sn-micro) var(--sn-ease); }
.sn-header.scrolled { border-bottom-color: var(--sn-hairline); }
.sn-header-inner { display: flex; align-items: center; gap: var(--sn-5); height: 64px; max-width: var(--sn-maxw); margin-inline: auto; padding-inline: var(--sn-5); }
.sn-brand { font-family: var(--sn-serif); font-weight: 600; font-size: 1.35rem; letter-spacing: -0.02em; color: var(--sn-ink); display: inline-flex; align-items: center; gap: 9px; }
.sn-brand-glyph { width: 20px; height: 20px; }
.sn-nav-links { display: flex; align-items: center; gap: var(--sn-5); margin-left: var(--sn-4); }
.sn-nav-links a { font-size: var(--sn-ui); color: var(--sn-ink-2); transition: color var(--sn-micro) var(--sn-ease); }
.sn-nav-links a:hover { color: var(--sn-ink); }
.sn-header-cta { display: flex; align-items: center; gap: var(--sn-3); margin-left: auto; }

.sn-footer { border-top: 1px solid var(--sn-hairline); padding-block: var(--sn-8) var(--sn-6); }
.sn-footer-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sn-5); }
.sn-footer h5 { font-size: var(--sn-overline); text-transform: uppercase; letter-spacing: 0.08em; color: var(--sn-ink-3); margin: 0 0 var(--sn-4); }
.sn-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sn-footer a { font-size: var(--sn-ui); color: var(--sn-ink-2); }
.sn-footer a:hover { color: var(--sn-ink); }
.sn-footer-strip { display: flex; align-items: center; justify-content: space-between; gap: var(--sn-4); margin-top: var(--sn-8); padding-top: var(--sn-5); border-top: 1px solid var(--sn-hairline); font-size: var(--sn-meta); color: var(--sn-ink-3); }

/* ----------------------------------------------------------------------- *
 * 15. MEDIA TILE
 * ----------------------------------------------------------------------- */
.sn-media-tile { margin: 0; border-radius: var(--sn-r-card); overflow: hidden; border: 1px solid var(--sn-hairline); background: var(--sn-surface); position: relative; }
.sn-media-tile img, .sn-media-tile video { width: 100%; height: auto; display: block; }
.sn-media-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; font-size: var(--sn-overline); color: var(--sn-ink-3); font-family: var(--sn-mono); }

/* ----------------------------------------------------------------------- *
 * 16. MOTION / SCROLL REVEAL
 * ----------------------------------------------------------------------- */
.sn-reveal { opacity: 0; transform: translateY(8px); transition: opacity var(--sn-panel) var(--sn-ease), transform var(--sn-panel) var(--sn-ease); }
.sn-reveal.in { opacity: 1; transform: none; }
.sn-reveal[data-d="1"] { transition-delay: 60ms; }
.sn-reveal[data-d="2"] { transition-delay: 120ms; }
.sn-reveal[data-d="3"] { transition-delay: 180ms; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .sn-reveal { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------------------- *
 * 17. UTILITIES
 * ----------------------------------------------------------------------- */
.sn-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.sn-hairline { border: 1px solid var(--sn-hairline); }
.sn-muted { color: var(--sn-ink-2); }
.sn-faint { color: var(--sn-ink-3); }
.sn-center { text-align: center; }
.sn-grid { display: grid; gap: var(--sn-5); }
.sn-flex { display: flex; gap: var(--sn-3); align-items: center; }

@media (max-width: 860px) {
  .sn-nav-links { display: none; }
  .sn-footer-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sn-6) var(--sn-4); }
}