/* ==========================================================================
   RINA COIN — Design Tokens
   Source of truth: DESIGN_SPEC.md §2. Do not invent values not in the spec.
   ========================================================================== */

:root {
  /* --- Color (spec §2.1) --------------------------------------------------
     Dark mode is the brand's native mode. No light-mode variant in v1. */
  --rina-ink:          #15101F; /* page background */
  --rina-midnight:     #241B36; /* cards / raised surfaces */
  --rina-twilight:     #4A3B6B; /* borders, dividers, secondary surfaces */
  --rina-lavender:     #B6A4E0; /* primary accent: headings glow, links, active nav */
  --rina-blossom:      #F2A6C4; /* secondary accent: sakura/petal, the one warm touch */
  --rina-cream:        #F3ECE3; /* body text on dark; bg for warm interior sections */
  --rina-mist:         #9C8FB8; /* muted/secondary text, captions, timestamps */
  --rina-solana-cyan:  #14F1C6; /* RESERVED: Solana mentions + live chart border only.
                                   Never more than once per viewport (spec §2.1 rule). */

  /* Derived / translucent helpers (kept on-palette) */
  --rina-ink-90:       rgba(21, 16, 31, 0.9);
  --rina-midnight-70:  rgba(36, 27, 54, 0.72);
  --rina-lavender-15:  rgba(182, 164, 224, 0.15);
  --rina-lavender-30:  rgba(182, 164, 224, 0.30);
  --rina-cream-70:     rgba(243, 236, 227, 0.70);
  --rina-cream-55:     rgba(243, 236, 227, 0.55);

  /* --- Typography (spec §2.2) -------------------------------------------- */
  --font-display: "Cormorant Garamond", "Spectral", Georgia, serif;
  --font-body:    "Inter", "Manrope", system-ui, -apple-system, sans-serif;
  --font-hand:    "Caveat", "Patrick Hand", cursive; /* pull-quotes ONLY */

  /* Type scale (rem, 16px base) — desktop defaults */
  --fs-display-xl: 4.5rem;   /* hero wordmark */
  --fs-display-l:  3rem;     /* page titles */
  --fs-display-m:  2rem;     /* section headers */
  --fs-body:       1.0625rem;
  --fs-caption:    0.875rem;
  --lh-body:       1.7;      /* generous — reading-heavy site */
  --ls-wordmark:   0.04em;   /* all-caps lockups */

  /* --- Layout & spacing (spec §2.3) ------------------------------------- */
  --content-max:   1140px;
  --gutter:        clamp(1.25rem, 5vw, 3rem);
  --section-gap:   6rem;     /* desktop vertical rhythm between major sections */

  /* --- Radius (spec §2.3) ----------------------------------------------- */
  --radius-card:   12px;
  --radius-frame:  24px;     /* hero image frames */

  /* --- Motion (spec §2.4) ----------------------------------------------- */
  --ease-soft:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --reveal-shift:  12px;
  --reveal-dur:    0.7s;
}

/* Mobile type scale + tighter rhythm (spec §2.2 / §2.3) */
@media (max-width: 720px) {
  :root {
    --fs-display-xl: 2.75rem;
    --fs-display-l:  2rem;
    --fs-display-m:  1.5rem;
    --section-gap:   3.5rem;
  }
}