/* Elbow First base.css (build/15 sections 1 to 3, 5, 6).
   ONE shared CSS source with components.css; a generator NEVER writes its own
   CSS (build/10 section 1, the What Pitfall 29 defense).
   Tokens are authored hex with their OKLCH reading in the comment (the spec's
   pattern); taste-decision tokens (accent pair, display font) originate in
   content/site.json brand and the generator emits overrides after these
   defaults. Keep the dark blocks in 1.3a and 1.3b IDENTICAL. */

/* ---------- 1.2 Light theme tokens ---------- */
:root {
  /* surfaces (warm, paper-like, not pure white) */
  --ef-bg:            #f7f4ee;  /* oklch(96.4% 0.008 85)  shop paper */
  --ef-surface:       #fffdf8;  /* oklch(98.8% 0.006 85)  card / raised */
  --ef-surface-sunk:  #efe9df;  /* oklch(92.6% 0.012 85)  wells, code, table stripe */
  --ef-border:        #ddd5c6;  /* oklch(87%   0.015 85)  hairlines */
  --ef-border-strong: #92866c;  /* oklch(61%  0.03  85)  emphasized dividers, input
                                   boundaries: 3.27:1 on --ef-bg (verified; the
                                   spec's #b9ad97 measured 2.02, under its own
                                   3:1 line in build/15 1.4) */

  /* ink (warm near-black, never #000) */
  --ef-ink:           #22201b;  /* oklch(23%  0.01 75)  body text */
  --ef-ink-soft:      #4a463d;  /* oklch(40%  0.012 75) secondary text */
  --ef-ink-faint:     #6f695c;  /* oklch(53%  0.014 75) captions, meta (4.5:1 on --ef-bg) */

  /* brand accent: burnt ochre / rust (the "elbow of pipe"; open decision 9) */
  --ef-accent:        #b4531f;  /* oklch(54%  0.14 47)  links, primary action */
  --ef-accent-hover:  #8f3f16;  /* oklch(45%  0.13 45)  hover/active (darker) */
  --ef-accent-weak:   #f2e2d5;  /* oklch(93%  0.03 55)  accent tint fill */
  --ef-on-accent:     #fffdf8;  /* text on accent fills */

  /* secondary: workbench slate-teal (calm, for info/nav accents) */
  --ef-slate:         #2f5d5b;  /* oklch(43% 0.05 190) */
  --ef-slate-weak:    #dfe9e7;

  /* tier colors (calm, muted, NOT gamified; ladder = value climb).
     scouted and fieldtested darkened from the spec draft to clear 4.5:1 on
     their chip fills (verified: 4.77 and 4.82; the draft values measured
     4.43 and 3.92 against build/15 1.4's own table). */
  --ef-tier-scouted:       #6a6457;  /* graphite: "we just spotted this" */
  --ef-tier-scouted-bg:    #ece7dd;
  --ef-tier-researched:    #4a6b86;  /* slate blue: "read up on it" */
  --ef-tier-researched-bg: #e2e9f0;
  --ef-tier-fieldtested:   #5d6b2d;  /* olive/leaf: "we did it, it grew" */
  --ef-tier-fieldtested-bg:#e8ecd6;
  --ef-tier-proven:        #8f3f16;  /* deep rust: the brand, earned at the top */
  --ef-tier-proven-bg:     #f2e2d5;

  /* semantic states */
  --ef-danger:        #a3341f;  /* oklch(47% 0.15 34) YMYL, "distinct not alarm-red" */
  --ef-danger-bg:     #f6e3dc;
  --ef-caution:       #8d5b0e;  /* amber-brown, caution notes (4.8:1 on its
                                   fill, verified; the draft #9a6410 was 4.15) */
  --ef-caution-bg:    #f5e9cf;
  --ef-success:       #3f6b33;  /* in-stock, best-pick, cleared */
  --ef-success-bg:    #e4eddb;
  --ef-info:          #2f5d5b;  /* = slate; tips, "still testing" */
  --ef-info-bg:       #dfe9e7;

  /* focus */
  --ef-focus:         #1a5fb4;  /* high-contrast blue ring, distinct from accent */

  /* ---------- 2.1 type families ---------- */
  --ef-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
                  "Noto Sans", Cantarell, "DejaVu Sans", sans-serif;
  /* display: accessible web font, falls back to the system stack.
     Zero-web-font posture (open decision 9) is one line:
     --ef-font-display: var(--ef-font-sans); */
  --ef-font-display: "Atkinson Hyperlegible Next", var(--ef-font-sans);
  --ef-font-mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono",
                  Menlo, Consolas, monospace;

  /* ---------- 2.2 type scale (fluid, ~1.2 minor third) ---------- */
  --ef-text-xs:   0.78rem;   /* 14px  fine print, disclosure */
  --ef-text-sm:   0.89rem;   /* 16px  meta, captions, chip labels */
  --ef-text-base: 1rem;      /* 18px  body (html font-size 112.5%) */
  --ef-text-lg:   clamp(1.13rem, 1.05rem + 0.4vw, 1.25rem);
  --ef-text-xl:   clamp(1.35rem, 1.2rem + 0.7vw, 1.62rem);
  --ef-text-2xl:  clamp(1.65rem, 1.4rem + 1.2vw, 2.15rem);
  --ef-text-3xl:  clamp(2rem, 1.6rem + 2vw, 2.9rem);

  --ef-leading-tight: 1.2;
  --ef-leading-body:  1.6;
  --ef-weight-normal: 400;
  --ef-weight-medium: 500;
  --ef-weight-bold:   700;
  --ef-measure: 68ch;

  /* ---------- 3.1 spacing, radius, borders, shadow ---------- */
  --ef-space-1: 0.25rem;
  --ef-space-2: 0.5rem;
  --ef-space-3: 0.75rem;
  --ef-space-4: 1rem;
  --ef-space-5: 1.5rem;
  --ef-space-6: 2rem;
  --ef-space-8: 3rem;
  --ef-space-10: 4rem;
  --ef-space-12: 6rem;

  --ef-radius-sm: 4px;
  --ef-radius:    8px;
  --ef-radius-lg: 14px;
  --ef-border-w:  1px;
  --ef-border-w-strong: 2px;

  /* shadows: soft, low, "paper on a bench," never floaty SaaS glow */
  --ef-shadow-sm: 0 1px 2px oklch(23% 0.01 75 / 0.08);
  --ef-shadow:    0 2px 8px oklch(23% 0.01 75 / 0.10);

  /* ---------- 3.2 content widths ---------- */
  --ef-content: 44rem;
  --ef-wide:    68rem;
  --ef-gutter:  clamp(1rem, 5vw, 2.5rem);

  color-scheme: light;
}

