/* ═══════════════════════════════════════════════════════════════════════════
   COMPOSE — Design Tokens v5
   Professional, content-first UI tokens.
   Visual decisions should be introduced here before feature CSS consumes them.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Fonts ─────────────────────────────────────────────────────────── */
  --font-ui:   'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Editor fonts (runtime overrides) */
  --ed-body-font:    'Source Serif 4', Georgia, serif;
  --ed-heading-font: 'Newsreader', Georgia, serif;
  --ed-font-size:    18px;
  --ed-line-height:  1.74;
  --ed-copy-max:     44rem;
  --ed-title-scale:  2.55;
  --ed-title-gap:    1.1rem;
  --ed-heading-gap-top: 2.15rem;
  --ed-heading-gap-bottom: 0.7rem;
  --ed-paragraph-gap: 0.96rem;

  /* Heading framework — level-specific tokens keep hierarchy tunable */
  --ed-heading-line-height: 1.12;
  --ed-heading-balance-wrap: balance;

  --ed-h1-size: 1.95em;
  --ed-h1-weight: 700;
  --ed-h1-line-height: 1.03;
  --ed-h1-letter-spacing: -0.036em;
  --ed-h1-margin-top: 2.25rem;
  --ed-h1-margin-bottom: 0.96rem;

  --ed-h2-size: 1.62em;
  --ed-h2-weight: 680;
  --ed-h2-line-height: 1.08;
  --ed-h2-letter-spacing: -0.03em;
  --ed-h2-margin-top: 2.2rem;
  --ed-h2-margin-bottom: 0.84rem;

  --ed-h3-size: 1.36em;
  --ed-h3-weight: 650;
  --ed-h3-line-height: 1.14;
  --ed-h3-letter-spacing: -0.018em;
  --ed-h3-margin-top: 1.8rem;
  --ed-h3-margin-bottom: 0.68rem;

  --ed-h4-size: 1.22em;
  --ed-h4-weight: 625;
  --ed-h4-line-height: 1.18;
  --ed-h4-letter-spacing: -0.01em;
  --ed-h4-margin-top: 1.5rem;
  --ed-h4-margin-bottom: 0.56rem;

  --ed-h5-size: 1.12em;
  --ed-h5-weight: 625;
  --ed-h5-line-height: 1.2;
  --ed-h5-letter-spacing: 0;
  --ed-h5-margin-top: 1.34rem;
  --ed-h5-margin-bottom: 0.5rem;

  --ed-h6-size: 1.06em;
  --ed-h6-weight: 620;
  --ed-h6-line-height: 1.2;
  --ed-h6-letter-spacing: 0.002em;
  --ed-h6-margin-top: 1.2rem;
  --ed-h6-margin-bottom: 0.48rem;
  --ed-h6-color: color-mix(in srgb, var(--text-sec) 72%, var(--ed-text));

  /* Caption framework — quiet supporting text, distinct from quotations */
  --ed-caption-size: 0.86em;
  --ed-caption-line-height: 1.5;
  --ed-caption-letter-spacing: 0.014em;
  --ed-caption-color: color-mix(in srgb, var(--text-muted) 96%, var(--ed-text));
  --ed-caption-max-width: 34rem;
  --ed-caption-align: center;
  --ed-caption-image-align: center;
  --ed-caption-margin-top: 0.06rem;
  --ed-caption-margin-bottom: 1rem;
  --ed-caption-image-gap: 0.45rem;

  /* Note framework — editorial aside, distinct from body copy */
  --ed-note-size: 0.94em;
  --ed-note-line-height: 1.62;
  --ed-note-letter-spacing: 0.001em;
  --ed-note-color: color-mix(in srgb, var(--text-sec) 88%, var(--ed-text));
  --ed-note-bg: color-mix(in srgb, var(--text-muted) 4%, var(--bg-card));
  --ed-note-border: color-mix(in srgb, var(--text-muted) 10%, var(--border));
  --ed-note-radius: calc(var(--r-sm) - 1px);
  --ed-note-pad-y: 0.72rem;
  --ed-note-pad-x: 0.95rem;
  --ed-note-margin-top: 0.1rem;
  --ed-note-margin-bottom: 1.05rem;

  /* Code framework — deliberate authoring surface for technical content */
  --ed-code-inline-size: 0.87em;
  --ed-code-inline-line-height: 1.45;
  --ed-code-inline-bg: color-mix(in srgb, var(--fill-subtle) 88%, transparent);
  --ed-code-inline-border: color-mix(in srgb, var(--border) 90%, transparent);
  --ed-code-inline-radius: var(--r-sm);
  --ed-code-inline-pad-y: 0.08em;
  --ed-code-inline-pad-x: 0.38em;

  --ed-code-block-size: 0.9em;
  --ed-code-block-line-height: 1.62;
  --ed-code-block-color: color-mix(in srgb, var(--text) 96%, var(--ed-text));
  --ed-code-block-bg: color-mix(in srgb, var(--fill-subtle) 92%, transparent);
  --ed-code-block-border: color-mix(in srgb, var(--border-strong) 82%, transparent);
  --ed-code-block-radius: calc(var(--r-md) + 1px);
  --ed-code-block-pad-y: 0.9rem;
  --ed-code-block-pad-x: 1rem;
  --ed-code-block-margin-top: 0.18rem;
  --ed-code-block-margin-bottom: 1.12rem;
  --ed-code-block-tab-size: 2;

  /* Blockquote framework — quoted text with stronger structure than captions */
  --ed-quote-size: 1.02em;
  --ed-quote-line-height: 1.68;
  --ed-quote-letter-spacing: -0.002em;
  --ed-quote-color: color-mix(in srgb, var(--text-sec) 78%, var(--ed-text));
  --ed-quote-accent: color-mix(in srgb, var(--accent) 54%, var(--border-strong));
  --ed-quote-bg: color-mix(in srgb, var(--fill-subtle) 44%, transparent);
  --ed-quote-radius: var(--r-md);
  --ed-quote-border-width: 3px;
  --ed-quote-pad-y: 0.78rem;
  --ed-quote-pad-right: 1rem;
  --ed-quote-pad-left: 1.05rem;
  --ed-quote-margin-top: 0.2rem;
  --ed-quote-margin-bottom: 1.2rem;

  --ed-block-gap:    1.45rem;
  --ed-quote-pad:    1.1rem;
  --ed-line-width:   68ch;

  /* ── Type scale — ONE UI size: 13px ─────────────────────────────────*/
  --ui-font-size:   13px;
  --ui-label-size:  11px;
  --ui-title-size:  14px;

  --text-xs: 11px;
  --text-sm: 13px;
  --text-md: 14px;

  /* ── Spacing — 4px base grid ─────────────────────────────────────── */
  --s-1:  4px;  --s-2:  8px;  --s-3:  12px; --s-4:  16px;
  --s-5:  20px; --s-6:  24px; --s-8:  32px;
  --s-tight:    8px;  --s-default:  12px; --s-generous: 24px;
  --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;

  /* ── Border radii ────────────────────────────────────────────────── */
  --r-sm:   4px;  --r-md:   6px;  --r-lg:   10px;
  --r-xl:   14px; --r-2xl:  20px; --r-pill: 999px;

  /* ── Motion ──────────────────────────────────────────────────────── */
  --ease:   cubic-bezier(0.2, 0, 0, 1);
  --ease-d: cubic-bezier(0, 0, 0, 1);
  --t-fast: 80ms; --t: 140ms; --t-slow: 240ms;
  --motion-ease-standard: var(--ease);
  --motion-ease-emphasized: cubic-bezier(0.34, 1.2, 0.64, 1);
  --motion-ease-decelerate: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --motion-duration-press: 60ms;
  --motion-duration-interactive: 120ms;
  --motion-duration-emphasized: 180ms;
  --motion-duration-modal: 180ms;
  --motion-duration-sheet: 260ms;
  --motion-hover-lift: -1px;
  --motion-press-scale: .98;
  --interaction-disabled-opacity: .56;

  /* ── Elevation ───────────────────────────────────────────────────── */
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-xl: none;

  /* ── Shell dimensions ────────────────────────────────────────────── */
  --header-row-h: 48px;
  --topbar-h:  var(--header-row-h);
  --toolbar-h: var(--header-row-h);
  --app-header-h: calc(var(--topbar-h) + var(--toolbar-h));
  --header-action-size: 36px;
  --header-inline-pad: clamp(12px, 1.6vw, 20px);
  --header-inline-pad-compact: 10px;
  --header-cluster-gap: 14px;
  --header-action-gap: 3px;
  --header-brand-pad: 10px;
  --header-wordcount-pad: 8px;
  --header-title-pad-x: 10px;
  --sidebar-w: 352px;
  --paper-shadow-light: 0 1px 2px rgba(60,45,30,.04), 0 12px 32px rgba(60,45,30,.06), 0 0 0 1px rgba(60,45,30,.025);
  --paper-shadow-dark: 0 1px 2px rgba(0,0,0,.30), 0 16px 36px rgba(0,0,0,.28), 0 0 0 1px rgba(255,250,240,.04);

  /* Sidebar shell sizing */
  --sp-section-gap: 16px;
  --sp-card-radius: 16px;
  --sp-control-radius: 999px;
  --sp-card-pad-x: 14px;
  --sp-card-pad-y: 12px;

  /* ── Component sizing ────────────────────────────────────────────── */
  --ui-control-h-sm: 28px;
  --ui-control-h: 36px;
  --ui-control-h-lg: 40px;
  --ui-icon-sm: 12px;
  --ui-icon-md: 14px;
  --ui-icon-lg: 16px;
  --ui-close-size-sm: 24px;
  --ui-close-size: 28px;
  --ui-field-px: 10px;
  --ui-select-pr: 32px;
  --ui-action-gap: 6px;
  --ui-action-px: 12px;
  --ui-panel-pad-x: 16px;
  --ui-panel-pad-y: 14px;
  --ui-section-gap: 16px;
  --ui-modal-max: 500px;
  --ui-modal-wide-max: 680px;
  --ui-modal-sm-max: 360px;
  --ui-modal-confirm-max: 340px;
  --ui-popover-max: 480px;

  /* ── Z-index ─────────────────────────────────────────────────────── */
  --z-toolbar: 100; --z-topbar: 110; --z-sidebar: 120;
  --z-overlay: 200; --z-modal:  300; --z-toast:   400; --z-tip: 500;
}

