/* ==========================================================================
   Ink & Ivory — design tokens (light theme)
   ========================================================================== */
:root {
	color-scheme: light;

	/* Surfaces */
	--paper: #FBF8F1;
	--paper-2: #F5F0E4;
	--surface: #FFFFFF;
	--line: #E8E1D3;
	--line-2: #DCD3C1;

	/* Ink */
	--ink: #0E1B2C;
	--ink-2: #45526A;
	--ink-3: #7A8496;

	/* Accents */
	--green: #0B7A5A;
	--green-2: #0E946D;
	--green-soft: #E3F3EC;
	--gold: #C99A2E;
	--gold-2: #E2B649;
	--gold-soft: #FBF0D6;
	--rose: #D9483B;
	--rose-soft: #FBE5E2;
	--sky: #2F6FD6;
	--sky-soft: #E3ECFB;
	--violet: #7A4FD1;
	--violet-soft: #EEE7FB;
	--ink-soft: #E7EAF0;

	/* Type */
	--font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-urdu: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Urdu Typesetting", serif;
	--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	--fs-hero: clamp(2.6rem, 1.6rem + 4.6vw, 5.4rem);
	--fs-h1: clamp(2.2rem, 1.5rem + 3vw, 3.8rem);
	--fs-h2: clamp(1.9rem, 1.4rem + 1.8vw, 3rem);
	--fs-h3: clamp(1.2rem, 1.05rem + .6vw, 1.5rem);
	--fs-body: 1.0625rem;
	--fs-sm: .9rem;
	--fs-xs: .78rem;

	/* Space & shape */
	--gutter: clamp(16px, 4vw, 40px);
	--maxw: 1240px;
	--maxw-read: 720px;
	--r-sm: 10px;
	--r: 18px;
	--r-lg: 28px;
	--r-pill: 999px;

	/* Depth */
	--shadow-sm: 0 1px 2px rgba(14, 27, 44, .05), 0 2px 8px rgba(14, 27, 44, .04);
	--shadow: 0 2px 6px rgba(14, 27, 44, .05), 0 12px 32px -8px rgba(14, 27, 44, .10);
	--shadow-lg: 0 6px 16px rgba(14, 27, 44, .06), 0 30px 60px -18px rgba(14, 27, 44, .22);
	--ring: 0 0 0 3px rgba(201, 154, 46, .45);

	/* Motion */
	--ease: cubic-bezier(.2, .8, .2, 1);
	--ease-spring: cubic-bezier(.34, 1.56, .64, 1);
	--dur: .45s;

	--header-h: 76px;
}

/* Colour helper classes used by chips, pills and placeholders */
.c-green  { --c: var(--green);  --c-soft: var(--green-soft); }
.c-gold   { --c: #9A7213;       --c-soft: var(--gold-soft); }
.c-rose   { --c: var(--rose);   --c-soft: var(--rose-soft); }
.c-sky    { --c: var(--sky);    --c-soft: var(--sky-soft); }
.c-violet { --c: var(--violet); --c-soft: var(--violet-soft); }
.c-ink    { --c: var(--ink);    --c-soft: var(--ink-soft); }