/* ================================================================
   THE ARCHIVE — DESIGN SYSTEM v1.0
   A visual language for poets archiving and growing their craft
   ================================================================

   TABLE OF CONTENTS
   ─────────────────
   1.  Font Import
   2.  Primitive Tokens  (raw color scales)
   3.  Semantic Tokens   (contextual mappings)
   4.  Typography Tokens
   5.  Spacing Tokens
   6.  Border & Radius Tokens
   7.  Shadow / Elevation Tokens
   8.  Motion Tokens
   9.  Layout Tokens
   10. Base Reset
   11. Typography Styles
   12. Buttons
   13. Form Controls
   14. Cards & Surfaces
   15. Navigation & Sidebar
   16. Badges, Tags & Pills
   17. Poetry Display
   18. Stats & Data
   19. Empty States
   20. Utilities
   21. Dark Mode
   22. Responsive Breakpoints

================================================================ */


/* ----------------------------------------------------------------
   1. FONT IMPORT
   DM Sans   → clean humanist sans-serif for UI
   DM Serif Display → literary serif for poem display & headings
---------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=DM+Serif+Display:ital@0;1&display=swap');


/* ----------------------------------------------------------------
   2. PRIMITIVE TOKENS
   Raw color scales. Never use these directly in components —
   always reference a semantic token. These are the source of truth.
---------------------------------------------------------------- */

:root {

  /* Blue — primary brand family. Shifts from pale sky to deep ink. */
  --blue-50:   #eef3ff;
  --blue-100:  #dde8ff;
  --blue-200:  #c0d0fe;
  --blue-300:  #96b0fc;
  --blue-400:  #6686f8;
  --blue-500:  #4262f3;
  --blue-600:  #3047e0;   /* primary action — rich royal blue          */
  --blue-700:  #2538c4;   /* hover / pressed state                     */
  --blue-800:  #1f30a4;   /* deep, confident                           */
  --blue-900:  #1d2d85;   /* near-navy                                 */
  --blue-950:  #131c52;   /* deepest ink — brand anchor                */

  /* Slate — warm-neutral family for text & surfaces */
  --slate-50:  #f8f8fa;
  --slate-100: #f1f0f3;
  --slate-200: #e4e3e8;
  --slate-300: #ccc9d4;
  --slate-400: #9e9aab;
  --slate-500: #716d80;
  --slate-600: #555162;
  --slate-700: #3e3b4a;
  --slate-800: #2b2836;
  --slate-900: #1a1824;
  --slate-950: #0e0d12;

  /* Semantic accent colors */
  --green-50:  #f0fdf4;
  --green-100: #dcfce7;
  --green-200: #bbf7d0;
  --green-500: #22c55e;
  --green-600: #16a34a;
  --green-700: #15803d;
  --green-800: #166534;

  --amber-50:  #fffbeb;
  --amber-100: #fef3c7;
  --amber-200: #fde68a;
  --amber-500: #f59e0b;
  --amber-600: #d97706;
  --amber-700: #b45309;
  --amber-800: #92400e;

  --red-50:    #fef2f2;
  --red-100:   #fee2e2;
  --red-200:   #fecaca;
  --red-500:   #ef4444;
  --red-600:   #dc2626;
  --red-700:   #b91c1c;

  --violet-50:  #f5f3ff;
  --violet-100: #ede9fe;
  --violet-200: #ddd6fe;
  --violet-500: #8b5cf6;
  --violet-600: #7c3aed;
  --violet-800: #5b21b6;

  /* White / off-white */
  --white:     #ffffff;
  --off-white: #f6f5f8;   /* slightly warmer than pure white — like paper */
}


/* ----------------------------------------------------------------
   3. SEMANTIC TOKENS
   Contextual mappings from primitives → intent.
   These are the tokens to use in component styles.
---------------------------------------------------------------- */

