/* ==========================================================================
   BOWEN COMMONS / 香港博文堂
   DESIGN TOKENS
   --------------------------------------------------------------------------
   This file is the single source of truth for the visual language.
   Change a value here and it propagates across every page.

   Layers:
     1. Palette primitives   raw colour values, never used directly in markup
     2. Semantic colour      roles (surface, text, border, accent)
     3. Typography           families, fluid sizes, line heights, tracking
     4. Space and layout     spacing scale, gutters, container, header
     5. Form and motion      radii, borders, duration, easing, image treatment
     6. Dark scheme          semantic overrides only
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---------------------------------------------------------------- 1. PALETTE
     A neutral ink-and-paper palette. Warmth is kept very low so that the
     black and white photography sets the temperature, not the background.
     The accent is a Chinese seal vermilion (印章朱紅), used sparingly. */

  --palette-paper-50: #fbfaf8;
  --palette-paper-100: #f4f3f0;
  --palette-paper-200: #eae8e3;
  --palette-paper-300: #dedbd4;

  --palette-ink-900: #121211;
  --palette-ink-800: #1d1c1a;
  --palette-ink-700: #35332f;
  --palette-ink-600: #4d4a45;
  --palette-ink-500: #66635c;
  --palette-ink-400: #89857d;

  --palette-seal-600: #8f3025;
  --palette-seal-500: #a13a2b;
  --palette-seal-400: #bf4e3c;
  --palette-seal-300: #e07763;

  --palette-white: #ffffff;
  --palette-black: #000000;

  /* ------------------------------------------------------------- 2. SEMANTIC */

  --bg: var(--palette-paper-100);
  --bg-elevated: var(--palette-paper-50);
  --bg-sunken: var(--palette-paper-200);
  --bg-inverse: var(--palette-ink-900);
  --bg-overlay: rgb(244 243 240 / 0.985);

  --text: var(--palette-ink-900);
  --text-strong: var(--palette-ink-900);
  --text-soft: var(--palette-ink-700);
  --text-muted: var(--palette-ink-500);
  --text-faint: var(--palette-ink-400);
  --text-inverse: var(--palette-paper-50);
  --text-on-accent: var(--palette-paper-50);

  --accent: var(--palette-seal-500);
  --accent-hover: var(--palette-seal-600);
  --accent-soft: rgb(161 58 43 / 0.08);
  --accent-line: rgb(161 58 43 / 0.35);

  --border: rgb(18 18 17 / 0.14);
  --border-strong: rgb(18 18 17 / 0.28);
  --border-subtle: rgb(18 18 17 / 0.07);
  --border-inverse: rgb(244 243 240 / 0.22);

  --focus-ring: var(--palette-seal-500);
  --selection-bg: var(--palette-seal-500);
  --selection-text: var(--palette-paper-50);

  /* Photographic treatment is a token so imagery can be re-graded in one place.
     Set --img-filter to `none` to show the Pexels originals in full colour. */
  --img-filter: grayscale(1) contrast(1.04) brightness(0.99);
  --img-filter-hover: grayscale(1) contrast(1.07) brightness(1.02);
  --logo-filter: none;

  /* ------------------------------------------------------------ 3. TYPOGRAPHY
     Noto Serif TC (思源宋體) carries display type: a contemporary Song face that
     holds the same brush-and-knife logic as the calligraphic wordmark without
     imitating it. Noto Sans TC (思源黑體) carries running text and interface. */

  --font-display: "Noto Serif TC", "Source Han Serif TC", "Songti TC", "PMingLiU", serif;
  --font-body: "Noto Sans TC", "Source Han Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Fluid type scale. The second value is the preferred viewport expression,
     the first and third are the safety rails. */
  --fs-hero: clamp(3rem, 1.6rem + 5.6vw, 6.5rem);
  --fs-display: clamp(2.4rem, 1.5rem + 3.4vw, 4.5rem);
  --fs-h2: clamp(1.9rem, 1.25rem + 2.2vw, 3rem);
  --fs-h3: clamp(1.35rem, 1.1rem + 0.9vw, 1.85rem);
  --fs-h4: clamp(1.12rem, 1rem + 0.4vw, 1.3rem);
  --fs-lead: clamp(1.05rem, 0.98rem + 0.32vw, 1.22rem);
  --fs-body: clamp(1rem, 0.96rem + 0.14vw, 1.0625rem);
  --fs-small: 0.875rem;
  --fs-label: 0.6875rem;
  --fs-meta: 0.75rem;

  --lh-hero: 1.18;
  --lh-display: 1.24;
  --lh-heading: 1.38;
  --lh-lead: 1.85;
  --lh-body: 1.95;
  --lh-tight: 1.4;

  --tracking-hero: 0.02em;
  --tracking-display: 0.01em;
  --tracking-body: 0.015em;
  --tracking-label: 0.18em;
  --tracking-wordmark: 0.16em;

  /* ---------------------------------------------------------- 4. SPACE, GRID */

  --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: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --gutter: clamp(1.25rem, 4.5vw, 4.5rem);
  --container: 82.5rem;               /* 1320px */
  --container-narrow: 48rem;          /* 768px, long-form reading */
  --grid-gap: clamp(1.5rem, 3vw, 3.5rem);

  --section-pad: clamp(4.5rem, 9vw, 9rem);
  --section-pad-tight: clamp(3.5rem, 6vw, 6rem);

  --header-h: 4.5rem;                 /* 72px */
  --hero-pad-top: clamp(6rem, 8vw, 7.5rem);

  /* ------------------------------------------------------ 5. FORM AND MOTION */

  --radius-none: 0;
  --radius-control: 999px;            /* interactive controls only, see DESIGN.md */
  --radius-media: 0;

  --border-width: 1px;
  --hairline: var(--border-width) solid var(--border);
  --hairline-subtle: var(--border-width) solid var(--border-subtle);

  --shadow-none: none;
  --shadow-overlay: 0 1.5rem 4rem rgb(18 18 17 / 0.16);

  --dur-instant: 90ms;
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 520ms;
  --dur-reveal: 760ms;
  --stagger: 70ms;

  --ease-standard: cubic-bezier(0.3, 0.7, 0.4, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --z-header: 100;
  --z-menu: 200;
  --z-skip: 300;
}

