/*
 * The Board - design tokens.
 * Colours live in the light and dark blocks; sizes, radii, spacing and fonts are shared.
 * Modules use these tokens and never hard-coded colours (subject colours are data).
 *
 * Theme selection: <html data-theme="light|dark"> is set by theme-init.js before first paint.
 * When the attribute is missing (script blocked), the OS preference decides.
 */

/* ---- Shared (theme independent) ---- */
:root {
  --tb-font: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Noto Color Emoji";
  --tb-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --tb-radius-sm: 10px;
  --tb-radius: 14px;
  --tb-radius-lg: 22px;

  --tb-space-1: 0.25rem;
  --tb-space-2: 0.5rem;
  --tb-space-3: 0.75rem;
  --tb-space-4: 1rem;
  --tb-space-5: 1.5rem;
  --tb-space-6: 2.5rem;

  --tb-target: 2.75rem; /* 44px minimum touch target */
  --tb-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --tb-header-height: 3.75rem;
}

/* ---- Light (also the default when nothing is set) ---- */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  --tb-bg: #fbf7f0;
  --tb-surface: #ffffff;
  --tb-surface-2: #f4eee3;
  --tb-border: #e2d8c6;
  --tb-border-strong: #8c8272;
  --tb-text: #2b2535;
  --tb-text-muted: #403a4d;

  --tb-primary: #5a45d4;
  --tb-primary-hover: #4a36bf;
  --tb-primary-soft: #ece8fc;
  --tb-primary-contrast: #ffffff;
  --tb-danger: #c42b3a;
  --tb-danger-contrast: #ffffff;
  --tb-warning: #9c5400;
  --tb-success: #1b7a46;
  --tb-info: #1a64b0;
  --tb-focus: #1f5fe0;
  --tb-overlay: rgba(43, 37, 53, 0.55);
  --tb-shadow: 0 1px 2px rgba(70, 45, 10, 0.06), 0 8px 22px rgba(70, 45, 10, 0.09);

  /* Schedule. School time is plain; break is striped in gold; outside the school day is a darker
     grey and hatched. Base and stripe colours are for a repeating-linear-gradient and differ by at
     least 1.5:1. The three day tokens are light translucent overlays that sit on top of the area
     shading; muted text stays at 4.5:1 or better over every combination (see ui-theme.test.mjs). */
  --tb-slot-school: #ffffff;
  --tb-slot-break: #ebc76b;
  --tb-slot-break-stripe: #fff9e3;
  --tb-slot-outside: #bbb4a3;
  --tb-slot-outside-stripe: #e6e1d4;
  --tb-day-holiday: rgba(233, 90, 150, 0.14);
  --tb-day-out-of-term: rgba(120, 128, 146, 0.16);
  --tb-today: rgba(90, 69, 212, 0.1);
  --tb-grid-line: #eee6d8;
  --tb-grid-line-strong: #d6cab4;
  --tb-over: #a94d00;
  --tb-remaining: #c62828;
  --tb-done: #1b7a46;
}

/* ---- Dark ---- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --tb-bg: #15141c;
  --tb-surface: #1f1e29;
  --tb-surface-2: #2a2936;
  --tb-border: #3a3949;
  --tb-border-strong: #8f8da6;
  --tb-text: #f2eff8;
  --tb-text-muted: #d6d3e4;

  --tb-primary: #9c8cff;
  --tb-primary-hover: #b3a7ff;
  --tb-primary-soft: #35316a;
  --tb-primary-contrast: #16112f;
  --tb-danger: #ff7a85;
  --tb-danger-contrast: #2d0a10;
  --tb-warning: #f7b544;
  --tb-success: #5dd694;
  --tb-info: #7db8ff;
  --tb-focus: #a8c7ff;
  --tb-overlay: rgba(6, 5, 12, 0.7);
  --tb-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 10px 26px rgba(0, 0, 0, 0.4);

  --tb-slot-school: #2a2936;
  --tb-slot-break: #66511a;
  --tb-slot-break-stripe: #43360f;
  --tb-slot-outside: #080710;
  --tb-slot-outside-stripe: #34334a;
  --tb-day-holiday: rgba(244, 114, 182, 0.12);
  --tb-day-out-of-term: rgba(6, 6, 10, 0.38);
  --tb-today: rgba(156, 140, 255, 0.1);
  --tb-grid-line: #3a3950;
  --tb-grid-line-strong: #55546e;
  --tb-over: #ffa64d;
  --tb-remaining: #ff7b7b;
  --tb-done: #5dd694;
}

/* ---- Dark when the OS asks for it and no theme attribute is set ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    --tb-bg: #15141c;
    --tb-surface: #1f1e29;
    --tb-surface-2: #2a2936;
    --tb-border: #3a3949;
    --tb-border-strong: #8f8da6;
    --tb-text: #f2eff8;
    --tb-text-muted: #d6d3e4;

    --tb-primary: #9c8cff;
    --tb-primary-hover: #b3a7ff;
    --tb-primary-soft: #35316a;
    --tb-primary-contrast: #16112f;
    --tb-danger: #ff7a85;
    --tb-danger-contrast: #2d0a10;
    --tb-warning: #f7b544;
    --tb-success: #5dd694;
    --tb-info: #7db8ff;
    --tb-focus: #a8c7ff;
    --tb-overlay: rgba(6, 5, 12, 0.7);
    --tb-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 10px 26px rgba(0, 0, 0, 0.4);

    --tb-slot-school: #2a2936;
    --tb-slot-break: #66511a;
    --tb-slot-break-stripe: #43360f;
    --tb-slot-outside: #080710;
    --tb-slot-outside-stripe: #34334a;
    --tb-day-holiday: rgba(244, 114, 182, 0.12);
    --tb-day-out-of-term: rgba(6, 6, 10, 0.38);
    --tb-today: rgba(156, 140, 255, 0.1);
    --tb-grid-line: #3a3950;
    --tb-grid-line-strong: #55546e;
    --tb-over: #ffa64d;
    --tb-remaining: #ff7b7b;
    --tb-done: #5dd694;
  }
}