/* COMPOSE consolidated stylesheet: 1-design-foundation.css.
   Product-area bundle keeps runtime visual ownership traceable.
   Source sections below are retained as named ownership markers for CSS contracts. */


/* ==== Source section: css/1-tokens.css ==== */

@layer tokens {
/* ═══════════════════════════════════════════════════════════════════════════
   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:    'Newsreader', Georgia, serif;
  --ed-heading-font: 'DM Sans', system-ui, sans-serif;
  --ed-font-size:    12px;
  --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;

  /* ── UI typography scale — compact, Swiss-inspired chrome ─────────── */
  --ui-type-micro: 10px;
  --ui-type-label: 11px;
  --ui-type-meta: 12px;
  --ui-type-control: 12.5px;
  --ui-type-body: 13px;
  --ui-type-title: 14px;
  --ui-type-heading: 15px;
  --ui-leading-tight: 1.2;
  --ui-leading-control: 1.35;
  --ui-leading-body: 1.5;
  --ui-leading-prose: 1.55;
  --ui-letter-tight: -0.01em;
  --ui-letter-title: -0.02em;
  --ui-letter-label: 0.04em;
  --ui-letter-eyebrow: 0.08em;

  /* Backwards-compatible aliases for existing primitives. */
  --ui-font-size:   var(--ui-type-body);
  --ui-label-size:  var(--ui-type-label);
  --ui-title-size:  var(--ui-type-title);

  --text-xs: var(--ui-type-label);
  --text-sm: var(--ui-type-body);
  --text-md: var(--ui-type-title);

  /* ── 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: .64;

  /* ── 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,.34), 0 18px 42px rgba(0,0,0,.30), 0 0 0 1px rgba(238,241,246,.045);

  /* ── Platform and responsive QA primitives ───────────────────────── */
  --platform-touch-target: 44px;
  --platform-mobile-top-gap: 12px;
  --platform-mobile-sidebar-h: min(75svh, calc(100svh - env(safe-area-inset-top, 0px) - var(--platform-mobile-top-gap)));
  --platform-mobile-sidebar-radius: var(--r-2xl);
  --platform-mobile-panel-bottom-pad: calc(env(safe-area-inset-bottom, 0px) + 18px);
  --platform-compact-header-action-size: 40px;
  --platform-compact-icon-size: 16px;
  --platform-native-control-line-height: 1;

  /* 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;

  /* ── Field and form primitives — canonical inputs/search/selects ───── */
  --field-control-h: var(--ui-control-h);
  --field-control-h-comfortable: var(--ui-control-h-lg);
  --field-textarea-min-h: 88px;
  --field-px: 10px;
  --field-py: 9px;
  --field-radius: var(--radius-control);
  --field-border-width: 1px;
  --field-font-size: var(--ui-type-control);
  --field-font-weight: 450;
  --field-line-height: var(--ui-leading-control);
  --field-letter-spacing: -0.01em;
  --field-bg: var(--bg-card);
  --field-bg-hover: color-mix(in srgb, var(--field-bg) 92%, var(--fill-hover));
  --field-bg-disabled: color-mix(in srgb, var(--fill-subtle) 84%, var(--bg-card));
  --field-fg: var(--text);
  --field-placeholder: var(--text-muted);
  --field-border: color-mix(in srgb, var(--border) 86%, var(--border-strong));
  --field-border-hover: color-mix(in srgb, var(--border-focus) 34%, var(--border-strong));
  --field-border-focus: var(--border-focus);
  --field-focus-ring: var(--focus-ring);
  --field-transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), color var(--t-fast) var(--ease);

  /* ── Panel and form surface primitives ─────────────────────────────── */
  --panel-card-padding: 14px;
  --panel-card-radius: var(--radius-card);
  --panel-inner-gap: 10px;
  --panel-section-gap: 14px;
  --panel-section-gap-tight: 10px;
  --panel-footer-gap: 8px;
  --panel-card-bg: var(--surface-card);
  --panel-card-border: var(--border);
  --panel-embed-bg: var(--fill-subtle);

  /* ── Empty, locked, gate, and notice states ───────────────────────── */
  --state-block-padding: 12px 13px;
  --state-block-radius: var(--radius-card);
  --state-block-gap: 6px;
  --state-icon-size: 28px;
  --state-icon-stroke: 1.6;
  --state-title-size: var(--ui-type-body);
  --state-body-size: var(--ui-type-control);
  --state-title-weight: 650;
  --state-body-line-height: 1.55;
  --state-empty-bg: color-mix(in srgb, var(--fill-subtle) 88%, var(--surface-card));
  --state-empty-border: color-mix(in srgb, var(--border) 84%, transparent);
  --state-empty-border-style: dashed;
  --state-empty-icon-fg: var(--text-muted);
  --state-empty-title-fg: var(--text-sec);
  --state-empty-body-fg: var(--text-muted);
  --state-gate-bg: color-mix(in srgb, var(--accent) 6%, var(--surface-card));
  --state-gate-border: color-mix(in srgb, var(--accent) 22%, var(--border));
  --state-gate-icon-bg: color-mix(in srgb, var(--accent) 10%, transparent);
  --state-gate-icon-fg: var(--accent);
  --state-gate-title-fg: var(--text);
  --state-gate-body-fg: var(--text-sec);
  --state-notice-bg: color-mix(in srgb, var(--fill-subtle) 74%, transparent);
  --state-notice-border: color-mix(in srgb, var(--border) 70%, transparent);
  --state-notice-fg: var(--text-sec);
  --state-error-bg: color-mix(in srgb, var(--danger-fill) 70%, var(--surface-card));
  --state-error-border: color-mix(in srgb, var(--danger-border) 84%, var(--border));
  --state-error-fg: var(--danger-text);
  --ui-modal-max: 500px;
  --ui-modal-confirm-max: 340px;
  --ui-popover-max: 480px;

  /* ── Control primitives — canonical button/action state vocabulary ─ */
  --control-border-width: 1px;
  --control-radius: var(--radius-control);
  --control-radius-sm: var(--r-md);
  --control-font-weight: 500;
  --control-letter-spacing: -0.01em;
  --control-transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--motion-duration-press) var(--ease), filter var(--t-fast) var(--ease);
  --control-bg: var(--fill-muted);
  --control-bg-subtle: transparent;
  --control-bg-hover: var(--interactive-hover-bg);
  --control-bg-active: var(--interactive-press-bg);
  --control-fg: var(--text-sec);
  --control-fg-hover: var(--text);
  --control-border: transparent;
  --control-border-hover: color-mix(in srgb, var(--interactive-hover-border) 64%, var(--border));
  --control-primary-bg: var(--accent);
  --control-primary-bg-hover: var(--accent-hover);
  --control-primary-fg: var(--text-on-accent);
  --control-danger-bg: var(--danger-fill);
  --control-danger-bg-hover: var(--danger-fill-strong);
  --control-danger-border: var(--danger-border);
  --control-danger-fg: var(--danger-text);
  --control-disabled-opacity: var(--interaction-disabled-opacity);

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

