/* ---------------------------------------------------------
   CSP design tokens — deep navy on warm paper, one antique-
   gold accent. Work Sans + Noto Sans Sinhala. Declared once
   here; components (styles.css) consume only these variables.
   --------------------------------------------------------- */

@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/work-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/work-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/work-sans-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: "Noto Sans Sinhala";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/noto-sans-sinhala-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Noto Sans Sinhala";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/noto-sans-sinhala-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Noto Sans Sinhala";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/noto-sans-sinhala-sinhala.woff2") format("woff2");
  unicode-range: U+0964-0965, U+0D81-0DF4, U+1CF2, U+200C-200D, U+25CC, U+111E1-111F4;
}

:root {
  /* Colour */
  --color-ink: #14263a;
  --color-ink-soft: #22384f;
  --color-text: #2b3138;
  --color-muted: #5d6570;
  --color-paper: #f6f5f1;
  --color-surface: #ffffff;
  --color-line: #e3e1db;
  --color-accent: #a8834a;
  --color-accent-deep: #7d5f2c;
  --color-tint: #efe8da;
  --on-accent: var(--color-ink);

  /* Type */
  --font-sans: "Work Sans", "Noto Sans Sinhala", system-ui, sans-serif;
  --font-si-sans: "Noto Sans Sinhala", "Work Sans", system-ui, sans-serif;

  /* Type scale (size / line-height) */
  --text-display-size: 3.625rem;
  --text-display-leading: 4rem;
  --text-heading-size: 3rem;
  --text-heading-leading: 3.5rem;
  --text-title-size: 1.5rem;
  --text-title-leading: 1.875rem;
  --text-label-size: 0.9375rem;
  --text-label-leading: 1.25rem;
  --text-lead-size: 1.25rem;
  --text-lead-leading: 1.875rem;
  --text-body-size: 1rem;
  --text-body-leading: 1.5rem;
  --text-article-size: 1.125rem;
  --text-article-leading: 1.875rem;
  --text-small-size: 0.875rem;
  --text-small-leading: 1.25rem;
  --text-button-size: 0.9375rem;
  --text-button-leading: 1.25rem;
  --text-tag-size: 0.6875rem;
  --text-tag-leading: 1rem;
  --text-si-heading-size: 2.5rem;
  --text-si-heading-leading: 3.75rem;
  --text-si-body-size: 1rem;
  --text-si-body-leading: 1.875rem;

  /* Mobile type overrides (<= 40rem) */
  --text-display-size-mobile: 2.375rem;
  --text-display-leading-mobile: 2.75rem;
  --text-heading-size-mobile: 2rem;
  --text-heading-leading-mobile: 2.5rem;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* Radius */
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 1.875rem;
  --radius-pill: 6.25rem;

  /* Shadow */
  --shadow-float: 1px 3px 10px rgba(0, 0, 0, 0.2);

  /* Filters */
  --filter-photo: grayscale(1) contrast(1.1);
  --filter-banner: grayscale(1) contrast(1.1) brightness(0.45);

  /* Layout */
  --layout-max: 77.5rem;
  --layout-measure: 38rem;
  --layout-gutter: 1.25rem;
}