/*
 * IDF Reader identity: "White City: Sun & Shade".
 * Shared by the website, the FastAPI workspace, the review room and admin.
 *
 * Day (html.theme-light) is sunlit lime plaster with indigo ink; night (the
 * bare :root) is an indigo sky with moonlit slate plaster and amber-lit
 * windows. One sun sits up and to the left, so every cast shadow falls down
 * and to the right. Sun amber is reserved for the primary action, the sun and
 * the live state; grade colours belong to grades only.
 */
:root {
  --font-display: 'Miriam Libre', 'Heebo', 'Segoe UI', system-ui, sans-serif;
  --font-sans: 'Heebo', 'Segoe UI', system-ui, sans-serif;
  --font-primary: var(--font-sans);
  --font-mono: 'SFMono-Regular', Consolas, monospace;

  /* Night */
  --bg-primary: #121729;
  --bg-secondary: #0d1121;
  --bg-elevated: #1a2037;
  --bg-card: #1a2037;
  --bg-card-hover: #212842;
  --text-primary: #eceef5;
  --text-secondary: #bcc1d6;
  --text-muted: #969cb7;
  --sun: #f4b03f;
  --sun-strong: #ffc25c;
  --sun-ink: #1a1a24;
  --sun-text: #f4b03f;
  --sun-glow: #ffd98a;
  --shade: #6a78a6;
  --shade-deep: #0a0d1a;
  --window-lit: #ffcf7a;
  --focus-ring: #ffc25c;
  --border-subtle: #262d48;
  --border-medium: #66709a;
  --border-accent: #8d7440;
  --brand-soft: #262c4b;
  --brand-tint: #4a3f2a;
  --success: #aab4dc;
  --warning: #f2c46e;
  --error: #ff9f9f;
  --success-soft: #262c4b;
  --warning-soft: #3a3120;
  --error-soft: #3c2230;
  --cast-rgb: 3 5 14;

  /* Legacy aliases consumed by older component styles. */
  --accent-primary: var(--sun-text);
  --accent-secondary: var(--sun-text);
  --accent-tertiary: #a9b4e6;
  --accent-contrast: var(--sun-ink);
  --accent-glow: rgb(244 176 63 / 16%);

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-balcony: 28px;

  /* Sun-cast shadows: offset down-right (sun up-left, as in the hero at rest) with a short penumbra. */
  --shadow-sm: 1px 2px 3px rgb(var(--cast-rgb) / 30%);
  --shadow-md: 6px 10px 18px rgb(var(--cast-rgb) / 36%);
  --shadow-xl: 18px 30px 50px rgb(var(--cast-rgb) / 45%);
  /* A hard cast block at the shared sun angle, for panels resting on the plaster
     (balcony-corner heroes). Floating layers keep the soft shadows above. */
  --shadow-cast: 10px 12px 0 rgb(var(--cast-rgb) / 55%);
  --shadow-glow: none;
  --shadow-glow-sm: none;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-press: 140ms;
  --dur-ui: 180ms;

  /* Ribbon band: a thick ink rule, a gap, a thin sun rule (a strip window). */
  --ribbon-ink: #5f6a96;
  --ribbon: linear-gradient(var(--ribbon-ink) 0 0) top / 100% 3px no-repeat,
            linear-gradient(var(--sun) 0 0) 0 6px / 100% 1px no-repeat;

  color-scheme: dark;
}

