/* FlagPole — design tokens
   Translated from the app's DESIGN.md (OKLCH palette, warm-paper light / lamplit-ink dark).
   OKLCH is the source of truth; each token carries a hex fallback first so older
   engines keep a valid value and modern engines use the OKLCH line that follows.
   Contrast pairs verified against WCAG 2.2 AA. */

/* ---- Type: Literata (variable woff2, latin), echoing the app's New York serif ---- */
@font-face {
  font-family: "Literata";
  src: url("../fonts/literata.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("../fonts/literata-italic.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Warm paper (light) */
  --canvas:        #f9f5f0;  --canvas:        oklch(0.972 0.008 75);
  --surface:       #fffcf8;  --surface:       oklch(0.992 0.006 75);
  --sunken:        #f1ece6;  --sunken:        oklch(0.945 0.010 75);
  --ink:           #28211c;  --ink:           oklch(0.255 0.015 60);
  --ink-2:         #615954;  --ink-2:         oklch(0.470 0.013 60);
  --ink-3:         #918b86;  --ink-3:         oklch(0.640 0.010 65);
  --hairline:      #dfdcd7;  --hairline:      oklch(0.895 0.008 75);
  --rubric:        #ba2c25;  --rubric:        oklch(0.520 0.180 28);  /* red-letter accent: text, marks, links */
  --rubric-btn:    #ba2c25;  --rubric-btn:    oklch(0.520 0.180 28);  /* solid fill for white text */
  --rubric-weak:   #ffe4dd;  --rubric-weak:   oklch(0.945 0.040 30);  /* tinted "today"/flag-flying ground */
  --rubric-ink:    #fffdf9;  --rubric-ink:    oklch(0.985 0.004 75);  /* text on rubric fill */

  --shadow-1: 0 1px 2px rgba(40,33,28,.05);
  --shadow-2: 0 1px 2px rgba(40,33,28,.05), 0 14px 36px -12px rgba(40,33,28,.22);
  --shadow-mat: 0 2px 4px rgba(40,33,28,.06), 0 26px 60px -22px rgba(40,33,28,.30);

  /* Spacing — 4pt grid from DESIGN.md */
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem;
  --section-y: clamp(3.5rem, 8vw, 7rem);
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --measure: 68ch;            /* prose line length cap */
  --maxw: 75rem;              /* page max width */

  /* Radii */
  --r-sm: 10px; --r: 16px; --r-lg: 24px; --r-phone: 34px;

  /* Type families */
  --serif: "Literata", "New York", ui-serif, "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;

  /* Fluid type scale (brand register: clamp headings, fixed body) */
  --t-display: clamp(2.7rem, 1.6rem + 4.6vw, 5rem);
  --t-h1:      clamp(2rem, 1.4rem + 2.5vw, 3.1rem);
  --t-h2:      clamp(1.5rem, 1.2rem + 1.2vw, 2.05rem);
  --t-h3:      1.3rem;
  --t-lead:    clamp(1.125rem, 1.05rem + .35vw, 1.35rem);
  --t-body:    1.0625rem;     /* 17px, matches the app */
  --t-small:   .9375rem;
  --t-kicker:  .8125rem;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Lamplit ink (dark) */
    --canvas:      #1b1612;  --canvas:      oklch(0.205 0.012 60);
    --surface:     #26201c;  --surface:     oklch(0.250 0.012 60);
    --sunken:      #150f0b;  --sunken:      oklch(0.175 0.012 60);
    --ink:         #e8e6e2;  --ink:         oklch(0.925 0.006 80);
    --ink-2:       #aeaaa5;  --ink-2:       oklch(0.740 0.008 75);
    --ink-3:       #7c756e;  --ink-3:       oklch(0.560 0.009 70);
    --hairline:    #37322e;  --hairline:    oklch(0.320 0.010 60);
    --rubric:      #e56452;  --rubric:      oklch(0.660 0.165 30);
    --rubric-btn:  #c0392c;  --rubric-btn:  oklch(0.560 0.170 30);
    --rubric-weak: #502922;  --rubric-weak: oklch(0.330 0.060 30);
    --rubric-ink:  #fffdf9;  --rubric-ink:  oklch(0.985 0.004 75);

    --shadow-1: 0 1px 2px rgba(0,0,0,.30);
    --shadow-2: 0 1px 2px rgba(0,0,0,.30), 0 16px 40px -12px rgba(0,0,0,.55);
    --shadow-mat: 0 2px 6px rgba(0,0,0,.35), 0 30px 70px -22px rgba(0,0,0,.6);
  }
}