/* ஆழி — design tokens. Every page imports this first. */
@import url("https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@400;500;600;800&family=Archivo+Narrow:wght@500;700&family=Catamaran:wght@500;700;900&family=Caveat:wght@600;700&family=JetBrains+Mono:wght@400;700&display=swap");

:root {
  /* colour — pulled from the three references */
  --chilli: #e5470e;        /* orange field (ref 2) */
  --chilli-deep: #c53a08;
  --oxblood: #2b0908;       /* ticket poster dark (ref 3) */
  --maroon: #6e1a17;
  --paper: #ece7dc;         /* sheet / ticket stock */
  --paper-2: #e0d9ca;
  --paper-3: #d3cbb8;
  --fog: #c3c2bf;           /* ascii hero ground (ref 1) */
  --ink: #161311;
  --ink-2: #3a3430;
  --ink-3: #6b625a;
  --lavender: #b8b0ee;      /* highlighter blocks */
  --salmon: #f2875f;
  --violet: #6a4be8;        /* pins, bookmarks */
  --stamp: #c42a1f;         /* rubber stamp red */
  --biro: #1f3be0;          /* hand-written link blue (ref 1) */
  --sea: #0f3d44;           /* ஆழி = deep sea; use sparingly */

  /* type */
  --f-display: "Anton", "Impact", "Arial Narrow", sans-serif;
  --f-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-narrow: "Archivo Narrow", "Arial Narrow", sans-serif;
  --f-tamil: "Catamaran", "Noto Sans Tamil", "Tamil Sangam MN", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --f-hand: "Caveat", "Comic Sans MS", cursive;

  /* fluid scale */
  --t-xs: clamp(0.72rem, 0.68rem + 0.2vw, 0.8rem);
  --t-sm: clamp(0.85rem, 0.8rem + 0.25vw, 0.95rem);
  --t-md: clamp(1rem, 0.94rem + 0.3vw, 1.15rem);
  --t-lg: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  --t-xl: clamp(2rem, 1.4rem + 3vw, 3.6rem);
  --t-2xl: clamp(3rem, 1.6rem + 7vw, 7.5rem);
  --t-mega: clamp(4.5rem, 2rem + 14vw, 15rem);

  --track-wide: 0.42em;     /* spaced caps like "N A I R A  M A Y" */
  --radius-sheet: 10px;
  --radius-ticket: 14px;
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1280px;

  --shadow-sheet: 0 1px 0 rgba(0,0,0,.06), 0 18px 30px -18px rgba(40,10,0,.55), 0 4px 10px -4px rgba(40,10,0,.25);
  --shadow-lift: 0 30px 50px -24px rgba(30,6,0,.6);
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);

  /* film grain — use as background-image on an ::after overlay. NEVER a box grid. */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --fibers: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.012 .9' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .25  0 0 0 0 .15  0 0 0 .18 0'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>");

  color-scheme: light;
}

/* The brand is print-first and single-look (paper, chilli, oxblood). It keeps
   the same palette in dark mode on purpose; only form controls follow. */