/* ============================================================
   Aether Studio — design tokens
   Every colour, size and motion value in the app resolves here.
   ============================================================ */

:root {
  /* ---- accent (overwritten at runtime by state.applyTheme) ---- */
  --accent: #5b8cff;
  --accent-rgb: 91, 140, 255;
  --accent-soft: rgba(91, 140, 255, 0.14);
  --accent-line: rgba(91, 140, 255, 0.45);
  --accent-ink: #ffffff;

  /* ---- typography ---- */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
               "Liberation Mono", monospace;

  --fs-micro: 10px;
  --fs-tiny: 11px;
  --fs-small: 12px;
  --fs-base: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;

  --lh-tight: 1.15;
  --lh-base: 1.45;

  --fw-regular: 450;
  --fw-medium: 550;
  --fw-bold: 650;

  --tracking-wide: 0.06em;
  --tracking-caps: 0.09em;

  /* ---- spacing scale ---- */
  --s0: 0px;
  --s1: 2px;
  --s2: 4px;
  --s3: 6px;
  --s4: 8px;
  --s5: 12px;
  --s6: 16px;
  --s7: 20px;
  --s8: 24px;
  --s9: 32px;
  --s10: 48px;

  /* ---- radii ---- */
  --radius: 8px;
  --r-xs: 3px;
  --r-sm: calc(var(--radius) * 0.5);
  --r-md: var(--radius);
  --r-lg: calc(var(--radius) * 1.5);
  --r-full: 999px;

  /* ---- chrome dimensions ---- */
  --topbar-h: 46px;
  --optionsbar-h: 42px;
  --statusbar-h: 26px;
  --rail-w: 54px;
  --dock-w: 288px;
  --dock-w-min: 220px;
  --dock-w-max: 460px;

  /* ---- motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 90ms;
  --t-base: 160ms;
  --t-slow: 280ms;

  /* ---- z-index ladder ---- */
  --z-canvas: 1;
  --z-overlay: 10;
  --z-dock: 20;
  --z-chrome: 30;
  --z-flyout: 60;
  --z-modal: 80;
  --z-toast: 90;
  --z-tooltip: 95;
  --z-drag: 100;
}

/* =============================== DARK (default) =============================== */
:root,
:root[data-theme="dark"] {
  --bg-app:      #0a0a0d;
  --bg-chrome:   #101014;
  --bg-panel:    #16161b;
  --bg-raised:   #1d1d24;
  --bg-input:    #202028;
  --bg-hover:    #26262f;
  --bg-active:   #2e2e39;
  --bg-canvas:   #08080a;
  --bg-scrim:    rgba(4, 4, 6, 0.68);

  --line:        rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.13);
  --line-bright: rgba(255, 255, 255, 0.22);

  --ink:         #e9e9f0;
  --ink-dim:     #9c9cab;
  --ink-faint:   #62626f;
  --ink-ghost:   #3f3f4a;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.45), 0 1px 3px rgba(0,0,0,0.4);
  --shadow-lg: 0 18px 48px rgba(0,0,0,0.62), 0 2px 8px rgba(0,0,0,0.5);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.045);

  --ok:   #3ecf8e;
  --warn: #f5a524;
  --err:  #f0546a;
  --info: #58a6ff;

  color-scheme: dark;
}

:root[data-theme="midnight"] {
  --bg-app:      #05060c;
  --bg-chrome:   #0a0c16;
  --bg-panel:    #0f1220;
  --bg-raised:   #151a2c;
  --bg-input:    #181e33;
  --bg-hover:    #1e2540;
  --bg-active:   #263054;
  --bg-canvas:   #03040a;
  --bg-scrim:    rgba(2, 3, 8, 0.72);
  --line:        rgba(140, 165, 255, 0.09);
  --line-strong: rgba(140, 165, 255, 0.17);
  --line-bright: rgba(140, 165, 255, 0.28);
  --ink:         #e4e9ff;
  --ink-dim:     #96a0c4;
  --ink-faint:   #5c6489;
  --ink-ghost:   #363d5c;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.6);
  --shadow-md: 0 4px 18px rgba(0,0,0,0.55);
  --shadow-lg: 0 20px 52px rgba(0,0,0,0.7);
  --shadow-inset: inset 0 1px 0 rgba(160,180,255,0.05);
  --ok:#41d6a0; --warn:#ffb648; --err:#ff5f7a; --info:#63b3ff;
  color-scheme: dark;
}