/* ---------- 1.3a Dark theme: system preference (unless user forced light).
   Dark is not inverted light: lightness lifted, chroma pulled in, warm
   charcoal ground. KEEP IDENTICAL TO 1.3b. ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ef-bg:            #1a1815;
    --ef-surface:       #232019;
    --ef-surface-sunk:  #14120f;
    --ef-border:        #38332a;
    --ef-border-strong: #706855;  /* 3.21:1 on dark bg (verified; draft #524b3e was 2.05) */

    --ef-ink:           #ece7dc;
    --ef-ink-soft:      #c3bcac;
    --ef-ink-faint:     #9a9384;

    --ef-accent:        #e08b52;
    --ef-accent-hover:  #f0a066;
    --ef-accent-weak:   #3a2a1e;
    --ef-on-accent:     #1a1815;

    --ef-slate:         #6fb4b0;
    --ef-slate-weak:    #22302f;

    --ef-tier-scouted:       #a49c8c;  --ef-tier-scouted-bg:    #2a271f;
    --ef-tier-researched:    #8fb0cd;  --ef-tier-researched-bg: #20272f;
    --ef-tier-fieldtested:   #a9bd66;  --ef-tier-fieldtested-bg:#242819;
    --ef-tier-proven:        #e08b52;  --ef-tier-proven-bg:     #33241a;

    --ef-danger:        #e57a5f;  --ef-danger-bg:  #331d18;
    --ef-caution:       #d29a3a;  --ef-caution-bg: #2e2410;
    --ef-success:       #86b06a;  --ef-success-bg: #1e2717;
    --ef-info:          #6fb4b0;  --ef-info-bg:    #17211f;

    --ef-focus:         #7aa9e8;

    color-scheme: dark;
  }
}

