/* Hallmark · macrostructure: Narrative Workflow / Ecosystem Index / Workbench / Long Document · N13 search-led navigation + Ft5 statement footer
 * theme: custom · vibe: "reassuring, human, trustworthy" · paper: oklch(98.5% 0.008 90) · accent: #4338CA
 * display: Newsreader Variable Roman · body: Be Vietnam Pro · axes: light-dark / roman-serif / cool-indigo-blue
 * studied: no · context: explicit · designed-as-app · design-system: design.md · v1.0.0
 */
/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4 */

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/newsreader-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+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/newsreader-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/newsreader-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  /* Brand primitives. Components use the semantic layer below. */
  --logo-lotus: #2563EB;
  --logo-sage: #0F766E;
  --logo-spark: #FBBF24;
  --logo-ink: #172033;

  /* Warm paper and cool, indigo-tinted neutrals. */
  --paper: oklch(98.5% 0.008 90);
  --surface: oklch(99.2% 0.005 90);
  --surface-2: oklch(95.8% 0.010 260);
  --surface-3: oklch(91.8% 0.014 260);
  --ink: oklch(24.5% 0.038 260);
  --ink-2: oklch(39% 0.022 260);
  --muted: oklch(47% 0.018 260);
  --muted-2: oklch(54% 0.014 260);
  --line: oklch(86% 0.012 260);
  --line-strong: oklch(62% 0.016 260);

  /* Semantic chroma. */
  --lotus: var(--logo-lotus);
  --lotus-soft: oklch(95% 0.035 263);
  --lotus-ink: oklch(42% 0.180 263);
  --sage: var(--logo-sage);
  --sage-deep: #115E59;
  --sage-soft: #CCFBF1;
  --spark: var(--logo-spark);
  --spark-soft: oklch(95% 0.040 85);
  /* The readable ink on --spark-soft. Five rules consumed this before it
     existed, so every amber marker on the product — including the badge on the
     one dashboard card that needs an answer — fell back to plain ink. */
  --spark-ink: oklch(38% 0.090 75);
  --action: #4338CA;
  --action-hover: #3730A3;
  --action-ink: oklch(98.5% 0.008 90);
  --welcome: oklch(90% 0.060 255);
  --welcome-soft: oklch(96% 0.020 255);
  --welcome-ink: oklch(25% 0.040 260);
  --danger: oklch(50% 0.170 28);
  --danger-soft: oklch(94% 0.030 28);
  --warning: oklch(52% 0.105 75);
  --warning-soft: oklch(94% 0.035 75);
  --focus-inner: var(--paper);
  --focus-outer: oklch(48% 0.220 286);

  /* Text on a saturated avatar chip. Deliberately NOT re-declared for dark:
     the chip's colour is fixed per user, so a themed ink would turn near-black
     in dark mode and drop the initials to 3.5:1 on the same blue field. */
  --avatar-ink: oklch(98.5% 0.008 90);

  /* Type. */
  --font-ui: "Be Vietnam Pro", sans-serif;
  --font-editorial: "Newsreader", Georgia, serif;
  --font-numeric: "tnum" 1, "lnum" 1;
  --type-display: clamp(2.75rem, 7vw, 6.5rem);
  --type-h1: clamp(2.25rem, 5vw, 4.75rem);
  --type-h2: clamp(1.8rem, 3.2vw, 3.35rem);
  --type-body: 1rem;
  --leading-display: 0.94;
  --leading-body: 1.62;
  --measure-copy: 65ch;
  --measure-wide: 75ch;

  --content-gutter: clamp(1rem, 3vw, 3rem);
  --content-wide: 90rem;
  --content-app: 80rem;

  /* Shared 4px spacing scale. */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* Geometry. */
  --radius-node: 3px;
  --radius-tile: 6px;
  --radius-control: 8px;
  --radius-card: 12px;
  --radius-dialog: 16px;
  --radius-pill: 999px;
  --control-h: 44px;

  /* Motion. */
  --duration-instant: 100ms;
  --duration-fast: 180ms;
  --duration-medium: 280ms;
  --duration-slow: 420ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0, 0, 0, 1);
  --ease-exit: cubic-bezier(0.3, 0, 1, 1);
  --ease-linear: linear;

  /* Elevation is for overlays, not ordinary cards. */
  --shadow-card: 0 1px 0 color-mix(in oklch, var(--ink) 8%, transparent);
  --shadow-overlay: 0 18px 60px color-mix(in oklch, var(--ink) 20%, transparent);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* Print records are always rendered on neutral paper, even from dark mode. */
  --print-paper: oklch(99.2% 0.005 90);
  --print-surface: oklch(99.6% 0.003 90);
  --print-ink: oklch(24.5% 0.038 260);
  --print-muted: oklch(43% 0.018 260);
  --print-line: oklch(84% 0.010 260);
  --print-line-strong: oklch(58% 0.014 260);

  /* Supporting application type scale. */
  --text-lg: 1.25rem;
  --text-base: 1rem;
  --text-sm: 0.875rem;
  --text-xs: 0.8125rem;
  --text-3xs: 0.6875rem;
  --text-4xs: 0.625rem;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --logo-lotus: #60A5FA;
  --logo-sage: #2DD4BF;
  --logo-spark: #FBBF24;
  --logo-ink: #F8FAFC;
  --paper: oklch(20% 0.025 260);
  --surface: oklch(23.5% 0.025 260);
  --surface-2: oklch(27.5% 0.028 260);
  --surface-3: oklch(31.5% 0.030 260);
  --ink: oklch(94.5% 0.010 90);
  --ink-2: oklch(79% 0.014 260);
  --muted: oklch(70% 0.014 260);
  --muted-2: oklch(65% 0.013 260);
  --line: oklch(36% 0.020 260);
  --line-strong: oklch(56% 0.018 260);
  --lotus: var(--logo-lotus);
  --lotus-soft: oklch(29% 0.060 263);
  --lotus-ink: oklch(80% 0.130 263);
  --sage: var(--logo-sage);
  --sage-deep: #5EEAD4;
  --sage-soft: #134E4A;
  --spark: var(--logo-spark);
  --spark-soft: oklch(29% 0.040 85);
  --spark-ink: oklch(85% 0.090 85);
  --action: #818CF8;
  --action-hover: #A5B4FC;
  --action-ink: oklch(21% 0.030 260);
  --welcome: oklch(35% 0.080 255);
  --welcome-soft: oklch(27% 0.035 255);
  --welcome-ink: oklch(95% 0.010 90);
  --danger: oklch(70% 0.140 28);
  --danger-soft: oklch(29% 0.042 28);
  --warning: oklch(78% 0.120 75);
  --warning-soft: oklch(29% 0.038 75);
  --focus-inner: var(--paper);
  --focus-outer: oklch(76% 0.160 286);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --logo-lotus: #60A5FA;
    --logo-sage: #2DD4BF;
    --logo-spark: #FBBF24;
    --logo-ink: #F8FAFC;
    --paper: oklch(20% 0.025 260);
    --surface: oklch(23.5% 0.025 260);
    --surface-2: oklch(27.5% 0.028 260);
    --surface-3: oklch(31.5% 0.030 260);
    --ink: oklch(94.5% 0.010 90);
    --ink-2: oklch(79% 0.014 260);
    --muted: oklch(70% 0.014 260);
    --muted-2: oklch(65% 0.013 260);
    --line: oklch(36% 0.020 260);
    --line-strong: oklch(56% 0.018 260);
    --lotus: var(--logo-lotus);
    --lotus-soft: oklch(29% 0.060 263);
    --lotus-ink: oklch(80% 0.130 263);
    --sage: var(--logo-sage);
    --sage-deep: #5EEAD4;
    --sage-soft: #134E4A;
    --spark: var(--logo-spark);
    --spark-soft: oklch(29% 0.040 85);
    --spark-ink: oklch(85% 0.090 85);
    --action: #818CF8;
    --action-hover: #A5B4FC;
    --action-ink: oklch(21% 0.030 260);
    --welcome: oklch(35% 0.080 255);
    --welcome-soft: oklch(27% 0.035 255);
    --welcome-ink: oklch(95% 0.010 90);
    --danger: oklch(70% 0.140 28);
    --danger-soft: oklch(29% 0.042 28);
    --warning: oklch(78% 0.120 75);
    --warning-soft: oklch(29% 0.038 75);
    --focus-inner: var(--paper);
    --focus-outer: oklch(76% 0.160 286);
  }
}

@media (pointer: coarse) {
  :root { --control-h: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 100ms;
    --duration-medium: 120ms;
    --duration-slow: 150ms;
  }
}