/* ==========================================================================
   THE REEL DEAL DECK — Design Tokens
   --------------------------------------------------------------------------
   This file is the design contract. Every other stylesheet consumes these
   variables and MUST NOT hard-code colors, type sizes, or spacing.

   Art direction: the site should feel like the card, not like a lodge.
   Precise, engraved, high-contrast, generous whitespace. No wood grain,
   no plaid, no drop-shadowed "rustic" chrome, no stock photography.

   ONE THEME. The site is dark, always: no light mode, no toggle, and no
   prefers-color-scheme branch anywhere in this codebase.

   Note what that did NOT change. --c-paper and --c-ink keep the printed light
   and dark values, because they are used as literal anchors rather than as
   "background" and "foreground": .section--dark sets its text to --c-paper to
   get light type on a deep band, and .btn--primary:hover mixes toward --c-ink
   to DARKEN the green. Flipping those two would have turned the river band's
   type near-black on near-black and made the order button lighten on hover,
   which is a bug this project has already fixed once. Only the SEMANTIC tokens
   below carry the night values — exactly the set the old dark block overrode.

   Anything added here must be legible on #0F1310, because there is no second
   theme to fall back on.
   ========================================================================== */

:root {
  color-scheme: dark;   /* so form controls and scrollbars follow */

  /* --- Ink & paper ------------------------------------------------------
     Sampled from the printed v8 card faces and the USPCC tuck box, not
     invented. This is a two-color deck: green stands in for red, bark
     brown for black. The site follows the physical product.              */
  --c-paper:        #FAF9F5;  /* page ground, a shade off the card stock */
  --c-paper-2:      #F1EFE8;  /* recessed surface  */
  --c-paper-3:      #E2DED3;  /* borders, rules    */
  --c-ink:          #1B1A16;  /* body text         */
  --c-ink-2:        #4E4739;  /* secondary text    */
  --c-ink-3:        #837C6D;  /* tertiary / meta   */

  /* --- The deck's own colors ------------------------------------------ */
  /* Lifted off the printed inks so links and small type stay legible on
     near-black. The printed values survive as --c-brand-fill below, which is
     what paints a solid brand field. */
  --c-green:        #8FBF66;  /* THE brand color: logo, card back, hearts + diamonds */
  --c-green-deep:   #6E9A4E;
  --c-green-soft:   #A9D188;
  --c-bark:         #B49C77;  /* spades + clubs, rank numerals, card body copy */
  --c-bark-deep:    #4E4231;
  --c-egg:          #F0C25F;  /* the Egg joker — warm highlight, badges */
  --c-worm:         #D4595C;  /* the San Juan Worm — used sparingly */

  /* Legacy aliases kept so existing rules keep resolving. --c-red is no
     longer the accent: the deck prints green where a normal deck prints red. */
  --c-red:          var(--c-green);
  --c-red-deep:     var(--c-green-deep);
  --c-river:        #35561E;
  --c-riffle:       #8FBF66;

  /* The deck's own red, for the one thing on this site that has to read as
     wrong: a form error. --c-worm, never --c-red, which is green here. */
  --c-danger:       var(--c-worm);

  /* --- Semantic -------------------------------------------------------- */
  --c-bg:           #0F1310;
  --c-bg-sunk:      #0A0D0B;
  --c-surface:      #161B17;
  --c-border:       #2A322B;
  --c-text:         #ECE9E0;
  --c-text-muted:   #ABAE9F;
  /* #7C8377, the old dark-mode value, is 4.79:1 on the page but only 4.46:1 on
     --c-surface, where most of the faint type actually sits (card meta, table
     captions, "Short answer" labels). That was survivable while light mode was
     a keystroke away. It is not now, so this is lifted to the smallest value
     that clears 4.5:1 on all three grounds: 5.17 on --c-bg, 5.39 on --c-bg-sunk
     and 4.82 on --c-surface. Re-measure against --c-surface, not the page. */
  --c-text-faint:   #828977;
  --c-accent:       var(--c-green);
  --c-accent-text:  #0F1310;

  /* The printed ink. --c-green above is lifted to #8FBF66 so links and small
     text stay legible on near-black,
     which is right for text and wrong for a filled surface: it made the
     order button a different green from the box sitting beside it.
     Anything painting a solid brand field uses this instead, so the button and
     the tuck box are the same green.
     #4A762B is sampled from the original card scans, and is PANTONE 364 C to
     within 2/255 of the Lab in the printer's own file. */
  --c-brand-fill:      #4A762B;
  --c-brand-fill-text: #FFFFFF;
  --c-focus:        var(--c-egg);

  /* --- Type ------------------------------------------------------------ */
  /* System stacks only. No webfonts: zero network cost, zero CLS, instant
     first paint. The serif stack reads as engraved/classical on every OS. */
  --f-display: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino,
               "Book Antiqua", Georgia, serif;
  --f-body:    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, sans-serif;
  --f-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Fluid scale — clamp(min, preferred, max) */
  --t-xs:   0.75rem;
  --t-sm:   0.875rem;
  --t-base: 1rem;
  --t-md:   clamp(1.0625rem, 0.35vw + 1rem,   1.1875rem);
  --t-lg:   clamp(1.25rem,   0.6vw + 1.1rem,  1.5rem);
  --t-xl:   clamp(1.5rem,    1.1vw + 1.25rem, 2rem);
  --t-2xl:  clamp(2rem,      2.2vw + 1.4rem,  3rem);
  --t-3xl:  clamp(2.5rem,    4vw + 1.5rem,    4.5rem);

  --lh-tight: 1.1;
  --lh-snug:  1.3;
  --lh-body:  1.65;

  --ls-tight:  -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.08em;
  --ls-index:   0.16em;  /* small-caps card-corner indices */

  /* --- Space (4px base) ------------------------------------------------ */
  --s-1:  0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5:  1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9:  6rem;     --s-10: 8rem;

  /* --- Geometry -------------------------------------------------------- */
  --r-card: 12px;   /* playing-card corner radius, used on card-like things */
  /* The corner actually printed on the cards. Fitted, not eyeballed: the first
     attempt took the first dark pixel in the top row and got 23px, but the
     keyline has thickness and anti-aliasing, so that lands inside the true
     curve and left a white sliver at every corner. Fitting a circle to the
     profile said 27px and was no better — it overshot and clipped the keyline
     off instead.

     So it was measured by outcome rather than by geometry: sweep the radius,
     and for each one walk the corner arc counting how much of it shows white
     instead of the printed keyline. That bottoms out hard at 25px — 5.7% of the
     arc, against 17.5% at 23px and 20.7% at 27px.

     A percentage so it holds at any rendered size. Only for elements showing a
     real card face — --r-card above is 12px and belongs to panels. */
  --r-card-art: 4.37% / 3.12%;
  --r-sm:   4px;
  --r-pill: 999px;
  --card-ratio: 0.714;          /* 2.5in x 3.5in — the real poker card ratio */
  --measure: 68ch;              /* max line length for prose                */
  --wrap:  1180px;              /* page gutter width                        */
  --wrap-narrow: 760px;

  /* --- Depth (restrained: this is print, not glassmorphism) ------------- */
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.45);
  --shadow-2: 0 4px 12px rgb(0 0 0 / 0.5);
  --shadow-lift: 0 12px 32px rgb(0 0 0 / 0.6);

  /* --- Motion ---------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 120ms;
  --dur:      220ms;
  --dur-slow: 420ms;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}