/* ===========================================================================
   Modern theme — the default aesthetic (ADR 0010).

   Design language referenced from Tailwind Plus "Radiant": clean, generous
   spacing, expressive-but-restrained headings, tasteful gradient accents, soft
   elevation, bento composition. This layer consumes the LIVE token variables
   (colours + --radius / --type-scale / --space-scale) that base.html emits per
   instance from BrandSettings — it never hard-codes a dial. It adds the Modern
   *character* on top: things that are not client dials.

   Load order: main.css (contract + components) → theme.css (this) → base.html
   inline :root (the instance's live token values). Dark-mode blocks below use a
   higher-specificity selector so they still win over that inline :root.
   =========================================================================== */

:root {
  --modern-ring: color-mix(in oklab, var(--color-primary) 12%, transparent);
  --modern-hairline: color-mix(in oklab, var(--color-border) 70%, transparent);
}

/* Subtle brand wash in the top-right — a quiet Radiant-style backdrop. */
body {
  background:
    radial-gradient(55rem 55rem at 100% -10%, color-mix(in oklab, var(--color-accent) 8%, transparent), transparent 60%),
    var(--color-surface);
}

h1, h2, h3 { font-weight: var(--heading-weight, 700); }

/* Gradient accent for eyebrows / highlighted words (used sparingly). */
.text-gradient {
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Bento grid — a Radiant hallmark; responsive, gutter follows the spacing system. */
.bento { display: grid; gap: var(--gutter); grid-template-columns: repeat(1, 1fr); }
@media (min-width: 640px)  { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .bento { grid-template-columns: repeat(3, 1fr); } }

/* Modern elevates cards a touch more softly than the shared default. */
.card { box-shadow: 0 1px 2px rgba(2, 6, 23, 0.04), 0 8px 24px -12px rgba(2, 6, 23, 0.12); }

/* --- Dark mode: derived from the brand tokens (ADR 0008 §3) -----------------
   Higher specificity than base.html's plain `:root`, so these win regardless of
   source order. Brand primary is lifted for contrast; surface/text/border become
   a calm neutral-dark so the brand colour still reads as the brand. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-surface: #0d1117;
    --color-text: #e6e8ee;
    --color-muted: #9aa4b2;
    --color-border: #232a35;
    --color-primary: color-mix(in oklab, var(--color-primary) 65%, #ffffff);
  }
}
:root[data-theme="dark"] {
  --color-surface: #0d1117;
  --color-text: #e6e8ee;
  --color-muted: #9aa4b2;
  --color-border: #232a35;
  --color-primary: color-mix(in oklab, var(--color-primary) 65%, #ffffff);
}

/* --- Motion respects the user's system preference (ADR 0007/0008) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- System accessibility preferences: honour them, no widget (ADR 0008 §4) --- */
@media (prefers-contrast: more) {
  :root { --color-border: color-mix(in oklab, var(--color-text) 40%, var(--color-border)); }
  a:not(.btn) { text-decoration: underline; }
  .card { border-width: 2px; }
}
@media (forced-colors: active) {
  .btn { border: 1px solid ButtonText; }
  a:focus-visible, button:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
}