html.theme-light, html.admin-ui:not(.theme-dark) {
  /* Day: neutral-cool lime plaster (never cream) */
  --bg-primary: #f3f4f5;
  --bg-secondary: #e9ebee;
  --bg-elevated: #fbfbfc;
  --bg-card: #fbfbfc;
  --bg-card-hover: #eff1f3;
  --text-primary: #1c2340;
  --text-secondary: #434b6b;
  --text-muted: #5b6382;
  --sun: #f0a62b;
  --sun-strong: #e8951a;
  --sun-ink: #1c2340;
  --sun-text: #8e5300;
  --sun-glow: #ffd98a;
  --shade: #6a78a6;
  --shade-deep: #2c3561;
  --window-lit: #f0a62b;
  --focus-ring: #3b4bb0;
  --border-subtle: #dfe1e6;
  --border-medium: #80869a;
  --border-accent: #d69a3a;
  --brand-soft: #fcefd4;
  --brand-tint: #f8dca3;
  --success: #2c3561;
  --warning: #8a5410;
  --error: #b3303d;
  --success-soft: #e6e9f6;
  --warning-soft: #fbefd9;
  --error-soft: #f9e3e5;
  --cast-rgb: 44 53 97;
  --ribbon-ink: #1c2340;
  --accent-tertiary: #3b4bb0;
  --accent-glow: rgb(240 166 43 / 18%);
  --shadow-sm: 1px 2px 3px rgb(var(--cast-rgb) / 10%);
  --shadow-md: 6px 10px 18px rgb(var(--cast-rgb) / 13%);
  --shadow-xl: 18px 30px 50px rgb(var(--cast-rgb) / 18%);
  --shadow-cast: 10px 12px 0 rgb(var(--cast-rgb) / 12%);
  color-scheme: light;
}

:root, html.theme-light, html.admin-ui {
  --ink-900: var(--bg-primary);
  --ink-850: var(--bg-secondary);
  --ink-800: var(--bg-card);
  --ink-700: var(--brand-soft);
  --ink-fg: var(--text-primary);
  --ink-muted: var(--text-muted);
  --ink-line: var(--border-subtle);
  --ink-line-strong: var(--border-medium);
  --surface-2: var(--bg-secondary);
  --surface-3: var(--bg-primary);
}

body { font-family: var(--font-sans); font-feature-settings: 'tnum' 0; }
body, .theme-light body { background: var(--bg-primary); color: var(--text-primary); }
::selection { background: var(--brand-tint); color: var(--text-primary); }
input, textarea { caret-color: var(--sun-text); }
a { text-underline-offset: .22em; text-decoration-thickness: from-font; }
button, input, select, textarea { font-family: inherit; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; }
.tabular, [data-numeric] { font-variant-numeric: tabular-nums; }

/* Scrollbars wear the palette. */
* { scrollbar-color: var(--border-medium) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-medium); border-radius: 10px; border: 3px solid var(--bg-primary); }
::-webkit-scrollbar-track { background: transparent; }

/* Buttons */
.btn {
  border-radius: var(--radius-md);
  font-weight: 600;
  transition: background-color var(--dur-ui) ease, border-color var(--dur-ui) ease, color var(--dur-ui) ease, transform var(--dur-press) var(--ease-out);
}
.btn:active:not(:disabled) { transform: scale(.97); }
.btn-primary, .btn-nav-cta, .cookie-button.primary {
  background: var(--sun);
  color: var(--sun-ink);
  border-color: transparent;
  box-shadow: none;
}
.btn-primary:hover:not(:disabled), .btn-nav-cta:hover, .cookie-button.primary:hover {
  background: var(--sun-strong);
  color: var(--sun-ink);
  filter: none;
  box-shadow: none;
}
.btn-secondary, .btn-ghost, .btn-outline {
  background: transparent;
  border: 1px solid var(--border-medium);
  color: var(--text-primary);
  box-shadow: none;
}
.btn-secondary:hover, .btn-ghost:hover, .btn-outline:hover {
  background: var(--brand-soft);
  color: var(--text-primary);
  border-color: var(--border-accent);
}
.theme-toggle { border-radius: var(--radius-md); color: var(--text-secondary); background: transparent; border-color: var(--border-medium); }
.brand-logo, .login-logo { box-shadow: none; }

/* The ribbon band: the identity mark shared by site nav, app rail and PDFs. */
.ribbon-band { background: var(--ribbon); padding-top: 12px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}