/* Sky Castle Hub design tokens. Components use these semantic names only; no component hard-codes a colour.
   Themes: light is the default; dark applies for data-theme="dark", or for "system"/unset when the OS prefers dark. */
:root {
  color-scheme: light;

  /* surfaces and lines */
  --color-bg: #f4f5f7;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-surface-sunken: #eef0f3;
  --color-sidebar: #1b2433;
  --color-sidebar-text: #c6cedb;
  --color-sidebar-text-strong: #ffffff;
  --color-sidebar-hover: #263147;
  --color-sidebar-active: #2f3d5a;
  --color-border: #d9dde4;
  --color-border-strong: #bcc3cf;

  /* text */
  --color-text: #1a2230;
  --color-text-secondary: #475266;
  --color-text-muted: #6b7587;
  --color-text-on-accent: #ffffff;

  /* brand and status */
  --color-accent: #2c5aa0;
  --color-accent-hover: #234a85;
  --color-accent-soft: #e4ecf8;
  --color-success: #17692f;
  --color-success-soft: #e0f3e6;
  --color-warning: #8a5300;
  --color-warning-soft: #fdf0d5;
  --color-danger: #a4252b;
  --color-danger-soft: #fbe4e4;
  --color-info: #1d5b8f;
  --color-info-soft: #e0eefa;
  --color-focus: #1f6fd1;

  --shadow-raised: 0 1px 2px rgba(20, 30, 50, 0.06);
  --shadow-overlay: 0 8px 24px rgba(20, 30, 50, 0.18);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #10151e;
    --color-surface: #171e2a;
    --color-surface-raised: #1d2533;
    --color-surface-sunken: #121823;
    --color-sidebar: #0c1119;
    --color-sidebar-text: #aab4c5;
    --color-sidebar-text-strong: #f2f5fa;
    --color-sidebar-hover: #182130;
    --color-sidebar-active: #22304a;
    --color-border: #2b3547;
    --color-border-strong: #3d4a61;
    --color-text: #e6eaf2;
    --color-text-secondary: #b0b9c9;
    --color-text-muted: #8893a7;
    --color-text-on-accent: #0c1119;
    --color-accent: #7ba5e6;
    --color-accent-hover: #98b8ee;
    --color-accent-soft: #1e2d46;
    --color-success: #5fcf84;
    --color-success-soft: #14301f;
    --color-warning: #f0b955;
    --color-warning-soft: #392a0d;
    --color-danger: #f28b8f;
    --color-danger-soft: #3b1a1c;
    --color-info: #7bbcf0;
    --color-info-soft: #14283b;
    --color-focus: #8ab8f5;
    --shadow-raised: none;
    --shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.5);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #10151e;
  --color-surface: #171e2a;
  --color-surface-raised: #1d2533;
  --color-surface-sunken: #121823;
  --color-sidebar: #0c1119;
  --color-sidebar-text: #aab4c5;
  --color-sidebar-text-strong: #f2f5fa;
  --color-sidebar-hover: #182130;
  --color-sidebar-active: #22304a;
  --color-border: #2b3547;
  --color-border-strong: #3d4a61;
  --color-text: #e6eaf2;
  --color-text-secondary: #b0b9c9;
  --color-text-muted: #8893a7;
  --color-text-on-accent: #0c1119;
  --color-accent: #7ba5e6;
  --color-accent-hover: #98b8ee;
  --color-accent-soft: #1e2d46;
  --color-success: #5fcf84;
  --color-success-soft: #14301f;
  --color-warning: #f0b955;
  --color-warning-soft: #392a0d;
  --color-danger: #f28b8f;
  --color-danger-soft: #3b1a1c;
  --color-info: #7bbcf0;
  --color-info-soft: #14283b;
  --color-focus: #8ab8f5;
  --shadow-raised: none;
  --shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* Scale and structure tokens are theme-independent. */
:root {
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-display: 2.25rem;
  --leading: 1.5;

  --sidebar-width: 15rem;
  --sidebar-width-collapsed: 3.75rem;
  --topbar-height: 3.25rem;
  --content-max: 76rem;

  /* tables and financial figures */
  --table-text: var(--text-sm);
  --table-row-pad: 0.5rem 0.75rem;
  --figure-features: "tnum" 1, "lnum" 1;
}

/* Workbook preview: a worksheet reads like paper in both themes, because the archived workbooks' own fills (navy headers, grey bands, PASS/FAIL colours)
   are designed for a white sheet. These are fixed on purpose and are not part of the light/dark semantic set. */
:root {
  --sheet-paper: #ffffff;
  --sheet-white: #ffffff;
  --sheet-ink: #1a1a1a;
  --sheet-grid: #d4d8de;
  --sheet-navy: #1f3864;
  --sheet-grey: #ededed;
  --sheet-gold: #7f6000;
  --sheet-green: #e2efda;
  --sheet-salmon: #f8cbad;
  --sheet-pass-ink: #375623;
  --sheet-fail-ink: #843c0c;
  --sheet-red: #c00000;
  --sheet-muted: #6b7280;
}