/* justout template kit — tokens
   Theme a site by overriding these four hooks after this file:
     --accent   brand / solid / selected tab
     --bg       page background
     --ink      primary text
     --font     display face (headings, brand)
   Optional companions: --font-ui, --radius, --on-accent.
   Hex is declared first; oklch follows inside @supports.
*/

:root {
  color-scheme: light;

  /* Theme hooks */
  --accent: #3D2A4A;
  --bg: #F3E6D0;
  --ink: #2A2118;
  --font: Georgia, "Palatino Linotype", Palatino, "Times New Roman", serif;

  /* Optional companions */
  --font-ui: "Segoe UI", system-ui, -apple-system, sans-serif;
  --radius: 14px;
  --tap: 44px;
  --max: 1100px;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* Derived surfaces (hex fallbacks, then color-mix) */
  --card: #FFF8EE;
  --bg-2: #E4CBA6;
  --soft: #5C4A38;
  --line: #C9B090;
  --hero: #FFF3D6;
  --on-accent: #FFF3D6;
  --ok: #2C5A3A;
  --danger: #8B3A2A;
  --shadow: 0 2px 0 color-mix(in srgb, var(--ink) 18%, transparent);

  /* Type — major second 1.125 from 16px body */
  --fs-xs: 14.22px;
  --fs-body: 16px;
  --fs-md: 18px;
  --fs-lg: 20.25px;
  --fs-xl: 22.78px;
  --lh: 1.35;
  --lh-tight: 1.2;

  /* Space — 4/8-pt (Carbon-style 2x multiples) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 40px;
  --s-8: 48px;
  --s-9: 64px;
}

@supports (color: color-mix(in srgb, black 50%, white)) {
  :root {
    --card: color-mix(in srgb, var(--bg) 55%, white);
    --bg-2: color-mix(in srgb, var(--bg) 78%, var(--ink));
    --soft: color-mix(in srgb, var(--ink) 72%, var(--bg));
    --line: color-mix(in srgb, var(--ink) 28%, var(--bg));
    --hero: color-mix(in srgb, var(--bg) 88%, white);
  }
}

@supports (color: oklch(0 0 0)) {
  :root {
    --accent: oklch(0.322 0.060 310.6);
    --bg: oklch(0.929 0.032 81.0);
    --ink: oklch(0.255 0.021 66.6);
    --card: oklch(0.982 0.015 77.1);
    --bg-2: oklch(0.854 0.057 77.5);
    --soft: oklch(0.423 0.037 66.5);
    --line: oklch(0.771 0.052 73.7);
    --hero: oklch(0.966 0.040 88.2);
    --on-accent: oklch(0.966 0.040 88.2);
    --ok: oklch(0.425 0.074 152.0);
    --danger: oklch(0.456 0.114 32.9);
  }
}

/* Dark theme: set data-theme="dark" on <html>, or follow the OS when unset. */
[data-theme="dark"] {
  color-scheme: dark;
  --accent: #C9B3D6;
  --bg: #16131A;
  --ink: #F3E6D0;
  --card: #211C28;
  --bg-2: #1E1A22;
  --soft: #C9B090;
  --line: #5C4A38;
  --hero: #16131A;
  --on-accent: #16131A;
  --ok: #8FCB9A;
  --danger: #E09A86;
}

@supports (color: oklch(0 0 0)) {
  [data-theme="dark"] {
    --accent: oklch(0.790 0.048 310.6);
    --bg: oklch(0.200 0.016 310.0);
    --ink: oklch(0.929 0.032 81.0);
    --card: oklch(0.245 0.020 310.0);
    --bg-2: oklch(0.225 0.016 310.0);
    --soft: oklch(0.771 0.052 73.7);
    --line: oklch(0.423 0.037 66.5);
    --hero: oklch(0.200 0.016 310.0);
    --on-accent: oklch(0.200 0.016 310.0);
    --ok: oklch(0.780 0.080 152.0);
    --danger: oklch(0.760 0.080 32.9);
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --accent: #C9B3D6;
    --bg: #16131A;
    --ink: #F3E6D0;
    --card: #211C28;
    --bg-2: #1E1A22;
    --soft: #C9B090;
    --line: #5C4A38;
    --hero: #16131A;
    --on-accent: #16131A;
    --ok: #8FCB9A;
    --danger: #E09A86;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh);
  background: radial-gradient(1200px 700px at 50% -8%, var(--bg), var(--bg-2));
  color: var(--ink);
}

a { color: var(--accent); }
a:hover { text-decoration: underline; }

h1, h2, h3, .brand {
  font-family: var(--font);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
}

h1 { font-size: var(--fs-lg); margin: 0 0 var(--s-1); }
h2 { font-size: var(--fs-md); margin: 0 0 var(--s-2); color: var(--accent); }
h3 { font-size: var(--fs-body); margin: 0 0 var(--s-2); }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}