:root {

  /* — Brand — */
  --color-brand:           var(--blue-600);
  --color-brand-hover:     var(--blue-700);
  --color-brand-pressed:   var(--blue-800);
  --color-brand-subtle:    var(--blue-50);
  --color-brand-muted:     var(--blue-100);
  --color-brand-border:    var(--blue-200);
  --color-brand-text:      var(--blue-700);
  --color-brand-ink:       var(--blue-950);   /* deep ink — brand icon, hero text */

  /* — Backgrounds — */
  --color-bg-page:         var(--off-white);  /* page / body background           */
  --color-bg-surface:      var(--white);      /* cards, panels, sidebar            */
  --color-bg-raised:       var(--white);      /* elevated cards                    */
  --color-bg-sunken:       var(--slate-50);   /* inputs, recessed wells            */
  --color-bg-overlay:      rgba(13, 11, 18, 0.48); /* modal backdrops             */
  --color-bg-highlight:    var(--blue-50);    /* selection, hover accent           */
  --color-bg-muted:        var(--slate-100);  /* subtle fills                      */

  /* — Text — */
  --color-text-primary:    var(--slate-900);  /* body text, headings               */
  --color-text-secondary:  var(--slate-600);  /* labels, meta, captions            */
  --color-text-tertiary:   var(--slate-400);  /* placeholder, hints, timestamps    */
  --color-text-disabled:   var(--slate-300);  /* non-interactive text              */
  --color-text-inverse:    var(--white);      /* text on dark backgrounds          */
  --color-text-brand:      var(--blue-700);   /* brand-colored text, links         */
  --color-text-link:       var(--blue-600);   /* hyperlinks                        */
  --color-text-link-hover: var(--blue-800);

  /* — Borders — */
  --color-border-default:  var(--slate-200);  /* standard border                   */
  --color-border-strong:   var(--slate-300);  /* emphasis border                   */
  --color-border-focus:    var(--blue-400);   /* keyboard / input focus ring       */
  --color-border-brand:    var(--blue-300);   /* brand-tinted border               */
  --color-border-subtle:   var(--slate-100);  /* hairline separators               */

  /* — Interactive / Buttons — */
  --color-interactive-primary:       var(--blue-600);
  --color-interactive-primary-hover: var(--blue-700);
  --color-interactive-primary-text:  var(--white);
  --color-interactive-secondary-bg:  var(--white);
  --color-interactive-secondary-border: var(--slate-200);
  --color-interactive-secondary-text:   var(--slate-800);
  --color-interactive-ghost-hover:   var(--slate-100);

  /* — Status — */
  --color-success-bg:      var(--green-50);
  --color-success-border:  var(--green-200);
  --color-success-text:    var(--green-800);
  --color-success-accent:  var(--green-500);

  --color-warning-bg:      var(--amber-50);
  --color-warning-border:  var(--amber-200);
  --color-warning-text:    var(--amber-800);
  --color-warning-accent:  var(--amber-500);

  --color-error-bg:        var(--red-50);
  --color-error-border:    var(--red-200);
  --color-error-text:      var(--red-700);
  --color-error-accent:    var(--red-500);

  --color-info-bg:         var(--blue-50);
  --color-info-border:     var(--blue-200);
  --color-info-text:       var(--blue-800);
  --color-info-accent:     var(--blue-500);

  /* — Poetry-specific — */
  --color-poem-ink:        var(--slate-900);  /* poem body text                    */
  --color-poem-title:      var(--blue-950);   /* poem title / heading              */
  --color-poem-meta:       var(--slate-500);  /* date, tags, word count            */
  --color-poem-line:       var(--slate-200);  /* dividers within poem view         */
  --color-poem-selection:  var(--blue-100);   /* text selection highlight          */
}


/* ----------------------------------------------------------------
   4. TYPOGRAPHY TOKENS
   Scale built on a 1.25 ratio (Major Third).
   Line heights are generous — optimised for reading verse.
---------------------------------------------------------------- */

