/* ==========================================================================
   Project Vidya — design tokens (v3, editorial)
   Shared by the website (site/index.html) and the style tile
   (design/style-tile.html). Change a value here and both update.
   ========================================================================== */

/* Metric-matched fallbacks: while the web fonts download, Arial and Georgia are
   scaled to take up the same width, so text doesn't reflow when they arrive. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Helvetica");
  size-adjust: 107.1%;
  ascent-override: 90.4%;
  descent-override: 22.5%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Newsreader Fallback";
  src: local("Georgia");
  size-adjust: 97%;
}

:root {
  /* ---- Brand colours (unchanged) ------------------------------------------
     Blueberry + Cream Soda: supplied palette. Marigold + leaf: from the logo.
     Periwinkle is a light tint of Blueberry, used for highlights and tiles. */
  --blueberry: #243B8F;
  --blueberry-deep: #1A2C6E;
  --cream-soda: #FFF0C9;
  --marigold: #E9A93B;
  --leaf: #7DB66A;
  --periwinkle: #C9D1F2;

  /* ---- Surfaces ------------------------------------------------------------ */
  --page: #FFFBF0;            /* default page background (warm white)        */
  --stone: #F4EFE3;           /* text panels and cards                        */
  --card: #FFFFFF;            /* floating "UI" cards                          */
  --night: #111733;           /* footer                                       */

  /* ---- Text ---------------------------------------------------------------- */
  --ink: #141B3A;             /* headings — 14.9:1 on Cream Soda              */
  --text: #4A4F66;            /* body — 7.0:1 on stone, 7.8:1 on page         */
  --text-soft: #585D76;       /* captions                                      */
  --on-dark: #FFF0C9;
  --on-dark-soft: #B9BED6;    /* 9.5:1 on night                                */
  --line: rgb(20 27 58 / 0.12);

  /* ---- Grid paper (the texture on colour panels) ------------------------- */
  --grid-size: 28px;
  --grid-line-light: rgb(255 255 255 / 0.16);
  --grid-line-dark: rgb(20 27 58 / 0.1);

  /* ---- Type ----------------------------------------------------------------
     Newsreader: a calm, literary serif for headlines (only weight 400 is used,
     so only its optical-size axis is loaded: 56 KB instead of 129 KB).
     Inter: a neutral grotesque for everything else.
     Sizes follow the usual web scale: body 16–20px, labels never below 12px. */
  --font-display: "Newsreader", "Newsreader Fallback", Georgia, serif;
  --font-body: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Caveat: handwriting, only for notes in the team's own voice (see docs/DESIGN-RULES.md) */
  --font-hand: "Caveat", "Bradley Hand", "Segoe Print", cursive;

  --t-2xs: 0.75rem;                                    /* 12px  tiny labels  */
  --t-xs: 0.8125rem;                                   /* 13px  captions     */
  --t-s: 0.875rem;                                     /* 14px  small text   */
  --t-sm: 0.9375rem;                                   /* 15px  UI text      */
  --t-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);  /* 16–17 body         */
  --t-lg: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);    /* 17–20 lede         */
  --t-h3: clamp(1.5rem, 1.3rem + 0.9vw, 2.125rem);     /* 24–34              */
  --t-h2: clamp(2rem, 1.55rem + 2.2vw, 3.25rem);       /* 32–52              */
  --t-h1: clamp(2.5rem, 1.6rem + 4vw, 4.5rem);        /* 40–72              */

  /* ---- Space (8px 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: 7rem;
  --gutter: clamp(16px, 4vw, 48px);
  --maxw: 74rem;

  /* ---- Shape ----------------------------------------------------------------
     Sharp corners for layout and buttons; small radii only on floating UI cards
     and highlight boxes. */
  --r-0: 0;
  --r-hl: 0.14em;
  --r-card: 10px;
  --shadow-float: 0 1px 0 rgb(20 27 58 / 0.04), 0 22px 44px -22px rgb(10 15 40 / 0.55);

  /* ---- Interaction --------------------------------------------------------- */
  --tap: 44px;
  --focus: var(--blueberry);
  --header-h: 64px;                                    /* JS keeps it exact */
  --ease: cubic-bezier(0.22, 0.8, 0.26, 1);
  --t-fast: 150ms;                                     /* hover / press      */
  --shadow-lift: 0 8px 18px -10px rgb(20 27 58 / 0.5);
}