/*
 * Design tokens — the ONLY place colors are defined (section 2.5).
 * Never use a hex/rgb value elsewhere. Canvas is the lightest ground (boxes, forms, admin);
 * paper is the aged parchment the public pages sit on (decision K-39).
 */
:root {
  /* Color */
  --color-canvas: #f9f8f0;        /* light "sheet": boxes, forms, admin and login ground (warm linen) */
  --color-paper: #efe3cf;         /* public page ground: aged parchment (K-39); baked into the texture tile — change both (tools/CardAssets) */
  --color-ink: #3c261c;           /* text, header/footer ground, ♠♣ */
  --color-accent: #e97451;        /* borders, active underline, decoration — never a large fill */
  --color-accent-deep: #963820;   /* red text and ♥♦: ≈6.8:1 on canvas, ≈5.7:1 on paper, ≈4.6:1 at aged edges (K-40) */
  --color-rule: #dddedf;          /* hairlines, dividers, card edges */
  --color-highlight: #f7efc5;     /* subtle highlight, eyebrow ground */
  --color-surface-warm: #fcede8;  /* hover, soft callouts */
  --color-surface-cool: #e4e3f2;  /* secondary panels */

  /* Derived (no new hues) */
  --color-on-ink: var(--color-canvas);
  --color-ink-muted: color-mix(in srgb, var(--color-ink) 72%, var(--color-canvas));
  --color-suit-black: var(--color-ink);
  --color-suit-red: var(--color-accent-deep);
  /* Interaction states are ink brown, not red (T-07): hover tint, hover/selected border, focus ring.
     Red stays for meaning (errors, delete, ♥♦) and decoration. */
  --color-focus: var(--color-ink);
  --color-focus-on-ink: var(--color-on-ink);
  --color-hover-surface: color-mix(in srgb, var(--color-ink) 10%, var(--color-canvas));
  --color-hover-border: var(--color-ink);

  /* Parchment ageing (K-39): no new hues, only ink/accent mixed into transparency. */
  --paper-burn: color-mix(in srgb, color-mix(in srgb, var(--color-ink) 65%, var(--color-accent-deep)) 15%, transparent);
  --paper-stain: color-mix(in srgb, color-mix(in srgb, var(--color-ink) 50%, var(--color-accent-deep)) 9%, transparent);
  --texture-paper: url("/Images/textures/parchment.webp");

  /* Type */
  --font-sans: "Mona Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  /* Card suit glyphs are not in the brand fonts; prefer text (non-emoji) symbol fonts. */
  --font-suit: "Apple Symbols", "Segoe UI Symbol", "DejaVu Sans", "Noto Sans Symbols 2", var(--font-sans);

  --text-caption: 0.75rem;                                   /* 12px */
  --text-small: 0.875rem;                                    /* 14px */
  --text-body: 1.125rem;                                     /* 18px */
  --text-body-lg: 1.25rem;                                   /* 20px */
  --text-section: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);       /* 24 → 32px */
  --text-display: clamp(2.25rem, 1.85rem + 1.6vw, 2.9375rem); /* 36 → 47px */

  --leading-body: 1.55;
  --leading-list: 1.84;
  --leading-heading: 1.27;
  --leading-display: 0.95;

  --tracking-heading: 0.07em;
  --tracking-label: 0.1em;
  --tracking-display: 0.08em;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Space (desktop values from the reference, scaled down on small screens) */
  --space-section: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);   /* 40 → 68px */
  --space-card: clamp(1.25rem, 0.6rem + 2.6vw, 2.8125rem);   /* 20 → 45px */
  --space-element: clamp(0.875rem, 0.75rem + 0.5vw, 1.25rem); /* 14 → 20px */
  --space-gutter: clamp(1rem, 0.6rem + 1.6vw, 2.125rem);      /* 16 → 34px */
  --space-xs: 0.375rem;
  --space-s: 0.625rem;

  /* Shape and layout */
  --radius: 3px;
  --hairline: 1px solid var(--color-rule);
  --max-width: 1200px;
  --measure: 38rem;          /* comfortable reading width (~600px) */
  --header-height: 60px;
  --touch-target: 44px;

  /* Shadows exist only in the intro: the physical cards and the club emblem (decision K-36). */
  --shadow-intro-card: 0 1px 2px color-mix(in srgb, var(--color-ink) 18%, transparent),
    0 12px 28px color-mix(in srgb, var(--color-ink) 22%, transparent);
  --shadow-intro-slam: 0 2px 4px color-mix(in srgb, var(--color-ink) 25%, transparent),
    0 22px 44px color-mix(in srgb, var(--color-ink) 30%, transparent);
  /* Soft drop shadow under the emblem; a filter, so it follows the transparent outline. */
  --shadow-logo: drop-shadow(0 10px 18px color-mix(in srgb, var(--color-ink) 24%, transparent));
}