/* ============================================================================
   MANUSCRIPT LAB — Design Tokens
   "Academic Obsidian" — deep slate, muted teal, clean white.
   FONT ROLES (system-safe fallbacks — no webfont dependency):
     · serif  → Georgia / Book Antiqua  — the manuscript writing & reading workspace
     · sans   → system-ui stack         — dashboard chrome, controls, icon labels
     · mono   → system monospace stack  — structural telemetry (numbers/labels)
   NOTE: Per spec the brand fonts are Inter (sans) + JetBrains Mono. The user
   could not supply .ttf files, so the live preview uses web-safe system fonts.
   To restore brand fonts, add @font-face rules (or a CDN @import) and point
   --font-sans → Inter and --font-mono → 'JetBrains Mono'.
   ============================================================================ */

:root {
  /* ---- FONT FAMILIES ---------------------------------------------------- */
  --font-serif: Georgia, 'Book Antiqua', 'Iowan Old Style', 'Times New Roman', serif;
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, 'Cascadia Code', 'Roboto Mono', monospace;

  /* ====================================================================== */
  /*  BASE COLOR PALETTE — Academic Obsidian                                */
  /* ====================================================================== */

  /* Slate surfaces (dark → light) */
  --obsidian:        #0B1120;  /* deepest — input wells, page void          */
  --bg-base:         #0F172A;  /* canvas / app background                    */
  --bg-panel:        #172033;  /* the three working panels                   */
  --bg-elevated:     #1E293B;  /* cards, menus, raised surfaces              */
  --bg-hover:        #243149;  /* row / control hover                        */

  /* Borders + dividers */
  --border:          #2A3850;  /* default hairline                          */
  --border-strong:   #3A4A66;  /* emphasized / focused container            */
  --border-subtle:   #1B2740;  /* barely-there internal divider             */

  /* Foreground / type */
  --fg-1:            #F1F5F9;  /* primary white type                        */
  --fg-2:            #94A3B8;  /* secondary / supporting                     */
  --fg-3:            #64748B;  /* muted labels, placeholders                 */
  --fg-inverse:      #0B1120;  /* type on teal fills                         */

  /* Teal accent (brand) */
  --accent:          #0D9488;  /* primary teal                              */
  --accent-hover:    #0F766E;  /* darker — press / hover on fills           */
  --accent-bright:   #2DD4BF;  /* glowing highlight / active telemetry      */
  --accent-soft:     rgba(13, 148, 136, 0.14);  /* tint fills              */
  --accent-line:     rgba(45, 212, 191, 0.35);  /* tinted borders          */

  /* Nomenclature-lock blue (locked technical terms) */
  --lock:            #3B82F6;
  --lock-bright:     #60A5FA;
  --lock-soft:       rgba(59, 130, 246, 0.16);
  --lock-line:       rgba(96, 165, 250, 0.40);

  /* Status / semantic */
  --success:         #34D399;
  --success-soft:    rgba(52, 211, 153, 0.14);
  --warning:         #FBBF24;
  --warning-soft:    rgba(251, 191, 36, 0.14);
  --danger:          #F87171;
  --danger-soft:     rgba(248, 113, 113, 0.14);

  /* ====================================================================== */
  /*  SEMANTIC TOKENS                                                        */
  /* ====================================================================== */
  --text-primary:    var(--fg-1);
  --text-secondary:  var(--fg-2);
  --text-muted:      var(--fg-3);
  --text-accent:     var(--accent-bright);
  --surface:         var(--bg-base);
  --surface-panel:   var(--bg-panel);
  --surface-raised:  var(--bg-elevated);
  --focus-ring:      rgba(45, 212, 191, 0.45);

  /* ====================================================================== */
  /*  TYPE SCALE  (1.250 major-third, base 16px)                            */
  /* ====================================================================== */
  --text-xs:    11px;   /* telemetry micro-labels, uppercase tags          */
  --text-sm:    13px;   /* mono readouts, secondary UI                     */
  --text-base:  15px;   /* body / textarea content                         */
  --text-md:    17px;   /* emphasized body                                 */
  --text-lg:    20px;   /* panel titles                                    */
  --text-xl:    25px;   /* section headers                                 */
  --text-2xl:   31px;   /* page / display                                  */
  --text-3xl:   39px;   /* hero numerals (Word Balance)                    */

  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide:  0.04em;
  --tracking-caps:  0.12em;  /* uppercase telemetry labels                  */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;

  /* ====================================================================== */
  /*  SPACING  (4px base unit)                                              */
  /* ====================================================================== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ====================================================================== */
  /*  RADII  — precise / instrument-like, never pillowy                     */
  /* ====================================================================== */
  --r-xs:   3px;
  --r-sm:   5px;
  --r-md:   8px;    /* default control + card radius                       */
  --r-lg:   12px;   /* panels                                              */
  --r-xl:   16px;
  --r-pill: 999px;  /* toggles, status chips                              */

  /* ====================================================================== */
  /*  ELEVATION  — restrained; light is scarce in the obsidian             */
  /* ====================================================================== */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-md:  0 4px 14px rgba(0, 0, 0, 0.45);
  --shadow-lg:  0 18px 48px rgba(0, 0, 0, 0.55);
  --glow-teal:  0 0 0 1px var(--accent-line), 0 0 20px rgba(13, 148, 136, 0.30);
  --glow-lock:  0 0 0 1px var(--lock-line), 0 0 18px rgba(59, 130, 246, 0.28);

  /* Inset for the input/output text wells */
  --inset-well: inset 0 1px 2px rgba(0, 0, 0, 0.55);

  /* ====================================================================== */
  /*  MOTION                                                                 */
  /* ====================================================================== */
  --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;
}