/* ── Brand accent: ink-indigo with a violet undertone ──────────────── */
:root {
  --accent: #4B55E6;
  --accent-rgb: 75,85,230;
  --accent-hover: #3D45C8;
  --accent-soft: #7E86F2;
  --accent-quiet: #DDE1FF;
  --accent-quiet-strong: #C9CEFF;
  --accent-ink: #252A78;
  --accent-ink-rgb: 37,42,120;
  --accent-luminous: #A9AEFF;
  --focus-outline: var(--accent);
  --focus-ring-color: rgba(var(--accent-rgb), .24);
  --focus-ring-color-strong: rgba(var(--accent-rgb), .32);
  --focus-ring: 0 0 0 3px var(--focus-ring-color);
  --focus-ring-strong: 0 0 0 4px var(--focus-ring-color-strong);
  --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: #202329;
  --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;
  --research-note-yellow: #facc15;
  --research-note-blue: #60a5fa;
  --research-note-green: #4ade80;
  --research-note-pink: #f472b6;
  --research-note-purple: #a78bfa;
  --chart-series-0: var(--accent);
  --chart-series-1: #6F77EC;
  --chart-series-2: #A0A6F6;
  --chart-series-3: #CDD1FF;
  --chart-series-4: #7A60CF;
  --chart-series-5: #3F7A5B;
  --chart-series-6: #D36A4A;
  --chart-series-7: #B7861B;

  /* Semantic aliases used by later design consolidation passes. */
  --surface-canvas: var(--bg-canvas);
  --surface-chrome: var(--bg-chrome);
  --surface-panel: var(--bg-sidebar);
  --surface-card: var(--bg-card);
  --surface-overlay: var(--bg-overlay);
  --state-hover-bg: var(--fill-hover);
  --state-active-bg: var(--fill-active);
  --state-selected-bg: var(--interactive-selected-bg);
  --state-selected-border: var(--interactive-selected-border);
  --state-selected-fg: var(--interactive-selected-fg);
  --state-focus-border: var(--border-focus);
  --radius-control: var(--r-lg);
  --radius-card: var(--r-xl);
  --radius-pill: var(--r-pill);
  --shadow-surface: var(--shadow-sm);
  --shadow-floating: var(--shadow-lg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   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(var(--accent-rgb), .075);
  --header-fill-hover: rgba(var(--accent-rgb), .065);
  --interactive-press-bg: rgba(26,25,23,.10);
  --interactive-press-fg: var(--text);
  --interactive-press-scale: .98;
  --interactive-selected-bg: rgba(var(--accent-rgb), .085);
  --interactive-selected-border: rgba(var(--accent-rgb), .20);
  --interactive-selected-fg: var(--accent);
  --chrome-active-bg: #F0F1FF;
  --chrome-active-border: var(--accent-quiet-strong);
  --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(var(--accent-rgb), .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 — soft graphite, content-first.
   Page is intentionally darker than dark chrome/topbar: #171A1F on #202329. */
[data-theme="dark"] {
  /* Surfaces — cool neutral graphite, not warm brown */
  --bg-app:     #15171B;
  --bg-canvas:  #202329;
  --page-paper-dark: #171A1F;
  --dark-brand-compose: #A9AEFF;
  --bg-chrome:  #1D2026;
  --bg-sidebar: #202329;
  --bg-card:    #282C34;
  --bg-soft:    rgba(238,241,246,.045);
  --bg-overlay: rgba(5,7,10,.72);
  --surface-muted: rgba(238,241,246,.075);

  /* Fills — quiet graphite highlights for interactions */
  --fill-subtle:   rgba(238,241,246,.045);
  --fill-muted:    rgba(238,241,246,.075);
  --fill-hover:    rgba(238,241,246,.065);
  --fill-active:   rgba(238,241,246,.12);
  --fill-selected: rgba(var(--accent-rgb),.16);
  --header-fill-hover: rgba(var(--accent-rgb),.12);
  --interactive-press-bg: rgba(238,241,246,.13);
  --interactive-press-fg: var(--text);
  --interactive-press-scale: .98;
  --interactive-selected-bg: rgba(var(--accent-rgb), .16);
  --interactive-selected-border: rgba(var(--accent-rgb), .28);
  --interactive-selected-fg: #B7BBFF;
  --chrome-active-bg: #30366A;
  --chrome-active-border: #555CA0;
  --chrome-active-fg: var(--interactive-selected-fg);
  --chrome-active-shadow: inset 0 0 0 1px rgba(183,187,255,.22);
  --interactive-current-bg: color-mix(in srgb, var(--accent) 10%, var(--bg-card));
  --interactive-current-border: color-mix(in srgb, var(--accent) 22%, var(--border));

  /* Borders — low-noise graphite structure */
  --border:        #373D47;
  --border-strong: #4B5360;
  --border-focus:  rgba(var(--accent-rgb),.72);
  --focus-outline: #B7BBFF;
  --focus-ring-color: rgba(var(--accent-rgb), .30);
  --focus-ring-color-strong: rgba(183,187,255,.28);
  --focus-ring: 0 0 0 3px var(--focus-ring-color);
  --focus-ring-strong: 0 0 0 4px var(--focus-ring-color-strong);

  /* Text — neutral off-whites with clearer hierarchy */
  --text:          #EEF1F6;
  --text-sec:      #B6BDCA;
  --text-muted:    #8F98A8;
  --text-disabled: #667080;
  --text-on-accent:#FFFFFF;

  /* Editor — darker focused page on a lifted surround */
  --ed-bg:   #202329;
  --ed-text: #EEF1F6;

  /* Chrome surfaces */
  --topbar-bg:      #1D2026;
  --topbar-border:  #373D47;
  --toolbar-bg:     #1D2026;
  --toolbar-border: #373D47;
  --sidebar-bg:     #202329;
  --sidebar-border: #373D47;

  --scrollbar-thumb: rgba(238,241,246,.20);
  --scrollbar-track: rgba(238,241,246,.06);
  --text-faint: var(--text-muted);
  --fill-3: var(--fill-muted);
  --border-subtle: color-mix(in srgb, var(--border) 70%, transparent);
  --ok-text: var(--status-saved);

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

  /* Status — legible but quieter than primary actions */
  --status-saved:  #8BCB96;
  --status-dirty:  #D7A451;
  --status-error:  #EF8C86;
  --danger-soft: rgba(239,140,134,.11);
  --danger-text:   #EF8C86;

  --dark-sidebar-card: #252A32; --dark-sidebar-card-elevated: #282E37; --dark-sidebar-segment-active: var(--chrome-active-bg); --dark-sidebar-badge-text: #C7CEDA;
  --dark-sidebar-action-text: #C2CAD6; --dark-sidebar-primary: var(--accent); --dark-sidebar-primary-hover: var(--accent-hover); --dark-sidebar-disabled-text: #7C8798; --dark-sidebar-locked-text: #8A94A4;
}
}


/* ==== Source section: css/2-reset.css ==== */

@layer reset {
/* ═══════════════════════════════════════════════════════════════════════════
   COMPOSE — Reset
   Surgical, minimal. Only what's needed to normalize.
   ═══════════════════════════════════════════════════════════════════════════ */

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

html {
  height: 100%;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  height: 100%;
  font-family: var(--font-ui);
  background: var(--bg-app);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden; /* Shell manages scroll */
}

/* Remove list semantics only from role-list elements */
[role="list"] { list-style: none; }

/* Focus rings: keyboard only */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus-outline, var(--accent));
  outline-offset: 2px;
  border-radius: var(--r-sm);
  box-shadow: var(--focus-ring);
}

/* Images */
img, svg { display: block; max-width: 100%; }

/* Buttons */
button {
  font: inherit;
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
}

/* Inputs */
input, textarea, select {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
}

/* Links */
a { color: inherit; text-decoration: none; }

/* Scrollbars — webkit */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* Firefox scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }

/* Selection */
::selection {
  background: rgba(var(--accent-rgb), 0.22);
  color: var(--text);
}

/* Hidden attribute */
[hidden] { display: none !important; }

/* Screen-reader-only utility for accessible labels/status text. */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

}