:root {

  /* Font families */
  --font-sans:   'DM Sans', system-ui, -apple-system, sans-serif;
  --font-serif:  'DM Serif Display', 'Georgia', 'Times New Roman', serif;
  --font-mono:   'SF Mono', 'Fira Code', 'Consolas', monospace;

  /* Font sizes */
  --text-2xs:  10px;
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 14px;    /* default UI size                              */
  --text-md:   15px;    /* comfortable reading size                     */
  --text-lg:   17px;    /* poem body, sub-headings                      */
  --text-xl:   20px;    /* section headings                             */
  --text-2xl:  24px;    /* page headings                                */
  --text-3xl:  30px;    /* display / poem titles                        */
  --text-4xl:  38px;    /* hero / splash headings                       */
  --text-5xl:  48px;    /* very large display only                      */

  /* Font weights */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;

  /* Line heights */
  --leading-tight:  1.25;   /* headings, single-line labels             */
  --leading-snug:   1.4;    /* short UI text, pills, badges             */
  --leading-normal: 1.6;    /* body copy, labels                        */
  --leading-relaxed: 1.75;  /* body paragraphs                          */
  --leading-loose:  1.9;    /* poem lines — generous breathing room     */
  --leading-poem:   2.1;    /* lyric mode — maximum line space          */

  /* Letter spacing */
  --tracking-tight:  -0.03em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-widest:  0.12em;  /* eyebrow labels, tags                  */

  /* Paragraph max-width (for comfortable reading) */
  --measure-prose:  65ch;  /* general body text                         */
  --measure-poem:   52ch;  /* poem body — tighter, like a printed page  */
  --measure-narrow: 42ch;  /* notes, captions                           */
}


/* ----------------------------------------------------------------
   5. SPACING TOKENS
   4px base grid. Names map to multiples.
   Use named tokens; avoid arbitrary values.
---------------------------------------------------------------- */

:root {
  --space-px:  1px;
  --space-0-5: 2px;
  --space-1:   4px;
  --space-1-5: 6px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-14:  56px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32: 128px;
}


/* ----------------------------------------------------------------
   6. BORDER & RADIUS TOKENS
---------------------------------------------------------------- */

:root {
  --radius-sm:   4px;   /* badges, small tags, chips                   */
  --radius-md:   8px;   /* inputs, small cards, pills                  */
  --radius-lg:   12px;  /* cards, panels, modals                       */
  --radius-xl:   16px;  /* large cards, bottom sheets                  */
  --radius-2xl:  24px;  /* very large surfaces                         */
  --radius-full: 9999px; /* fully rounded — pills, avatars, dots       */

  --border-width:        1px;
  --border-width-medium: 2px;
  --border-width-thick:  3px;   /* active sidebar item left accent      */
}


/* ----------------------------------------------------------------
   7. SHADOW / ELEVATION TOKENS
   Minimal, subtle shadows — keeps the UI feeling light & printed.
   Named by elevation level (1 = closest to surface, 4 = most lifted).
---------------------------------------------------------------- */

:root {
  --shadow-1: 0 1px 2px rgba(13, 11, 18, 0.05),
              0 1px 3px rgba(13, 11, 18, 0.04);

  --shadow-2: 0 2px 8px rgba(13, 11, 18, 0.07),
              0 1px 3px rgba(13, 11, 18, 0.05);

  --shadow-3: 0 4px 16px rgba(13, 11, 18, 0.09),
              0 2px 6px rgba(13, 11, 18, 0.05);

  --shadow-4: 0 12px 32px rgba(13, 11, 18, 0.12),
              0 4px 10px rgba(13, 11, 18, 0.07);

  --shadow-focus: 0 0 0 3px rgba(48, 71, 224, 0.22);   /* blue focus ring */
  --shadow-focus-error: 0 0 0 3px rgba(239, 68, 68, 0.2);
}


/* ----------------------------------------------------------------
   8. MOTION TOKENS
   Keep animations purposeful and short — this is a reading app,
   not a game. Motion should ease navigation, never distract.
---------------------------------------------------------------- */

:root {
  --duration-instant:  80ms;
  --duration-fast:    150ms;   /* micro-interactions: hover, toggle    */
  --duration-normal:  220ms;   /* panel transitions, expand/collapse   */
  --duration-slow:    350ms;   /* page transitions, modals             */
  --duration-deliberate: 500ms; /* loading states, progress            */

  --ease-default:     cubic-bezier(0.16, 1, 0.3, 1);  /* overshoot-free out  */
  --ease-spring:      cubic-bezier(0.34, 1.56, 0.64, 1); /* gentle spring    */
  --ease-in:          cubic-bezier(0.4, 0, 1, 1);
  --ease-out:         cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:      cubic-bezier(0.4, 0, 0.2, 1);
}


/* ----------------------------------------------------------------
   9. LAYOUT TOKENS
---------------------------------------------------------------- */

