/* ═══════════════════════════════════════════════════════════════════════════
   COMPOSE — Design Tokens v4
   Neutral, professional palette. No warmth, no beige.
   Single UI size (13px). Accent used only for primary actions.
   Inspired by the clean surfaces of Google Docs, Figma, Canva.
   ═══════════════════════════════════════════════════════════════════════════ */

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

  /* Editor fonts (runtime overrides) */
  --ed-body-font:    'Lora', Georgia, serif;
  --ed-heading-font: 'Playfair Display', Georgia, serif;
  --ed-font-size:    18px;
  --ed-line-height:  1.74;
  --ed-line-width:   680px;

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

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

  /* ── Shell dimensions ────────────────────────────────────────────── */
  --topbar-h:  48px;
  --toolbar-h: 40px;
  --sidebar-w: 300px;

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

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT THEME — warm, matches website palette
   ═══════════════════════════════════════════════════════════════════════════ */
:root, [data-theme="light"] {
  /* Surfaces — warm off-whites matching website */
  --bg-canvas:  #F6F4F1;
  --bg-chrome:  #FFFFFF;
  --bg-sidebar: #F6F4F1;
  --bg-card:    #FFFFFF;
  --bg-app:     #F6F4F1;
  --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,.09);

  /* 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:   #F6F4F1;
  --ed-text: #1A1917;

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

  --scrollbar-thumb: rgba(26,25,23,.16);

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

/* ═══════════════════════════════════════════════════════════════════════════
   DARK THEME — near-black, professional, like Figma
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --bg-canvas:  #1E1E1E;
  --bg-chrome:  #2C2C2C;
  --bg-sidebar: #252525;
  --bg-card:    #303030;
  --bg-app:     #181818;
  --bg-overlay: rgba(0,0,0,.65);

  --fill-subtle:   rgba(255,255,255,.06);
  --fill-muted:    rgba(255,255,255,.10);
  --fill-hover:    rgba(255,255,255,.07);
  --fill-active:   rgba(255,255,255,.13);
  --fill-selected: rgba(var(--accent-rgb),.18);

  --border:        #3C3C3C;
  --border-strong: #505050;
  --border-focus:  rgba(var(--accent-rgb),.60);

  --text:          #E8EAED;
  --text-sec:      #9AA0A6;
  --text-muted:    #6E7278;
  --text-disabled: #44474A;
  --text-on-accent:#FFFFFF;

  --ed-bg:   #1E1E1E;
  --ed-text: #E8EAED;

  --topbar-bg:     #2C2C2C;
  --topbar-border: #3C3C3C;
  --toolbar-bg:    #2C2C2C;
  --toolbar-border: #3C3C3C;
  --sidebar-bg:    #252525;
  --sidebar-border: #3C3C3C;

  --scrollbar-thumb: rgba(255,255,255,.20);

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

  --status-saved:  #81C995;
  --status-dirty:  #FFA000;
  --status-error:  #F28B82;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACCENTS — used ONLY for primary actions and active states
   Never decorative. Never on labels. Never on icons at rest.
   ═══════════════════════════════════════════════════════════════════════════ */
:root { --accent:#3356E8; --accent-rgb:51,86,232; }