/* ── Single accent: website blue ──────────────────────────────────────── */
:root {
  --accent: #3356E8;
  --accent-rgb: 51,86,232;
  --accent-hover: #2645D4;
  --accent-soft: #7B9EF5;
  --accent-quiet: #A8C0FF;
  --accent-quiet-strong: #C0D0FF;
  --focus-ring: 0 0 0 3px rgba(var(--accent-rgb), .10);
  --tooltip-bg: #1A1816;
  --tooltip-fg: #EDE8E1;
  --mark-yellow: #FFF59D;
  --mark-yellow-text-light: #1A1917;
  --mark-yellow-text-dark: #EDE8E1;
  --page-surround-light: #F5F5F5;
  --page-surround-dark: #26231F;
  --danger-fill: rgba(138,48,48,.10);
  --danger-soft: rgba(138,48,48,.06);
  --danger-fill-strong: rgba(138,48,48,.18);
  --danger-border: rgba(138,48,48,.20);
  --danger-text: #8A3030;
  --chart-series-0: #3356E8;
  --chart-series-1: #6D86EE;
  --chart-series-2: #98ABF5;
  --chart-series-3: #C3D0FB;
  --chart-series-4: #8A63D2;
  --chart-series-5: #3F7A5B;
  --chart-series-6: #D36A4A;
  --chart-series-7: #B7861B;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT THEME — warm, matches website palette
   ═══════════════════════════════════════════════════════════════════════════ */
:root, [data-theme="light"] {
  /* Surfaces — warm off-whites matching website */
  --bg-canvas:  #F5F5F5;
  --bg-chrome:  #FFFFFF;
  --bg-sidebar: #F5F5F5;
  --bg-card:    #FFFFFF;
  --bg-app:     #F5F5F5;
  --bg-soft:    rgba(26,25,23,.02);
  --bg-overlay: rgba(26,25,23,.45);

  /* Fills */
  --fill-subtle:   rgba(26,25,23,.04);
  --fill-muted:    rgba(26,25,23,.07);
  --fill-hover:    rgba(26,25,23,.05);
  --fill-active:   rgba(26,25,23,.09);
  --fill-selected: rgba(51,86,232,.075);
  --header-fill-hover: rgba(51,86,232,.065);
  --interactive-press-bg: rgba(26,25,23,.10);
  --interactive-press-fg: var(--text);
  --interactive-press-scale: .98;
  --interactive-selected-bg: rgba(51,86,232,.085);
  --interactive-selected-border: rgba(51,86,232,.20);
  --interactive-selected-fg: var(--accent);
  --chrome-active-bg: #F2F5FF;
  --chrome-active-border: #CCD6FF;
  --chrome-active-fg: var(--interactive-selected-fg);
  --chrome-active-shadow: none;
  --interactive-current-bg: color-mix(in srgb, var(--accent) 8%, var(--bg-card));
  --interactive-current-border: color-mix(in srgb, var(--accent) 18%, var(--border));

  /* Borders — warm-toned to match website */
  --border:        #E4E0D8;
  --border-strong: #C2BDB5;
  --border-focus:  rgba(51,86,232,.50);

  /* Text — warm dark tones */
  --text:          #1A1917;
  --text-sec:      #4A4640;
  --text-muted:    #7B7670;
  --text-disabled: #B8B4AE;
  --text-on-accent:#FFFFFF;

  /* Editor */
  --ed-bg:   #F5F5F5;
  --page-paper: #F9F9F9;
  --page-paper-border: #E6E6E6;
  --ed-text: #1A1917;

  /* Chrome surfaces */
  --topbar-bg:      #FFFFFF;
  --topbar-border:  #E4E0D8;
  --toolbar-bg:     #FFFFFF;
  --toolbar-border: #E4E0D8;
  --sidebar-bg:     #F5F5F5;
  --sidebar-border: #E4E0D8;

  --scrollbar-thumb: rgba(26,25,23,.16);
  --scrollbar-track: rgba(26,25,23,.05);
  --text-faint: var(--text-muted);
  --fill-3: var(--fill-muted);
  --border-subtle: color-mix(in srgb, var(--border) 72%, transparent);
  --ok-text: var(--status-saved);

  /* Status */
  --status-saved:  #1E6A2E;
  --status-dirty:  #B05900;
  --status-error:  #C5221F;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK THEME — warm dark, matches the app's parchment character
   Surfaces are warm-tinted near-blacks (not cold Figma greys).
   Hierarchy: app shell (#181714) → chrome (#242220) → card (#2E2B28)
              → sidebar (#211F1C) → canvas (#1E1C19 / #242220)
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  /* Surfaces — warm dark browns, not cold greys */
  --bg-canvas:  #1E1C19;
  --page-paper-dark: #1E1C19;
  --bg-chrome:  #242220;
  --bg-sidebar: #211F1C;
  --bg-card:    #2E2B28;
  --bg-app:     #181714;
  --bg-soft:    rgba(255,250,240,.04);
  --bg-overlay: rgba(0,0,0,.70);

  /* Fills — slightly warm whites for interactions */
  --fill-subtle:   rgba(255,250,240,.04);
  --fill-muted:    rgba(255,250,240,.08);
  --fill-hover:    rgba(255,250,240,.06);
  --fill-active:   rgba(255,250,240,.12);
  --fill-selected: rgba(var(--accent-rgb),.18);
  --header-fill-hover: rgba(var(--accent-rgb),.13);
  --interactive-press-bg: rgba(255,250,240,.14);
  --interactive-press-fg: var(--text);
  --interactive-press-scale: .98;
  --interactive-selected-bg: rgba(var(--accent-rgb), .18);
  --interactive-selected-border: rgba(var(--accent-rgb), .30);
  --interactive-selected-fg: var(--accent-quiet);
  --chrome-active-bg: #303B63;
  --chrome-active-border: #4B5C98;
  --chrome-active-fg: var(--interactive-selected-fg);
  --chrome-active-shadow: inset 0 0 0 1px #5669AA;
  --interactive-current-bg: color-mix(in srgb, var(--accent) 12%, var(--bg-card));
  --interactive-current-border: color-mix(in srgb, var(--accent) 24%, var(--border));

  /* Borders — warm dark lines */
  --border:        #3A3733;
  --border-strong: #524E4A;
  --border-focus:  rgba(var(--accent-rgb),.65);

  /* Text — warm off-whites, proper hierarchy */
  --text:          #EDE8E1;
  --text-sec:      #A89F95;
  --text-muted:    #726B62;
  --text-disabled: #4A4540;
  --text-on-accent:#FFFFFF;

  /* Editor — warm dark canvas */
  --ed-bg:   #1E1C19;
  --ed-text: #EDE8E1;

  /* Chrome surfaces */
  --topbar-bg:      #242220;
  --topbar-border:  #3A3733;
  --toolbar-bg:     #242220;
  --toolbar-border: #3A3733;
  --sidebar-bg:     #211F1C;
  --sidebar-border: #3A3733;

  --scrollbar-thumb: rgba(255,250,240,.18);
  --scrollbar-track: rgba(255,250,240,.06);
  --text-faint: var(--text-muted);
  --fill-3: var(--fill-muted);
  --border-subtle: color-mix(in srgb, var(--border) 72%, transparent);
  --ok-text: var(--status-saved);

  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-xl: none;

  /* Status — muted but legible on warm dark */
  --status-saved:  #7DBF8A;
  --status-dirty:  #D4943A;
  --status-error:  #E07B76;
  --danger-soft: rgba(224,123,118,.10);
  --danger-text:   #E07B76;
}