:root {
  --sidebar-width:      280px;   /* desktop sidebar                     */
  --sidebar-width-sm:   260px;   /* compact breakpoint                  */
  --topbar-height:       52px;
  --content-max-width:  860px;   /* main content reading column         */
  --content-max-narrow: 640px;   /* focused writing / poem view         */
  --page-padding:       var(--space-8);  /* horizontal padding on pages  */
  --page-padding-sm:    var(--space-5);  /* mobile page padding          */
}


/* ================================================================
   10. BASE RESET
================================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video {
  display: block;
  max-width: 100%;
}

button, input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

a {
  color: var(--color-text-link);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-default);
}

a:hover {
  color: var(--color-text-link-hover);
  text-decoration: underline;
}

::selection {
  background: var(--color-poem-selection);
  color: var(--color-poem-ink);
}

/* Remove default button styles — always style intentionally */
button {
  background: none;
  border: none;
  cursor: pointer;
}

/* Smooth focus — accessibility-safe focus visibility */
:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

:focus:not(:focus-visible) {
  outline: none;
}

/* Scrollbar — subtle */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--slate-300);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--slate-400); }


/* ================================================================
   11. TYPOGRAPHY STYLES
================================================================ */

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-md); }

/* Display heading — serif, for poem titles and splash screens */
.heading-display {
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tight);
  color: var(--color-poem-title);
}

/* Page heading */
.heading-page {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-tight);
}

/* Section heading */
.heading-section {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-tight);
}

/* Eyebrow — small uppercase label above a heading */
.eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-brand);
}

/* Body text */
.body-lg  { font-size: var(--text-md);   line-height: var(--leading-relaxed); }
.body-md  { font-size: var(--text-base); line-height: var(--leading-normal); }
.body-sm  { font-size: var(--text-sm);   line-height: var(--leading-normal); }
.body-xs  { font-size: var(--text-xs);   line-height: var(--leading-snug); }

/* Meta text — dates, tags, word counts */
.meta {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  line-height: var(--leading-snug);
}

/* Code / monospace */
code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.875em;
}


/* ================================================================
   12. BUTTONS
   Three variants: primary, secondary, ghost.
   Three sizes: sm, md (default), lg.
================================================================ */

/* — Base button — */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: 0.01em;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--duration-fast) var(--ease-default),
    border-color var(--duration-fast) var(--ease-default),
    color var(--duration-fast) var(--ease-default),
    box-shadow var(--duration-fast) var(--ease-default),
    transform var(--duration-instant) var(--ease-default);
  user-select: none;
  text-decoration: none;
}

.btn:active:not(:disabled) {
  transform: translateY(1px);
}

.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* — Primary — */
.btn-primary {
  background: var(--color-interactive-primary);
  color: var(--color-interactive-primary-text);
  border-color: var(--color-interactive-primary);
  box-shadow: var(--shadow-1);
}

.btn-primary:hover:not(:disabled) {
  background: var(--color-interactive-primary-hover);
  border-color: var(--color-interactive-primary-hover);
  box-shadow: var(--shadow-2);
}

.btn-primary:focus-visible {
  box-shadow: var(--shadow-focus);
}

/* — Secondary — */
.btn-secondary {
  background: var(--color-interactive-secondary-bg);
  color: var(--color-interactive-secondary-text);
  border-color: var(--color-interactive-secondary-border);
  box-shadow: var(--shadow-1);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--slate-50);
  border-color: var(--slate-300);
  color: var(--slate-900);
}

.btn-secondary:focus-visible {
  box-shadow: var(--shadow-focus);
}

/* — Ghost — */
.btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: transparent;
}

.btn-ghost:hover:not(:disabled) {
  background: var(--color-interactive-ghost-hover);
  color: var(--color-text-primary);
}

/* — Danger — */
.btn-danger {
  background: var(--red-600);
  color: var(--white);
  border-color: var(--red-600);
}

.btn-danger:hover:not(:disabled) {
  background: var(--red-700);
  border-color: var(--red-700);
}

/* — Brand (sidebar CTA) — */
.btn-brand {
  background: var(--color-brand);
  color: var(--white);
  border-color: var(--color-brand);
  width: 100%;
  padding: var(--space-2-5, 10px) var(--space-4);
}

