/* Design tokens — the only place a colour, size or shadow is invented.
 *
 * MOTIF: navy and sun-gold on warm paper. Navy carries the weight and reads as
 * trustworthy, which is the whole proposition of an approved board; gold is the
 * accent and the Verified badge — a nod to the sun on the flag without dressing
 * the site in one. WhatsApp green is left strictly for the contact button, so
 * the one action that leaves the site is the one colour nothing else uses.
 */
:root {
  /* ── Colour ── */
  --ink:        #0d2237;   /* headings, primary buttons */
  --ink-2:      #40566d;   /* body text */
  --muted:      #6b7f94;   /* secondary text */
  --bg:         #f6f4f0;   /* warm paper, not grey */
  --surface:    #ffffff;
  --card:       #ffffff;   /* alias of --surface; several components use var(--card) */
  --surface-2:  #f0ede7;   /* chips, inputs at rest */
  --line:       #e3ded5;
  --line-2:     #cfc8bb;

  --gold:       #c8841a;   /* verified, accents */
  --gold-soft:  #fdf3e0;
  --wa:         #1fa855;   /* WhatsApp only */
  --wa-dark:    #17813f;
  --danger:     #b3261e;
  --danger-soft:#fdeceb;
  --ok:         #1a7f4b;
  --ok-soft:    #e8f6ee;

  /* ── Type ──
   * One variable family, so a phone on a slow connection fetches one file.
   * The system stack renders instantly underneath while it loads. */
  --font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
          "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Fluid scale: each step grows with the viewport between 360px and 1200px,
   * so nothing needs a breakpoint just to change size. */
  --t-xs:   0.75rem;
  --t-sm:   0.8125rem;
  --t-base: 0.9375rem;
  --t-md:   clamp(1rem,    0.96rem + 0.2vw,  1.0625rem);
  --t-lg:   clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --t-xl:   clamp(1.375rem, 1.2rem + 0.9vw,  1.875rem);
  --t-2xl:  clamp(1.75rem,  1.4rem + 1.8vw,  2.75rem);

  /* ── Space ── */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.25rem;  --s-6: 1.5rem;   --s-8: 2rem;     --s-10: 2.75rem;
  --s-12: 3.5rem;

  /* ── Shape ── */
  --r-sm: 8px;  --r: 14px;  --r-lg: 20px;  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(13, 34, 55, .06), 0 1px 1px rgba(13, 34, 55, .04);
  --shadow:    0 4px 16px rgba(13, 34, 55, .08);
  --shadow-lg: 0 12px 32px rgba(13, 34, 55, .14);

  /* Thumbs are rendered at 640px wide; cards are never wider than that. */
  --card-ratio: 4 / 3;
  --wrap: 1120px;
  --header-h: 3.5rem;
  --bottomnav-h: 3.75rem;
  --ease: 160ms cubic-bezier(.2, .7, .3, 1);
}

/* The board is used outdoors and at night. Dark mode is the same tokens with
 * the surfaces inverted — no component needs to know about it. */
@media (prefers-color-scheme: dark) {
  :root {
    --ink:       #f2f5f8;
    --ink-2:     #c3cedb;
    --muted:     #8b9cae;
    --bg:        #0d1620;
    --surface:   #152231;
    --card:      #152231;   /* alias of --surface */
    --surface-2: #1d2d3f;
    --line:      #26384c;
    --line-2:    #354a61;
    --gold:      #e8ad52;
    --gold-soft: #2c2415;
    --ok-soft:   #13301f;
    --danger-soft:#33191a;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow:    0 4px 16px rgba(0, 0, 0, .45);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, .55);
  }
}