/* --------------------------------------------------------------- 6. DARK SCHEME
   Applied with data-theme="dark" on <html>. The palette inverts to ink paper:
   the page becomes the ink, the type becomes the paper. The seal red lifts in
   lightness so it keeps AA contrast on a dark ground. */

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #121211;
  --bg-elevated: #191918;
  --bg-sunken: #0c0c0b;
  --bg-inverse: #f4f3f0;
  --bg-overlay: rgb(10 10 9 / 0.985);

  --text: #ece9e3;
  --text-strong: #fbfaf8;
  --text-soft: #cfcac1;
  --text-muted: #a6a29a;
  --text-faint: #817d75;
  --text-inverse: #121211;
  --text-on-accent: #16110f;

  --accent: #e07763;
  --accent-hover: #ee8c79;
  --accent-soft: rgb(224 119 99 / 0.12);
  --accent-line: rgb(224 119 99 / 0.4);

  --border: rgb(236 233 227 / 0.16);
  --border-strong: rgb(236 233 227 / 0.32);
  --border-subtle: rgb(236 233 227 / 0.08);
  --border-inverse: rgb(18 18 17 / 0.22);

  --focus-ring: #e07763;
  --selection-bg: #e07763;
  --selection-text: #121211;

  --img-filter: grayscale(1) contrast(1.02) brightness(0.86);
  --img-filter-hover: grayscale(1) contrast(1.05) brightness(0.94);
  --logo-filter: invert(1);

  --shadow-overlay: 0 1.5rem 4rem rgb(0 0 0 / 0.5);
}

/* Two reads of the same preference: the OS setting is the default, an explicit
   choice on the switch wins. tokens.css is loaded before paint, so there is no
   flash of the wrong scheme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #121211;
    --bg-elevated: #191918;
    --bg-sunken: #0c0c0b;
    --bg-inverse: #f4f3f0;
    --bg-overlay: rgb(10 10 9 / 0.985);

    --text: #ece9e3;
    --text-strong: #fbfaf8;
    --text-soft: #cfcac1;
    --text-muted: #a6a29a;
    --text-faint: #817d75;
    --text-inverse: #121211;
    --text-on-accent: #16110f;

    --accent: #e07763;
    --accent-hover: #ee8c79;
    --accent-soft: rgb(224 119 99 / 0.12);
    --accent-line: rgb(224 119 99 / 0.4);

    --border: rgb(236 233 227 / 0.16);
    --border-strong: rgb(236 233 227 / 0.32);
    --border-subtle: rgb(236 233 227 / 0.08);
    --border-inverse: rgb(18 18 17 / 0.22);

    --focus-ring: #e07763;
    --selection-bg: #e07763;
    --selection-text: #121211;

    --img-filter: grayscale(1) contrast(1.02) brightness(0.86);
    --img-filter-hover: grayscale(1) contrast(1.05) brightness(0.94);
    --logo-filter: invert(1);

    --shadow-overlay: 0 1.5rem 4rem rgb(0 0 0 / 0.5);
  }
}

/* Respect a reader's request to reduce motion at the token level. Components
   also check the media query, this is the global safety net. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms;
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-reveal: 0ms;
    --stagger: 0ms;
  }
}