@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;500;600;700&family=Chivo+Mono:wght@400;500;600&display=swap');

/* ============================================================
   muse_opensource_plywood — Design Tokens (V4 Theme)
   v0.4 · 2026-07-09 / 2026-07-23
   Theme: Birch (light #F3E9C9) · Accent: Coral #CE5133 · Type: Comfortaa + Chivo Mono
   Single source of truth. Components read these vars, never raw hex.
   ============================================================ */

:root {

  /* ---- Fonts ------------------------------------------------ */
  --font-display: 'Comfortaa', system-ui, sans-serif;
  --font-ui:      'Comfortaa', system-ui, sans-serif;
  --font-sans:    'Comfortaa', system-ui, sans-serif;
  --font-mono:    'Chivo Mono', ui-monospace, monospace;

  /* ---- Type scale (1.25) ----------------------------------- */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-lg:   1.25rem;   /* 20 */
  --text-xl:   1.5625rem; /* 25 */
  --text-2xl:  1.9375rem; /* 31 */
  --text-3xl:  2.4375rem; /* 39 */
  --leading-body: 1.5;
  --leading-head: 1.2;

  /* ---- Birch neutrals (light theme) ------------------------ */
  --bg-base:        #F3E9C9;  /* pale birch paper — app background   */
  --bg-surface:     #FFFDF6;  /* cards / panels — lighter, pops up   */
  --bg-elevated:    #FFFFFF;  /* modals / popovers / raised          */
  --bg-sunken:      #EDE3C2;  /* wells, inset areas                  */
  --bg-canvas:      #FBFAF6;  /* 3D-preview bg (near-white)         */
  --bg-canvas-edge: #EFEEE7;  /* 3D-preview outer / vignette        */

  --border:        #E4D9B4;
  --border-strong: #D5C594;

  --text:           #2A211C;
  --text-primary:   #2A211C;
  --text-2:         #6E6353;
  --text-secondary: #6E6353;
  --text-muted:     #9A9079;
  --text-on-accent: #FFFFFF;

  /* ---- Coral accent scale (primary = 500) ------------------ */
  --coral-50:  #FCEEE9;
  --coral-100: #F8D8CD;
  --coral-200: #F3BCAA;
  --coral-300: #EC9878;
  --coral-400: #DE7050;
  --coral-500: #CE5133;   /* ← chosen primary accent #CE5133 */
  --coral-600: #B5432A;
  --coral-700: #983720;
  --coral-800: #7A2C19;
  --coral-900: #5C2012;

  --accent:          var(--coral-500);
  --accent-hover:    var(--coral-600);
  --accent-active:   var(--coral-700);
  --accent-soft:     var(--coral-100);  /* selected rows, subtle fills */
  --accent-softer:   var(--coral-50);   /* hover fills                 */
  --accent-text:     var(--coral-700);  /* coral as text/link on birch */
  --accent-contrast: #FFFFFF;

  /* ---- Semantic (distinct hues) ---------------------------- */
  --success: #3C8B5A;
  --warning: #E0A32E;
  --danger:  #B4231D;
  --info:    #3E6B99;   /* slate blue */

  /* ---- Data-viz (nesting sheets / panel groups) ------------ */
  --dv-1: #3E6B99;  --dv1: #3E6B99;
  --dv-2: #4E7A51;  --dv2: #4E7A51;
  --dv-3: #E0A32E;  --dv3: #E0A32E;
  --dv-4: #CE5133;  --dv4: #CE5133;
  --dv-5: #7A5EA8;  --dv5: #7A5EA8;
  --dv-6: #128C86;  --dv6: #128C86;

  /* ---- Radius ---------------------------------------------- */
  --radius-sm: 6px;  --r-sm: 6px;
  --radius-md: 10px; --r-md: 10px;
  --radius-lg: 16px; --r-lg: 16px;
  --radius-full: 999px;

  /* ---- Spacing (4px base, 8px rhythm) ---------------------- */
  --space-0: 0;      --space-1: 4px;   --space-2: 8px;
  --space-3: 12px;   --space-4: 16px;  --space-6: 24px;
  --space-8: 32px;   --space-12: 48px; --space-16: 64px;
  --space-24: 96px;

  /* ---- Elevation ------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(58, 42, 22, 0.06);
  --shadow-md: 0 4px 14px -6px rgba(58, 42, 22, 0.18);
  --sh:        0 4px 14px -6px rgba(58, 42, 22, 0.18);
  --shadow-lg: 0 12px 32px -12px rgba(58, 42, 22, 0.28);
  --card-shadow: 0 1px 3px rgba(58,42,22,.07), 0 6px 16px -10px rgba(58,42,22,.18);

  /* ---- Focus & motion -------------------------------------- */
  --focus-ring: 0 0 0 3px rgba(206, 81, 51, 0.35);
  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Base bindings --------------------------------------- */
  color-scheme: light;
  font-family: var(--font-ui);
  color: var(--text);
  background-color: var(--bg-base);
}

.tnum, [data-dim] { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  :root { --transition: 0ms; }
}

[data-theme="dark"] {
  --bg-base: #1C1A15; --bg-surface: #24211A; --bg-elevated: #2C2820;
  --text-primary: #F3ECD9; --text-secondary: #C4BAA1; --border: #3A3529;
  --accent: var(--coral-400);
}