:root[data-theme="graphite"] {
  --bg-app:      #17181a;
  --bg-chrome:   #1d1e21;
  --bg-panel:    #232427;
  --bg-raised:   #2a2b2f;
  --bg-input:    #2e3034;
  --bg-hover:    #35373c;
  --bg-active:   #3e4046;
  --bg-canvas:   #121314;
  --bg-scrim:    rgba(10, 10, 12, 0.65);
  --line:        rgba(255,255,255,0.075);
  --line-strong: rgba(255,255,255,0.14);
  --line-bright: rgba(255,255,255,0.24);
  --ink:         #ececed;
  --ink-dim:     #a4a5a8;
  --ink-faint:   #6d6e72;
  --ink-ghost:   #4a4b4f;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.38);
  --shadow-lg: 0 18px 44px rgba(0,0,0,0.5);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.05);
  --ok:#4fd18f; --warn:#f0ad3e; --err:#ef5f72; --info:#5fa8f5;
  color-scheme: dark;
}

/* =============================== LIGHT =============================== */
:root[data-theme="light"] {
  --bg-app:      #ececed;
  --bg-chrome:   #f7f7f8;
  --bg-panel:    #ffffff;
  --bg-raised:   #ffffff;
  --bg-input:    #f1f1f3;
  --bg-hover:    #e9e9ec;
  --bg-active:   #dedee3;
  --bg-canvas:   #d8d8dc;
  --bg-scrim:    rgba(20, 20, 26, 0.32);

  --line:        rgba(0, 0, 0, 0.085);
  --line-strong: rgba(0, 0, 0, 0.16);
  --line-bright: rgba(0, 0, 0, 0.3);

  --ink:         #15161a;
  --ink-dim:     #61636b;
  --ink-faint:   #8e9098;
  --ink-ghost:   #b8bac0;

  --shadow-sm: 0 1px 2px rgba(16,18,24,0.09);
  --shadow-md: 0 4px 14px rgba(16,18,24,0.12), 0 1px 2px rgba(16,18,24,0.08);
  --shadow-lg: 0 18px 44px rgba(16,18,24,0.18), 0 2px 6px rgba(16,18,24,0.1);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.9);

  --ok:   #16a06a;
  --warn: #b9760a;
  --err:  #d33a52;
  --info: #2b7fe0;

  color-scheme: light;
}

:root[data-theme="paper"] {
  --bg-app:      #e8e4dc;
  --bg-chrome:   #f4f1ea;
  --bg-panel:    #fbf9f4;
  --bg-raised:   #ffffff;
  --bg-input:    #f2efe7;
  --bg-hover:    #eae6dc;
  --bg-active:   #ded9cc;
  --bg-canvas:   #d5d0c4;
  --bg-scrim:    rgba(40, 34, 24, 0.3);
  --line:        rgba(60, 48, 30, 0.11);
  --line-strong: rgba(60, 48, 30, 0.2);
  --line-bright: rgba(60, 48, 30, 0.34);
  --ink:         #241f18;
  --ink-dim:     #6b6154;
  --ink-faint:   #978d7d;
  --ink-ghost:   #bdb4a5;
  --shadow-sm: 0 1px 2px rgba(60,48,30,0.1);
  --shadow-md: 0 4px 14px rgba(60,48,30,0.13);
  --shadow-lg: 0 18px 44px rgba(60,48,30,0.2);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.8);
  --ok:#3f8f5e; --warn:#a9761a; --err:#c04a44; --info:#3f74a8;
  color-scheme: light;
}

/* =============================== MODIFIERS =============================== */
:root[data-density="compact"] {
  --topbar-h: 40px; --optionsbar-h: 36px; --statusbar-h: 22px;
  --rail-w: 46px; --dock-w: 258px;
  --fs-base: 12px; --fs-small: 11px; --fs-tiny: 10px;
}
:root[data-density="spacious"] {
  --topbar-h: 54px; --optionsbar-h: 48px; --statusbar-h: 30px;
  --rail-w: 62px; --dock-w: 320px;
  --fs-base: 14px; --fs-small: 13px;
}

:root[data-contrast="high"] {
  --line: rgba(255,255,255,0.2);
  --line-strong: rgba(255,255,255,0.34);
  --ink-dim: #c2c2cf;
  --ink-faint: #8d8d9c;
}
:root[data-theme="light"][data-contrast="high"] {
  --line: rgba(0,0,0,0.22);
  --line-strong: rgba(0,0,0,0.38);
  --ink-dim: #3a3c44;
  --ink-faint: #5c5e68;
}

:root[data-motion="off"] * {
  animation-duration: 0.001ms !important;
  transition-duration: 0.001ms !important;
}

@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="on"]) * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}