/* tulunadu.org design tokens
   Layer order is declared once here; every other stylesheet adds to these layers.
   Breakpoints (mobile first, used as min-width): 30em phone-large | 48em tablet | 64em laptop | 90em desktop */
@layer reset, tokens, base, layout, components, utilities;

@layer tokens {
  :root {
    /* ---------- colour primitives, named after what they come from ---------- */
    /* kumkuma: the red of kola costume, kumkum and laterite */
    --kumkuma-50: #FBEDE8; --kumkuma-100: #F6D9D0; --kumkuma-300: #E28C79; --kumkuma-400: #D4604A;
    --kumkuma-500: #C2382B; --kumkuma-600: #A8281F; --kumkuma-700: #8E1F1A; --kumkuma-800: #7E1A15; --kumkuma-900: #4E100D;
    /* arashina: turmeric gold */
    --arashina-50: #FEF6E0; --arashina-100: #FCE9B8; --arashina-300: #F7D27A; --arashina-400: #F0BC45;
    --arashina-500: #E2A51F; --arashina-600: #B9820F; --arashina-700: #8A5D00; --arashina-800: #6B4700;
    /* kangu: areca and paddy green */
    --kangu-50: #EAF4EC; --kangu-100: #D2E8D6; --kangu-300: #7DB070; --kangu-500: #468A55; --kangu-600: #2B7048; --kangu-700: #1F5A3A; --kangu-800: #15402A;
    /* kadal: the Arabian Sea */
    --kadal-50: #E6F3F5; --kadal-100: #C8E4E9; --kadal-300: #55A7B3; --kadal-500: #2C8A9B; --kadal-600: #12697A; --kadal-700: #0E5563; --kadal-800: #0A3D48;
    /* odu: Mangalore roof tile */
    --odu-100: #F5DDD0; --odu-400: #D0714A; --odu-600: #B9502B; --odu-700: #8F3A1D;
    /* masi (soot, ink) and ari (rice): the warm neutrals */
    --masi-950: #120D0B; --masi-900: #1D1613; --masi-800: #2A211C; --masi-700: #3B302A; --masi-600: #54463E;
    --masi-500: #6B5D54; --masi-400: #8C7D72; --masi-300: #B3A598;
    --ari-50: #FCF8F0; --ari-100: #F6EFE2; --ari-200: #EADFCB; --ari-300: #DBCCB1; --white: #FFFFFF;

    /* ---------- semantic colour: light theme (pagel, day) ---------- */
    color-scheme: light;
    --bg: var(--ari-50);
    --bg-raised: var(--white);
    --bg-sunken: var(--ari-100);
    --bg-tint: var(--kumkuma-50);
    --bg-inverse: var(--masi-900);
    --text: var(--masi-900);
    --text-muted: var(--masi-600);
    --text-subtle: var(--masi-500);
    --text-inverse: var(--ari-50);
    --flag-red: #800000; --flag-white: #FFFFFF; /* the Tulu flag's own colours; the flag is never recoloured */
    --brand: var(--kumkuma-600);
    --brand-strong: var(--kumkuma-800);
    --on-brand: var(--ari-50);
    --accent: var(--arashina-400);
    --accent-strong: var(--arashina-500);
    --accent-text: var(--arashina-700);
    --on-accent: var(--masi-900);
    --link: var(--kumkuma-700);
    --link-hover: var(--kumkuma-500);
    --link-visited: #6E2A4D;
    --border: var(--ari-200);
    --border-strong: var(--ari-300);
    --focus: var(--kadal-600);
    --note: var(--kadal-700);        --note-bg: var(--kadal-50);
    --disputed: var(--odu-700);      --disputed-bg: var(--odu-100);
    --ok: var(--kangu-700);          --ok-bg: var(--kangu-50);
    --warn: var(--arashina-800);     --warn-bg: var(--arashina-50);
    --check-a: var(--kumkuma-600); --check-b: var(--arashina-400); --check-c: var(--masi-900);
    --hero-img: url("../img/hero-day.svg");
    --shadow-1: 0 1px 2px rgb(78 16 13 / .06), 0 2px 8px rgb(78 16 13 / .06);
    --shadow-2: 0 2px 4px rgb(78 16 13 / .08), 0 10px 28px rgb(78 16 13 / .10);

    /* ---------- type ---------- */
    --font-display: "Fraunces", "Noto Serif Kannada", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --font-body: "Noto Sans", "Noto Sans Kannada", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-kn-display: "Noto Serif Kannada", "Tunga", "Kannada MN", "Fraunces", serif;
    --font-kn-body: "Noto Sans Kannada", "Tunga", "Kannada Sangam MN", "Noto Sans", system-ui, sans-serif;
    --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
    --step--2: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
    --step--1: clamp(0.84rem, 0.81rem + 0.14vw, 0.92rem);
    --step-0: clamp(1rem, 0.96rem + 0.20vw, 1.125rem);
    --step-1: clamp(1.18rem, 1.11rem + 0.34vw, 1.38rem);
    --step-2: clamp(1.40rem, 1.28rem + 0.58vw, 1.72rem);
    --step-3: clamp(1.66rem, 1.47rem + 0.95vw, 2.15rem);
    --step-4: clamp(1.98rem, 1.67rem + 1.55vw, 2.85rem);
    --step-5: clamp(2.35rem, 1.84rem + 2.55vw, 3.9rem);
    --leading-tight: 1.12; --leading-snug: 1.3; --leading-body: 1.65;
    --leading-kn-tight: 1.4; --leading-kn-body: 1.9;   /* Kannada script needs room for vowel signs and conjuncts below the line */
    --measure: 68ch;

    /* ---------- space, shape, motion ---------- */
    --space-3xs: .25rem; --space-2xs: .5rem; --space-xs: .75rem; --space-s: 1rem; --space-m: 1.5rem;
    --space-l: 2rem; --space-xl: 3rem; --space-2xl: 4rem; --space-3xl: 6rem;
    --section: clamp(3rem, 2rem + 5vw, 6.5rem);
    --gutter: clamp(1rem, 0.4rem + 3vw, 2.5rem);
    --page: 75rem; --page-wide: 90rem;
    --radius-s: 6px; --radius-m: 12px; --radius-l: 20px; --radius-pill: 999px;
    --ease: cubic-bezier(.2, .7, .2, 1); --fast: 140ms; --slow: 320ms;
    --header-h: 4rem;
  }

  /* ---------- dark theme (irl, night). Applied by system preference unless the reader chose light. ---------- */
  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #14100E; --bg-raised: #1F1815; --bg-sunken: #0E0B09; --bg-tint: #2A1613; --bg-inverse: var(--ari-50);
    --text: #F3EADB; --text-muted: #C4B7A6; --text-subtle: #A29486; --text-inverse: var(--masi-900);
    --brand: #D4604A; --brand-strong: #E28C79; --on-brand: #160806;
    --accent: var(--arashina-400); --accent-strong: var(--arashina-300); --accent-text: var(--arashina-300); --on-accent: var(--masi-900);
    --link: var(--arashina-300); --link-hover: var(--arashina-100); --link-visited: #D9A9C4;
    --border: #33281F; --border-strong: #4A3B2F; --focus: var(--kadal-300);
    --note: #8CCBD5; --note-bg: #0D2A31; --disputed: #EFA184; --disputed-bg: #33170C;
    --ok: #9CCFA6; --ok-bg: #11291B; --warn: var(--arashina-300); --warn-bg: #2E2207;
    --check-a: var(--kumkuma-700); --check-b: var(--arashina-500); --check-c: #000;
    --hero-img: url("../img/hero-dusk.svg");
    --shadow-1: 0 1px 2px rgb(0 0 0 / .4); --shadow-2: 0 10px 30px rgb(0 0 0 / .5);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --bg: #14100E; --bg-raised: #1F1815; --bg-sunken: #0E0B09; --bg-tint: #2A1613; --bg-inverse: var(--ari-50);
      --text: #F3EADB; --text-muted: #C4B7A6; --text-subtle: #A29486; --text-inverse: var(--masi-900);
      --brand: #D4604A; --brand-strong: #E28C79; --on-brand: #160806;
      --accent: var(--arashina-400); --accent-strong: var(--arashina-300); --accent-text: var(--arashina-300); --on-accent: var(--masi-900);
      --link: var(--arashina-300); --link-hover: var(--arashina-100); --link-visited: #D9A9C4;
      --border: #33281F; --border-strong: #4A3B2F; --focus: var(--kadal-300);
      --note: #8CCBD5; --note-bg: #0D2A31; --disputed: #EFA184; --disputed-bg: #33170C;
      --ok: #9CCFA6; --ok-bg: #11291B; --warn: var(--arashina-300); --warn-bg: #2E2207;
      --check-a: var(--kumkuma-700); --check-b: var(--arashina-500); --check-c: #000;
      --hero-img: url("../img/hero-dusk.svg");
      --shadow-1: 0 1px 2px rgb(0 0 0 / .4); --shadow-2: 0 10px 30px rgb(0 0 0 / .5);
    }
  }
}