.btn-brand:hover:not(:disabled) {
  background: var(--color-brand-hover);
  border-color: var(--color-brand-hover);
}

/* — Sizes — */
.btn-sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  border-radius: var(--radius-sm);
}

.btn-lg {
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-md);
  border-radius: var(--radius-lg);
}

/* — Icon button — */
.btn-icon {
  padding: var(--space-2);
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.btn-icon-sm {
  width: 28px;
  height: 28px;
  padding: var(--space-1);
}

.btn-icon-lg {
  width: 40px;
  height: 40px;
  padding: var(--space-2));
}


/* ================================================================
   13. FORM CONTROLS
================================================================ */

/* — Input base — */
.input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-sunken);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  transition:
    border-color var(--duration-fast) var(--ease-default),
    box-shadow var(--duration-fast) var(--ease-default);
  outline: none;
}

.input::placeholder {
  color: var(--color-text-tertiary);
}

.input:hover:not(:disabled):not(:focus) {
  border-color: var(--color-border-strong);
}

.input:focus {
  border-color: var(--color-border-focus);
  box-shadow: var(--shadow-focus);
  background: var(--color-bg-surface);
}

.input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.input.input-error {
  border-color: var(--red-400);
}

.input.input-error:focus {
  box-shadow: var(--shadow-focus-error);
}

/* — Search input — */
.input-search {
  padding-left: var(--space-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239e9aab' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: var(--space-3) center;
}

/* — Textarea — */
.textarea {
  resize: vertical;
  min-height: 120px;
  line-height: var(--leading-relaxed);
}

/* — Poem textarea — */
.textarea-poem {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
  min-height: 280px;
  letter-spacing: 0.01em;
  resize: vertical;
}

/* — Label — */
.label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-1-5);
}

/* — Form group — */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
}

/* — Field error message — */
.field-error {
  font-size: var(--text-xs);
  color: var(--color-error-text);
  margin-top: var(--space-1);
}

/* — Select — */
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23716d80' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-right: var(--space-8);
  cursor: pointer;
}


/* ================================================================
   14. CARDS & SURFACES
================================================================ */

/* — Base card — */
.card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}

/* — Card with hover interaction — */
.card-interactive {
  cursor: pointer;
  transition:
    box-shadow var(--duration-fast) var(--ease-default),
    border-color var(--duration-fast) var(--ease-default),
    transform var(--duration-fast) var(--ease-default);
}

.card-interactive:hover {
  box-shadow: var(--shadow-3);
  border-color: var(--color-border-default);
  transform: translateY(-1px);
}

/* — Stat card (numbers / metrics) — */
.stat-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-1);
}

.stat-number {
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  margin-bottom: var(--space-1);
}

.stat-label {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  font-weight: var(--weight-regular);
}

/* — Stats strip (row of quick stats) — */
.stats-strip {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}

.stats-strip-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
  text-align: center;
}

.stats-strip-num {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-tight);
  line-height: 1.2;
}

.stats-strip-label {
  font-size: var(--text-2xs);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.stats-strip-divider {
  width: 1px;
  height: 32px;
  background: var(--color-border-subtle);
  flex-shrink: 0;
}

/* — Insight / analysis card — */
.insight-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-1);
}

.insight-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.insight-card-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-text-brand);
}

/* — Archive poem card (grid view) — */
.archive-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-1);
  cursor: pointer;
  transition:
    box-shadow var(--duration-fast) var(--ease-default),
    border-color var(--duration-fast) var(--ease-default),
    transform var(--duration-fast) var(--ease-default);
}

.archive-card:hover {
  box-shadow: var(--shadow-3);
  border-color: var(--blue-200);
  transform: translateY(-2px);
}

.archive-card-title {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  color: var(--color-poem-title);
  margin-bottom: var(--space-2);
  line-height: var(--leading-tight);
}

.archive-card-excerpt {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.archive-card-date {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  margin-top: var(--space-3);
}


/* ================================================================
   15. NAVIGATION & SIDEBAR
================================================================ */

/* — App shell layout — */
.app-shell {
  display: flex;
  min-height: 100vh;
}

/* — Sidebar — */
.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--color-bg-surface);
  border-right: 1px solid var(--color-border-subtle);
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: sticky;
  top: 0;
  overflow: hidden;
}

