/*
 * AD brand tokens (from Stile-promting-ai/tokens/tokens.css), plus the role aliases this app's components use.
 * Theme: data-theme="light" | "dark" on <html>; no attribute = follow the system.
 */

@font-face {
  font-family: "Anybody";
  src: url("../fonts/anybody-normal-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-stretch: 50% 150%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/sourceserif4-normal-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/sourceserif4-italic-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --blue-300: #5AAAF5;
  --blue-400: #45A0F0;
  --blue-500: #1D87EC;
  --blue-700: #0B63C4;

  --bg: #EEF1F4;
  --surface: #E3E8EE;
  --ink: #0D1B2A;
  --muted: #4A5868;
  --rule: #C5CED8;
  --field-border: #6B7A8C;
  --accent: var(--blue-500);      /* only as a solid fill, with --on-accent text */
  --accent-hover: var(--blue-400);
  --on-accent: #0D1B2A;
  --link: var(--blue-700);
  --focus: var(--blue-700);
  --danger: #B3261E;
  --success: #1E7A46;
  --warning: #8A5A00;
  --grid-line: rgb(13 27 42 / 0.06);
  --backdrop: rgb(5 11 19 / 0.55);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0A1420;
  --surface: #111E2D;
  --ink: #E6ECF2;
  --muted: #9AA8B8;
  --rule: #22324A;
  --field-border: #7C8DA2;
  --on-accent: #04101C;
  --link: var(--blue-300);
  --focus: var(--blue-300);
  --danger: #FF8A80;
  --success: #5CC98A;
  --warning: #F2B544;
  --grid-line: rgb(230 236 242 / 0.05);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0A1420;
    --surface: #111E2D;
    --ink: #E6ECF2;
    --muted: #9AA8B8;
    --rule: #22324A;
    --field-border: #7C8DA2;
    --on-accent: #04101C;
    --link: var(--blue-300);
    --focus: var(--blue-300);
    --danger: #FF8A80;
    --success: #5CC98A;
    --warning: #F2B544;
    --grid-line: rgb(230 236 242 / 0.05);
    color-scheme: dark;
  }
}

:root {
  --font-display: "Anybody", "Arial Narrow", Arial, sans-serif;
  --font-text: "Source Serif 4", Georgia, "Times New Roman", serif;
  --stretch-condensed: 62%;
  --stretch-title: 75%;
  --stretch-ui: 100%;

  --fs-caption: 0.8125rem;  /* 13px */
  --fs-ui: 0.9375rem;       /* 15px */
  --fs-body: 1.0625rem;     /* 17px */
  --fs-read: 1.1875rem;     /* 19px */

  --radius: 4px;
  --radius-media: 8px;
  --ease-out: cubic-bezier(0.2, 0.7, 0.1, 1);
  --duration-ui: 160ms;
  --duration-move: 260ms;

  /* ---- Aliases used by the app's components (keep them pointing at brand roles) ---- */
  --text: var(--ink);
  --text-2: var(--muted);
  --text-3: var(--muted);
  --border: var(--rule);
  --border-strong: var(--field-border);
  --surface-2: var(--surface);
  --bg-subtle: var(--surface);
  --surface-hover: color-mix(in oklab, var(--surface) 70%, var(--bg));
  --card: var(--bg);
  --accent-text: var(--link);
  --accent-strong: var(--ink);
  --accent-soft: var(--surface);
  --accent-ring: var(--focus);
  --btn-primary-bg: var(--accent);
  --btn-primary-hover: var(--accent-hover);
  --btn-primary-text: var(--on-accent);
  --info: var(--link);
  --success-soft: var(--surface);
  --warning-soft: var(--surface);
  --danger-soft: var(--surface);
  --info-soft: var(--surface);
  --radius-sm: var(--radius);
  --radius-lg: var(--radius-media);
  --shadow-sm: none;
  --shadow: none;
  --shadow-lg: none;
  --font: var(--font-display);
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-xs: var(--fs-caption);
  --fs-sm: 0.875rem;
  --fs-base: var(--fs-ui);
  --fs-md: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --sidebar-w: 15rem;
  --topbar-h: 4.25rem;
  --content-max: 90rem;
  --gutter: clamp(1.125rem, 3vw, 2.5rem);
  --ease: var(--ease-out);
  --dur: var(--duration-ui);
}