/* ==========================================================================
   design tokens — Nelum Hewage
   every colour, font, size, space, radius, shadow and motion value lives here.
   other stylesheets reference these variables only.
   ========================================================================== */

@font-face {
  font-family: "Lora";
  src: url("../assets/fonts/Lora-Variable.woff") format("woff");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("../assets/fonts/Lora-Italic-Variable.woff") format("woff");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-Regular.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-Medium.woff") format("woff");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-SemiBold.woff") format("woff");
  font-weight: 600;
  font-display: swap;
}

:root {
  /* ---------- palette (no pure white, no pure black) ---------- */
  --color-paper: #fbf6ea;
  --color-cream: #f6eedf;
  --color-cream-deep: #efe3cc;
  --color-sand: #e6d5b8;
  --color-clay: #a8745a;
  --color-clay-deep: #7a4f3b;
  --color-bark: #4a3328;
  --color-navy: #243b4e;
  --color-whatsapp: #25d366;
  --color-whatsapp-deep: #1ebe5a;
  --color-blue-deep: #2f5d7c;
  --color-blue: #4a7a99;
  --color-blue-soft: #8fb0c6;
  --color-blue-pale: #dbe6ec;
  --color-blue-mist: #e9eff1;
  --color-navy-text: #cfdde6;
  --color-ink: #3a2a22;
  --color-ink-soft: #5e4a3e;
  --color-terracotta: #a64b30;
  --color-terracotta-deep: #8c3d25;
  --color-terracotta-soft: #c9694a;
  --color-sage: #9aaa8a;
  --color-sage-deep: #5f7152;
  --color-sage-pale: #dde3cf;
  --color-ochre: #d9a441;
  --color-ochre-deep: #b07f1e;

  /* ---------- semantic colours ---------- */
  --surface-page: var(--color-cream);
  --surface-raised: var(--color-paper);
  --surface-soft: var(--color-cream-deep);
  --surface-sage: var(--color-blue-soft);
  --surface-sage-pale: var(--color-blue-pale);
  --surface-dark: var(--color-navy);
  --surface-accent: var(--color-blue-deep);
  --action-bg: var(--color-whatsapp);
  --action-bg-hover: var(--color-whatsapp-deep);
  --action-fg: var(--color-navy);
  --text-heading: var(--color-ink);
  --text-body: var(--color-ink-soft);
  --text-muted: var(--color-blue-deep);
  --text-on-dark: var(--color-paper);
  --text-on-dark-soft: var(--color-navy-text);
  --text-on-accent: var(--color-paper);
  --line-soft: #d8dccf;
  --line-accent: var(--color-blue);
  --focus-ring: var(--color-ochre-deep);

  /* ---------- typography ---------- */
  --font-heading: "Lora", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.06rem + 0.35vw, 1.3125rem);
  --text-xl: clamp(1.375rem, 1.2rem + 0.9vw, 1.875rem);
  --text-2xl: clamp(1.75rem, 1.4rem + 1.7vw, 2.75rem);
  --text-3xl: clamp(2.25rem, 1.6rem + 3vw, 4rem);
  --text-4xl: clamp(2.6rem, 1.7rem + 4.4vw, 5rem);

  --leading-tight: 1.1;
  --leading-heading: 1.18;
  --leading-body: 1.7;
  --tracking-eyebrow: 0.14em;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* ---------- spacing (relaxed) ---------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: clamp(4.5rem, 3rem + 6vw, 8rem);
  --space-3xl: clamp(6rem, 4rem + 9vw, 11rem);
  --gutter: clamp(1.25rem, 0.5rem + 3.5vw, 3rem);
  --container: 72rem;
  --container-narrow: 46rem;
  --wave-height: clamp(3rem, 2rem + 6vw, 8rem);

  /* ---------- radii (soft, organic) ---------- */
  --radius-sm: 0.75rem;
  --radius-md: 1.5rem;
  --radius-lg: 2.25rem;
  --radius-pill: 999px;
  --radius-arch: 999px 999px var(--radius-md) var(--radius-md);
  --radius-arch-flip: var(--radius-md) var(--radius-md) 999px 999px;
  --radius-blob-a: 62% 38% 55% 45% / 48% 58% 42% 52%;
  --radius-blob-b: 42% 58% 38% 62% / 55% 40% 60% 45%;
  --radius-leaf: 0 60% 0 60%;

  /* ---------- shadows (warm, diffuse) ---------- */
  --shadow-soft: 0 0.5rem 1.75rem rgb(122 79 59 / 0.12);
  --shadow-lift: 0 1.25rem 3rem rgb(74 51 40 / 0.2);
  --shadow-button: 0 0.375rem 1.125rem rgb(37 211 102 / 0.38);

  /* ---------- motion (gentle, slow) ---------- */
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration-fast: 240ms;
  --duration-base: 480ms;
  --duration-slow: 900ms;
  --duration-drift: 14s;

  /* ---------- texture assets ---------- */
  --texture-grain: url("../assets/images/paper-grain.svg");

  /* ---------- layers ---------- */
  --layer-base: 1;
  --layer-raised: 2;
  --layer-header: 50;
}