/* — Brand / logo area — */
.brand-mark {
  display: flex;
  align-items: center;
  gap: var(--space-2-5, 10px);
  cursor: pointer;
  border-radius: var(--radius-md);
  padding: var(--space-1);
  margin-left: calc(var(--space-1) * -1);
  transition: background var(--duration-fast) var(--ease-default);
  text-decoration: none;
}

.brand-mark:hover { background: var(--color-bg-muted); }
.brand-mark:hover .brand-icon { box-shadow: 0 0 0 3px var(--blue-200); }

.brand-icon {
  width: 34px;
  height: 34px;
  background: var(--color-brand);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: var(--text-md);
  flex-shrink: 0;
  transition: box-shadow var(--duration-fast) var(--ease-default);
}

.brand-name {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-tight);
}

.brand-sub {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  line-height: 1;
}

/* — Poem list item — */
.poem-list-item {
  padding: var(--space-3) var(--space-5);
  cursor: pointer;
  border-left: var(--border-width-thick) solid transparent;
  transition:
    background var(--duration-fast) var(--ease-default),
    border-color var(--duration-fast) var(--ease-default);
}

.poem-list-item:hover {
  background: var(--color-bg-muted);
}

.poem-list-item.active {
  background: var(--color-bg-highlight);
  border-left-color: var(--color-brand);
}

.poem-list-item-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
  margin-bottom: 2px;
}

.poem-list-item-date {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-1-5);
}

/* — Top bar — */
.top-bar {
  background: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border-subtle);
  padding: 0 var(--space-4) 0 var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--topbar-height);
}

/* — Tab navigation — */
.tab-bar {
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.tab-bar::-webkit-scrollbar { display: none; }

.tab-btn {
  padding: 0 var(--space-3-5, 14px);
  height: var(--topbar-height);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-tertiary);
  border-bottom: 2px solid transparent;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    color var(--duration-fast) var(--ease-default),
    border-color var(--duration-fast) var(--ease-default);
}

.tab-btn:hover { color: var(--color-text-secondary); }

.tab-btn.active {
  color: var(--color-text-brand);
  border-bottom-color: var(--color-brand);
}

/* — Sub-tab bar (within a view) — */
.subtab-bar {
  display: flex;
  gap: var(--space-5);
  border-bottom: 1px solid var(--color-border-subtle);
  padding: 0 var(--space-8);
}

.subtab-btn {
  padding: var(--space-3) 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  border-bottom: 2px solid transparent;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  cursor: pointer;
  transition:
    color var(--duration-fast) var(--ease-default),
    border-color var(--duration-fast) var(--ease-default);
}

.subtab-btn:hover { color: var(--color-text-primary); }
.subtab-btn.active {
  color: var(--color-text-brand);
  border-bottom-color: var(--color-brand);
}

/* — Sidebar footer — */
.sidebar-footer {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-border-subtle);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}


/* ================================================================
   16. BADGES, TAGS & PILLS
================================================================ */

/* — Base pill / badge — */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

/* — Badge variants — */
.badge-blue {
  background: var(--blue-100);
  color: var(--blue-800);
}

.badge-green {
  background: var(--green-100);
  color: var(--green-800);
}

.badge-amber {
  background: var(--amber-100);
  color: var(--amber-800);
}

.badge-red {
  background: var(--red-100);
  color: var(--red-700);
}

.badge-violet {
  background: var(--violet-100);
  color: var(--violet-800);
}

.badge-neutral {
  background: var(--slate-100);
  color: var(--slate-700);
}

/* — Grade badge — */
.badge-grade-a { background: var(--green-100); color: var(--green-800); }
.badge-grade-b { background: var(--blue-100);  color: var(--blue-800); }
.badge-grade-c { background: var(--amber-100); color: var(--amber-800); }
.badge-grade-d { background: var(--red-100);   color: var(--red-700); }

/* — Theme pill / tag (for tagging poems) — */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--space-2-5, 10px);
  background: var(--color-bg-muted);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  cursor: default;
  transition:
    background var(--duration-fast) var(--ease-default),
    border-color var(--duration-fast) var(--ease-default);
}

.tag-interactive {
  cursor: pointer;
}

