/* Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V4 */
/*
 * Hallmark · genre: civic portal · tone: official, accessible, information-dense
 * theme: studied-DNA (source: client Smart City demo) · anchor: civic green
 * macrostructure: Photographic · nav: N1b three-section · footer: Ft1 mast-headed
 * contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46)
 * chrome: pass (47) · tokens: pass (48) · responsive: pass (49)
 * icons: pass (30) · mobile: pass (34, 49, 50–57)
 */

@font-face {
    font-family: "Noto Sans Thai Local";
    src: url("/fonts/noto-sans-thai/NotoSansThai-VariableFont_wdth,wght.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-body: "Noto Sans Thai Local", sans-serif;
    --font-display: "Noto Sans Thai Local", sans-serif;

    --color-ink: oklch(24% 0.045 252);
    --color-ink-soft: oklch(38% 0.04 252);
    --color-muted: oklch(48% 0.026 250);
    --color-paper: oklch(98% 0.012 245);
    --color-paper-soft: oklch(95% 0.025 245);
    --color-paper-tint: oklch(91% 0.055 245);
    --color-line: oklch(84% 0.06 250);
    --color-accent: oklch(51% 0.16 252);
    --color-accent-strong: oklch(34% 0.12 252);
    --color-accent-soft: oklch(78% 0.12 240);
    --color-accent-ink: oklch(98% 0.01 245);
    --color-highlight: oklch(83% 0.15 100);
    --color-highlight-ink: oklch(27% 0.05 105);
    --color-danger: oklch(48% 0.18 26);
    --color-danger-ink: oklch(98% 0.01 26);
    --color-info: oklch(53% 0.13 235);
    --color-info-ink: oklch(98% 0.01 235);
    --color-overlay: oklch(18% 0.04 252 / 0.78);
    --color-shadow: oklch(18% 0.04 252 / 0.16);
    --color-focus: oklch(72% 0.17 95);
    --color-map-pin: oklch(66% 0.24 25);
    --color-map-pin-deep: oklch(49% 0.2 25);
    --color-map-pin-glow: oklch(70% 0.23 25 / 0.38);
    --color-map-popup: oklch(98% 0.01 245 / 0.97);
    --color-transparent: oklch(0% 0 0 / 0);
    --color-nav-rule: oklch(95% 0.02 245 / 0.22);
    --color-nav-hover: oklch(30% 0.11 252 / 0.72);

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4.5rem;
    --space-9: 6rem;

    --radius-sm: 0.5rem;
    --radius-md: 0.9rem;
    --radius-lg: 1.4rem;
    --radius-pill: 999rem;
    --shadow-card: 0 0.8rem 2.2rem var(--color-shadow);
    --shadow-float: 0 1rem 2.8rem var(--color-shadow);

    --container: 78rem;
    --banner-height: 4.25rem;
    --z-base: 1;
    --z-sticky: 20;
    --z-sticky-nav: 30;
    --z-overlay: 40;
    --z-popover: 50;
    --z-modal: 60;

    --dur-instant: 100ms;
    --dur-short: 180ms;
    --dur-medium: 280ms;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}