/* readmyspread design tokens. Single source of truth: change here, nowhere else. */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Colour: surfaces */
  --night: #0b1024;      /* page background */
  --dusk: #141a38;       /* cards, panels */
  --nebula: #232b55;     /* raised or selected surfaces, dividers */

  /* Colour: text */
  --starlight: #f3efe4;  /* primary text, 16.2:1 on night */
  --mist: #aeb4d3;       /* secondary text, 9.0:1 on night */

  /* Colour: accents */
  --gold: #e2c071;       /* primary fills (with night text, 10.3:1), card edging, highlights */
  --gold-deep: #cfa94f;  /* hover for gold fills */
  --violet: #b4a8ff;     /* links, focus ring (8.7:1 on night) */

  /* Colour: lines (UI boundaries need 3:1 against night) */
  --line: #6b74a8;
  --line-quiet: #232b55; /* decorative dividers */

  /* Semantic */
  --care: #b4a8ff;
  --focus: var(--violet);

  /* Type families */
  --font-display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-ui: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Type scale (mobile first, rem; 1rem = 16px). Cormorant runs small, so display sizes are generous. */
  --step--1: 0.875rem;   /* captions, fine print */
  --step-0: 1rem;        /* UI text */
  --step-1: 1.3125rem;   /* reading text */
  --step-2: 1.75rem;     /* card names, section titles */
  --step-3: 2.25rem;     /* screen titles */
  --step-4: 3rem;        /* hero */
  --step-5: 4rem;        /* wordmark on large screens */

  --lh-tight: 1.05;
  --lh-ui: 1.45;
  --lh-reading: 1.55;

  /* 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: 4.5rem;
  --s-9: 6.5rem;

  /* Shape */
  --r-ui: 8px;           /* buttons, inputs */
  --r-card: 8px;         /* tarot card thumbnails */
  --r-panel: 20px;       /* panels and the upload zone */
  --gutter: max(var(--s-4), env(safe-area-inset-left));
  --tap: 3rem;           /* 48px minimum touch target */
  --measure: 36rem;      /* reading column */

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-quick: 160ms;
  --t-reveal: 480ms;
}

@media (min-width: 40rem) {
  :root {
    --step-4: 4.25rem;
    --step-5: 5.5rem;
    --gutter: var(--s-6);
  }
}