.tag-interactive:hover {
  background: var(--color-bg-highlight);
  border-color: var(--color-brand-border);
  color: var(--color-text-brand);
}

/* — Tag count indicator — */
.tag-count {
  font-size: var(--text-2xs);
  color: var(--color-text-tertiary);
  margin-left: var(--space-1);
}

/* — Tags row — */
.tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1-5);
  align-items: center;
}

/* — Sync status dot — */
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.status-dot-online  { background: var(--green-500); }
.status-dot-syncing { background: var(--amber-500); }
.status-dot-error   { background: var(--red-500); }
.status-dot-offline { background: var(--slate-300); }


/* ================================================================
   17. POETRY DISPLAY
   These are the most important styles in the system.
   The poem is always the hero — the UI exists to serve it.
================================================================ */

/* — Poem view container — */
.poem-view {
  max-width: var(--measure-poem);
  padding: var(--space-8);
}

/* — Poem title — */
.poem-title {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: var(--weight-regular);
  color: var(--color-poem-title);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-1-5);
}

.poem-title-lg {
  font-size: var(--text-4xl);
}

/* — Poem subtitle / collection name — */
.poem-subtitle {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--color-poem-meta);
  margin-bottom: var(--space-5);
}

/* — Poem meta row (date, word count, etc.) — */
.poem-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-poem-line);
}

.poem-meta-item {
  font-size: var(--text-xs);
  color: var(--color-poem-meta);
}

.poem-meta-divider {
  width: 3px;
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--slate-300);
  flex-shrink: 0;
}

/* — Poem body — */
.poem-body {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
  color: var(--color-poem-ink);
  letter-spacing: 0.015em;
  max-width: var(--measure-poem);
}

/* — Stanza — */
.stanza {
  margin-bottom: var(--space-8);
}

.stanza:last-child {
  margin-bottom: 0;
}

/* — Individual line — */
.stanza-line {
  display: block;
  line-height: var(--leading-loose);
}

/* — Blank line between stanzas (typographic gap) — */
.stanza + .stanza::before {
  content: '';
  display: block;
  height: var(--space-4);
}

/* — Poem notes / annotation — */
.poem-notes {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  border-left: 3px solid var(--color-brand-border);
  padding-left: var(--space-4);
  margin-top: var(--space-6);
  font-style: italic;
}

/* — Lyric / song mode — extra generous spacing — */
.poem-body.lyric-mode {
  line-height: var(--leading-poem);
  font-size: var(--text-xl);
}

/* — Featured quote / excerpt — */
.poem-pull-quote {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-style: italic;
  color: var(--color-poem-title);
  border-left: 4px solid var(--color-brand);
  padding: var(--space-3) 0 var(--space-3) var(--space-6);
  margin: var(--space-6) 0;
  line-height: var(--leading-snug);
}


/* ================================================================
   18. STATS & DATA DISPLAY
================================================================ */

/* — Progress bar — */
.progress-track {
  width: 100%;
  height: 6px;
  background: var(--color-bg-muted);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--color-brand);
  border-radius: var(--radius-full);
  transition: width var(--duration-slow) var(--ease-out);
}

.progress-fill-success { background: var(--color-success-accent); }
.progress-fill-warning { background: var(--color-warning-accent); }

/* — Component analysis bar (for poem scoring) — */
.component-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}

.component-name {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  width: 120px;
  flex-shrink: 0;
}

.component-bar-bg {
  flex: 1;
  height: 6px;
  background: var(--color-bg-muted);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.component-bar-fill {
  height: 100%;
  background: var(--color-brand);
  border-radius: var(--radius-full);
}

.component-grade {
  width: 36px;
  text-align: right;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-brand);
  flex-shrink: 0;
}

/* — Archive grid — */
.archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
}

/* — Poets grid — */
.poets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-4);
}


/* ================================================================
   19. EMPTY STATES
   Shown when a collection is empty — e.g. no poems yet.
   Tone: encouraging, not sterile.
================================================================ */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-16) var(--space-8);
  gap: var(--space-3);
}

.empty-state-icon {
  font-size: 48px;
  opacity: 0.35;
  margin-bottom: var(--space-2);
}

.empty-state-title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  color: var(--color-text-primary);
  font-weight: var(--weight-regular);
}