/* ============================================================================
   LIGHT THEME — "Academic Paper"
   Cool paper-white surfaces, slate ink, same teal + lock-blue.
   Applied via  <html data-theme="light">.  Default (no attr) = Obsidian dark.
   ============================================================================ */
:root[data-theme="light"] {
  --obsidian:        #F8FAFC;  /* recessed text wells                       */
  --bg-base:         #EAEFF5;  /* canvas                                    */
  --bg-panel:        #FFFFFF;  /* the three working panels                  */
  --bg-elevated:     #FFFFFF;  /* cards, menus                              */
  --bg-hover:        #F1F5F9;  /* row / control hover                       */

  --border:          #E2E8F0;
  --border-strong:   #CBD5E1;
  --border-subtle:   #EEF2F6;

  --fg-1:            #0F172A;
  --fg-2:            #475569;
  --fg-3:            #94A3B8;
  --fg-inverse:      #FFFFFF;

  --accent:          #0D9488;
  --accent-hover:    #0F766E;
  --accent-bright:   #0F766E;  /* readable teal text/icons on white         */
  --accent-soft:     rgba(13, 148, 136, 0.10);
  --accent-line:     rgba(13, 148, 136, 0.38);

  --lock:            #2563EB;
  --lock-bright:     #2563EB;
  --lock-soft:       rgba(37, 99, 235, 0.10);
  --lock-line:       rgba(37, 99, 235, 0.38);

  --success:         #059669;  --success-soft: rgba(5, 150, 105, 0.12);
  --warning:         #B45309;  --warning-soft: rgba(180, 83, 9, 0.12);
  --danger:          #DC2626;  --danger-soft:  rgba(220, 38, 38, 0.10);

  --focus-ring:      rgba(13, 148, 136, 0.40);

  --shadow-sm:  0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md:  0 4px 14px rgba(15, 23, 42, 0.10);
  --shadow-lg:  0 18px 48px rgba(15, 23, 42, 0.16);
  --glow-teal:  0 0 0 1px var(--accent-line), 0 0 0 3px rgba(13, 148, 136, 0.12);
  --glow-lock:  0 0 0 1px var(--lock-line), 0 0 0 3px rgba(37, 99, 235, 0.12);
  --inset-well: inset 0 1px 2px rgba(15, 23, 42, 0.05);
}

/* ============================================================================
   SEMANTIC TYPE CLASSES
   ============================================================================ */
.ml-display {
  font-family: var(--font-sans);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.ml-h1 {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.ml-h2 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}
.ml-panel-title {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}
/* Manuscript prose — the draft & humanized output read like a journal page */
.ml-body {
  font-family: var(--font-serif);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--fg-1);
}
.ml-body-secondary {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--fg-2);
}
/* Structural telemetry — always monospace */
.ml-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--fg-1);
  font-feature-settings: 'tnum' 1;
}
.ml-metric {
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--accent-bright);
  font-feature-settings: 'tnum' 1;
}
/* Uppercase micro-label — the spec's section tags (INPUT ZONE, TELEMETRY...) */
.ml-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-3);
}
.ml-code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: var(--accent-bright);
  background: var(--accent-soft);
  padding: 2px 6px;
  border-radius: var(--r-xs);
}