/* =========================================================================
   Helen West — design tokens
   Colour, typography and spacing values below are copied verbatim from the
   Helen West Design System (tokens/colors.css, typography.css, spacing.css)
   so this file can be re-synced when the design system changes.

   Two things differ from the design system, both deliberate and documented
   in deployment-notes.md:
     1. Fonts are self-hosted here instead of loaded from Google Fonts.
     2. A small "site additions" block at the end adds three values needed to
        meet WCAG 2.2 AA. Nothing in the original palette was altered.
   ========================================================================= */

/* ---- Self-hosted fonts (replaces the design system's tokens/fonts.css) ---- */

/* Marcellus — SIL Open Font License 1.1, see assets/fonts/marcellus-ofl.txt */
@font-face {
  font-family: 'Marcellus';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/marcellus-latin-400.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;
}
@font-face {
  font-family: 'Marcellus';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/marcellus-latin-ext-400.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;
}

/* Karla (variable 300–800) — SIL Open Font License 1.1, see assets/fonts/karla-ofl.txt */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/karla-latin-var.woff2') format('woff2-variations');
  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;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/karla-latin-ext-var.woff2') format('woff2-variations');
  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;
}

/* Noto Sans SC, subset to only the 19 Chinese characters this site uses (3.9 KB).
   Neither Marcellus nor Karla contains CJK glyphs, so without this the Chinese
   lines fall back to whatever the visitor's operating system happens to provide.
   SIL Open Font License 1.1. Regenerate with the command in deployment-notes.md. */
@font-face {
  font-family: 'Noto Sans SC Subset';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/noto-sans-sc-subset.woff2') format('woff2');
  unicode-range: U+4E2D, U+4E3A, U+4F60, U+4FE1, U+5229, U+52A1, U+5353, U+548C,
    U+575A, U+6587, U+670D, U+6D41, U+7528, U+7684, U+80FD, U+82F1, U+8BDA,
    U+8D8A, U+97E7;
}

/* ---- colors.css (verbatim from the design system) ---- */
:root {
  /* Base — warm neutrals */
  --cream-50: #FBF7F1; --cream-100: #F5EEE4; --sand-200: #E9DECD; --sand-300: #D9CBB5;
  --stone-400: #A6977F; --umber-600: #6C5D4B; --umber-700: #4E4335; --ink-900: #2B241B;
  /* Primary — clay terracotta */
  --clay-100: #F7E5DA; --clay-300: #DE9A79; --clay-500: #BC5B34; --clay-600: #A34C2A; --clay-700: #84391D;
  /* Secondary — sage */
  --sage-100: #E9EDE1; --sage-300: #ADBA97; --sage-500: #6F7D5C; --sage-700: #4C573E;
  /* Accent — brass */
  --brass-400: #C4A36E; --brass-500: #B08D57; --brass-700: #8A6A3B;
  /* Semantic */
  --success: #4C7A4E; --warning: #B9862F; --error: #B4472F; --info: #54708F;
  /* Aliases */
  --surface-page: var(--cream-50); --surface-card: #FFFFFF;
  --surface-sunken: var(--cream-100); --surface-inverse: var(--ink-900);
  --text-body: var(--ink-900); --text-muted: var(--umber-600);
  --text-inverse: #F8F3EA; --text-on-primary: #FFF8F2;
  --border-subtle: var(--sand-200); --border-strong: var(--sand-300);
  --action-primary: var(--clay-500); --action-primary-hover: var(--clay-600);
  --action-primary-active: var(--clay-700);
  --focus-ring: 0 0 0 3px rgba(188, 91, 52, .35);
  --link: var(--clay-600); --link-hover: var(--clay-700);
}

/* ---- typography.css (verbatim from the design system) ---- */
:root {
  --font-display: 'Marcellus', Georgia, serif;
  --font-body: 'Karla', -apple-system, 'Segoe UI', sans-serif;
  --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 18px;
  --text-xl: 22px; --text-2xl: 28px; --text-3xl: 36px; --text-4xl: 48px; --text-5xl: 64px;
  --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.55;
  --tracking-caps: .14em; --tracking-wide: .04em;
  --weight-regular: 400; --weight-medium: 500; --weight-bold: 700;
}

/* ---- spacing.css (verbatim from the design system) ---- */
:root {
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(43, 36, 27, .07);
  --shadow-card: 0 2px 14px rgba(43, 36, 27, .09);
  --shadow-lift: 0 10px 30px rgba(43, 36, 27, .14);
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: 140ms;
  --dur-med: 240ms;
}

/* ---- Site additions (not in the design system) ----------------------------
   Three values added to reach WCAG 2.2 AA. Rationale:

   --clay-800     A press state one step darker than clay-700, needed because
                  the primary button's resting state moves down to clay-600.
   --border-input Input borders. The design system's --sand-300 sits at 1.60:1
                  against white, under the 3:1 minimum for control boundaries
                  (WCAG 1.4.11). This value reaches 3.31:1 and stays in family.
   --font-zh      Font stack for Chinese text, subset face first.

   Also note: the primary button now rests on --clay-600 rather than --clay-500.
   White text on clay-500 measures 4.26:1, just under the 4.5:1 needed for 16px
   bold. Resting on clay-600 gives 5.51:1. Hover and press shift down from there.
   -------------------------------------------------------------------------- */
:root {
  --clay-800: #6E2F17;
  --border-input: #9C8B71;
  --font-zh: 'Noto Sans SC Subset', 'Noto Sans SC', 'PingFang SC',
    'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --action-primary-rest: var(--clay-600);
}