.empty-state-body {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  max-width: 320px;
  line-height: var(--leading-relaxed);
}


/* ================================================================
   20. UTILITIES
================================================================ */

/* Layout */
.flex        { display: flex; }
.flex-col    { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.flex-1      { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.gap-1  { gap: var(--space-1); }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }

/* Spacing */
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

/* Text */
.text-center  { text-align: center; }
.truncate     { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-only      { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* Divider */
.divider {
  height: 1px;
  background: var(--color-border-subtle);
  width: 100%;
}

.divider-vertical {
  width: 1px;
  background: var(--color-border-subtle);
  align-self: stretch;
}

/* Dot-pulse loading animation */
.dot-pulse { display: flex; align-items: center; gap: 4px; }
.dot-pulse span {
  width: 5px; height: 5px;
  background: var(--color-brand);
  border-radius: var(--radius-full);
  animation: dotPulse 1.2s infinite;
}
.dot-pulse span:nth-child(2) { animation-delay: 0.2s; }
.dot-pulse span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dotPulse {
  0%, 80%, 100% { opacity: 0.2; transform: scale(0.7); }
  40%           { opacity: 1;   transform: scale(1); }
}

/* Spinner */
.spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--color-border-default);
  border-top-color: var(--color-brand);
  border-radius: var(--radius-full);
  animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Page layout */
.page-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.page-inner {
  padding: var(--space-8);
  max-width: var(--content-max-width);
}

.page-inner-narrow {
  padding: var(--space-8);
  max-width: var(--content-max-narrow);
}


/* ================================================================
   21. DARK MODE
   Overrides semantic tokens for dark backgrounds.
   Applied via prefers-color-scheme or .dark class on <html>.
================================================================ */

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-page:      #0e0d12;
    --color-bg-surface:   #1a1824;
    --color-bg-raised:    #221f2e;
    --color-bg-sunken:    #131120;
    --color-bg-highlight: rgba(48, 71, 224, 0.12);
    --color-bg-muted:     rgba(255, 255, 255, 0.05);

    --color-text-primary:   #f2f1f4;
    --color-text-secondary: #a09bad;
    --color-text-tertiary:  #605d6a;
    --color-text-disabled:  #44414b;
    --color-text-brand:     var(--blue-400);
    --color-text-link:      var(--blue-400);
    --color-text-link-hover: var(--blue-300);

    --color-border-default: rgba(255, 255, 255, 0.1);
    --color-border-strong:  rgba(255, 255, 255, 0.18);
    --color-border-subtle:  rgba(255, 255, 255, 0.06);
    --color-border-brand:   rgba(48, 71, 224, 0.35);

    --color-poem-ink:   #e8e6f0;
    --color-poem-title: #c4ccf9;
    --color-poem-meta:  #716d80;
    --color-poem-line:  rgba(255, 255, 255, 0.07);
    --color-poem-selection: rgba(48, 71, 224, 0.2);

    --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-3: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-4: 0 12px 32px rgba(0, 0, 0, 0.5);
  }
}

/* Manual dark mode toggle class */
html.dark {
  color-scheme: dark;
}


/* ================================================================
   22. RESPONSIVE BREAKPOINTS
   Mobile-first. Sidebar collapses below md.
================================================================ */

/* sm  — 640px  : small tablet / large phone */
/* md  — 768px  : tablet                     */
/* lg  — 1024px : desktop                    */
/* xl  — 1280px : wide desktop               */

/* Sidebar collapses on tablet and below */
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform var(--duration-normal) var(--ease-default);
    box-shadow: var(--shadow-4);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--color-bg-overlay);
    z-index: 49;
  }

  .sidebar-backdrop.visible { display: block; }

  .page-inner, .page-inner-narrow {
    padding: var(--space-5);
  }

  .archive-grid {
    grid-template-columns: 1fr;
  }

  .poem-title { font-size: var(--text-2xl); }
  .poem-body  { font-size: var(--text-md); }
}

@media (max-width: 640px) {
  .stats-strip {
    flex-wrap: wrap;
  }

  .top-bar {
    padding: 0 var(--space-3);
  }
}

/* Large screen — widen sidebar slightly */
@media (min-width: 1280px) {
  :root {
    --sidebar-width: 300px;
  }
}