/* Grahamatic Labs theme tokens v1.0.0
   Owner pick 2026-10-18 (ruling O-279 and the pick recorded on the vault page
   "Grahamatic Labs Brand Theme and Service Names"): Option C, Spruce Studio, colours and effects,
   with the homepage's fonts (Georgia display, Inter interface, the system mono stack).
   Generated by theme-study/source/build_tokens.py from tokens.py. Do not hand-edit; regenerate.
   Each surface serves its own copy and the fonts from its own origin (shared policy: style-src 'self',
   font-src 'self'). No inline styles: set dynamic values with CSS variables from script. */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-4.1-variable.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-4.1-variable-italic.woff2") format("woff2"); }

:root {
  --bg: #f0f4f4;
  --surface: #fdfefe;
  --surface-2: #e2e9ea;
  --ink: #0b2a33;
  --muted: #3a5157;
  --line: #c8d3d5;
  --line-strong: #677c81;
  --accent: #9a4d26;
  --accent-ink: #fffdfb;
  --accent-2: #1d5d69;
  --brand: #0b2a33;
  --brand-ink: #eef5f5;
  --brand-muted: #b2c6c9;
  --accent-on-brand: #e9a275;
  --success: #1c684a;
  --warning: #83560e;
  --danger: #a1372a;
  --focus: #1d5d69;
  --glow-1: rgba(29, 93, 105, 0.1);
  --glow-2: rgba(184, 106, 61, 0.08);
  --shadow: 0 1px 0 rgba(11, 42, 51, .06), 0 10px 24px -16px rgba(11, 42, 51, .20);
  --hero-glow-1: rgba(44, 138, 154, 0.16);
  --hero-glow-2: rgba(217, 132, 79, 0.1);
  --font-display: Georgia, "Times New Roman", serif;
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --display-weight: 500;
  --display-track: -0.05em;
  --display-track-hero: -0.065em;
  --weight-brand: 760;
  --weight-label: 800;
  --hero-size: clamp(2.3rem, 5vw, 4.4rem);
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --blur-glass: 10px;
  --glass-mix: 86%;
  --glow-size: 48rem 32rem;
  --route-h: 2px;
  --ease: cubic-bezier(.25, 1, .5, 1);
  --dur-control: 180ms;
  --dur-card: 220ms;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #08161b;
    --surface: #0e2128;
    --surface-2: #142c34;
    --ink: #e8f0f0;
    --muted: #a6bbbe;
    --line: #213a42;
    --line-strong: #5e7c82;
    --accent: #e69d70;
    --accent-ink: #1a0c04;
    --accent-2: #82c8d2;
    --brand: #0b2a33;
    --brand-ink: #eef5f5;
    --brand-muted: #b2c6c9;
    --accent-on-brand: #e9a275;
    --success: #6bd1a2;
    --warning: #e8b95e;
    --danger: #f4927f;
    --focus: #82c8d2;
    --glow-1: rgba(44, 138, 154, 0.16);
    --glow-2: rgba(217, 132, 79, 0.1);
    --shadow: 0 1px 0 rgba(0, 0, 0, .40), 0 12px 28px -16px rgba(0, 0, 0, .65);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #08161b;
  --surface: #0e2128;
  --surface-2: #142c34;
  --ink: #e8f0f0;
  --muted: #a6bbbe;
  --line: #213a42;
  --line-strong: #5e7c82;
  --accent: #e69d70;
  --accent-ink: #1a0c04;
  --accent-2: #82c8d2;
  --brand: #0b2a33;
  --brand-ink: #eef5f5;
  --brand-muted: #b2c6c9;
  --accent-on-brand: #e9a275;
  --success: #6bd1a2;
  --warning: #e8b95e;
  --danger: #f4927f;
  --focus: #82c8d2;
  --glow-1: rgba(44, 138, 154, 0.16);
  --glow-2: rgba(217, 132, 79, 0.1);
  --shadow: 0 1px 0 rgba(0, 0, 0, .40), 0 12px 28px -16px rgba(0, 0, 0, .65);
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

/* Effects: the research app's glow, blur and gradient, as classes driven by the tokens above. */
.fx-ambient { background:
    radial-gradient(var(--glow-size) at 88% -12%, var(--glow-1), transparent 62%),
    radial-gradient(var(--glow-size) at -8% 112%, var(--glow-2), transparent 62%),
    var(--bg); }
.fx-ambient-brand { background:
    radial-gradient(var(--glow-size) at 92% -8%, var(--hero-glow-1), transparent 60%),
    radial-gradient(var(--glow-size) at 0% 115%, var(--hero-glow-2), transparent 62%),
    var(--brand); color: var(--brand-ink); }
/* Glass only where content passes underneath (a sticky bar, a caption over imagery). */
.fx-glass { background: color-mix(in oklab, var(--surface) var(--glass-mix), transparent);
  -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(140%); backdrop-filter: blur(var(--blur-glass)) saturate(140%); }
.fx-tile { background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 55%, var(--accent-2))); color: var(--accent-ink); }
.fx-route { background-image: linear-gradient(90deg, var(--accent), var(--accent-2)); background-size: 100% var(--route-h);
  background-repeat: no-repeat; background-position: 0 100%; }
.fx-progress { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.fx-halo:focus-visible, .fx-halo.is-focus { outline: 2px solid var(--focus); outline-offset: 2px;
  box-shadow: 0 0 0 6px color-mix(in oklab, var(--focus) 22%, transparent); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .fx-glass { background: var(--surface); }
}
@media (prefers-reduced-transparency: reduce) {
  .fx-glass { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .fx-ambient { background: var(--bg); }
  .fx-ambient-brand { background: var(--brand); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}