/* ---------- 1.3b Dark theme: explicit toggle. KEEP IDENTICAL TO 1.3a. ---------- */
[data-theme="dark"] {
  --ef-bg:            #1a1815;
  --ef-surface:       #232019;
  --ef-surface-sunk:  #14120f;
  --ef-border:        #38332a;
  --ef-border-strong: #706855;  /* 3.21:1 on dark bg (verified; draft #524b3e was 2.05) */

  --ef-ink:           #ece7dc;
  --ef-ink-soft:      #c3bcac;
  --ef-ink-faint:     #9a9384;

  --ef-accent:        #e08b52;
  --ef-accent-hover:  #f0a066;
  --ef-accent-weak:   #3a2a1e;
  --ef-on-accent:     #1a1815;

  --ef-slate:         #6fb4b0;
  --ef-slate-weak:    #22302f;

  --ef-tier-scouted:       #a49c8c;  --ef-tier-scouted-bg:    #2a271f;
  --ef-tier-researched:    #8fb0cd;  --ef-tier-researched-bg: #20272f;
  --ef-tier-fieldtested:   #a9bd66;  --ef-tier-fieldtested-bg:#242819;
  --ef-tier-proven:        #e08b52;  --ef-tier-proven-bg:     #33241a;

  --ef-danger:        #e57a5f;  --ef-danger-bg:  #331d18;
  --ef-caution:       #d29a3a;  --ef-caution-bg: #2e2410;
  --ef-success:       #86b06a;  --ef-success-bg: #1e2717;
  --ef-info:          #6fb4b0;  --ef-info-bg:    #17211f;

  --ef-focus:         #7aa9e8;

  color-scheme: dark;
}

/* ---------- @font-face: self-hosted variable display font (2.1).
   Self-hosted (never hotlinked: privacy posture); font-display swap; if the
   file is absent the display stack falls back to system with zero breakage. */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/atkinson-hyperlegible-next-var.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- reset (small, purposeful) ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
img, picture, video, svg { display: block; max-width: 100%; }

/* ---------- 2.2 base type ---------- */
html { font-size: 112.5%; }               /* 18px base, respects user zoom */
body {
  font-family: var(--ef-font-sans);
  font-size: var(--ef-text-base);
  line-height: var(--ef-leading-body);
  color: var(--ef-ink);
  background: var(--ef-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 {
  font-family: var(--ef-font-display);
  line-height: var(--ef-leading-tight);
  font-weight: var(--ef-weight-bold);
  color: var(--ef-ink);
  text-wrap: balance;
}
h1 { font-size: var(--ef-text-3xl); letter-spacing: -0.01em; }
h2 { font-size: var(--ef-text-2xl); margin-top: var(--ef-space-8); }
h3 { font-size: var(--ef-text-xl); margin-top: var(--ef-space-6); }
p, li { max-width: var(--ef-measure); }
p { text-wrap: pretty; margin-block: var(--ef-space-4); }
code, pre, .ef-spec { font-family: var(--ef-font-mono); font-size: 0.94em; }
pre { overflow-x: auto; }

/* ---------- 3.2 layout containers ---------- */
.ef-container      { width: min(var(--ef-content), 100% - 2 * var(--ef-gutter)); margin-inline: auto; }
.ef-container-wide { width: min(var(--ef-wide), 100% - 2 * var(--ef-gutter)); margin-inline: auto; }
.ef-card-grid {
  display: grid;
  gap: var(--ef-space-5);
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}
main { padding-block: var(--ef-space-8); }
section + section { margin-top: var(--ef-space-10); }
@media (max-width: 40rem) { section + section { margin-top: var(--ef-space-8); } }

/* ---------- 6 focus, skip link, visually hidden ---------- */
:where(a, button, input, select, textarea, [tabindex], summary, [role="slider"]):focus-visible {
  outline: 3px solid var(--ef-focus);
  outline-offset: 2px;
  border-radius: var(--ef-radius-sm);
}
:where(a, button, input, select, textarea, [tabindex], summary, [role="slider"]):focus:not(:focus-visible) {
  outline: none;
}
.ef-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ef-skip {
  position: absolute; inset-inline-start: var(--ef-space-3); top: -3rem;
  background: var(--ef-accent); color: var(--ef-on-accent);
  padding: var(--ef-space-3) var(--ef-space-4);
  border-radius: var(--ef-radius-sm); z-index: 100; transition: top 0.12s;
}
.ef-skip:focus { top: var(--ef-space-3); }

/* ---------- 5 motion and contrast preferences ---------- */
@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;
  }
  .ef-lanecard:hover { transform: none; } /* keep the border cue, drop the movement */
}
@media (prefers-contrast: more) {
  :root { --ef-border: var(--ef-border-strong); --ef-ink-faint: var(--ef-ink-soft); }
}