/* =========================================================================
   Human Centered Holdings — Design Tokens
   Derived directly from the brand direction document (HCH-DSN-2026-001).
   Palette, type scale, spacing and motion are the single source of truth.
   ========================================================================= */

:root {
  /* --- Brand palette (raw, theme-agnostic) ------------------------------ */
  --parchment: #f2efe7;
  --warm-stone: #e8e4d7;
  --warm-stone-deep: #ddd8c8;
  --deep-navy: #0f2840;
  --navy-lift: #1a3e5e;
  --forest-teal: #1b474d;
  --teal-lift: #2c6a72;
  --ink: #1a1814;
  --graphite: #3d3a33;
  --muted-stone: #7a7567;

  /* --- Typography ------------------------------------------------------- */
  --font-serif: "Source Serif 4 Variable", "Source Serif 4", Georgia,
    "Times New Roman", serif;
  --font-sans: "Inter Variable", "Inter", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Helvetica, Arial, sans-serif;

  /* Fluid type scale — mapped from the PDF type scale, made responsive. */
  --fs-display: clamp(2.6rem, 1.4rem + 4.4vw, 3.5rem); /* ~56 */
  --fs-h1: clamp(2.1rem, 1.5rem + 2.6vw, 2.75rem); /* ~40-44 */
  --fs-h2: clamp(1.55rem, 1.2rem + 1.5vw, 1.95rem); /* ~28-31 */
  --fs-h3: clamp(1.2rem, 1.05rem + 0.6vw, 1.35rem); /* ~20-22 */
  --fs-body-lg: 1.125rem; /* 18 */
  --fs-body: 1rem; /* 16 */
  --fs-caption: 0.8125rem; /* 13 */
  --fs-eyebrow: 0.6875rem; /* 11 */

  --lh-tight: 1.08;
  --lh-snug: 1.2;
  --lh-body: 1.62;

  --tracking-display: -0.018em;
  --tracking-eyebrow: 0.12em;

  /* --- Spacing scale (8px base, institutional generosity) --------------- */
  --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; /* ≥96px section rhythm desktop */
  --space-10: 8rem;

  --section-pad: clamp(4rem, 2.5rem + 6vw, 6.5rem);

  /* --- Layout ----------------------------------------------------------- */
  /* Content sits in a centred, framed column — not edge-to-edge. */
  --container: 66rem; /* ~1056px primary frame */
  --container-narrow: 42rem; /* reading measure, ~60-72ch */
  --container-wide: 74rem; /* ~1184px, used for hero + gallery rows */
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 2.5rem);
  --col-gap: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);

  /* --- Radius (restrained, never over-rounded) -------------------------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;

  /* --- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 300ms;

  --hairline: 1px;
}

/* =========================================================================
   LIGHT THEME (default) — warm institutional paper
   ========================================================================= */
:root,
[data-theme="light"] {
  color-scheme: light;

  --color-bg: var(--parchment);
  --color-surface: #ece8dc;
  --color-surface-2: var(--warm-stone);
  --color-surface-offset: var(--deep-navy);

  --color-border: rgba(15, 40, 64, 0.16);
  --color-border-strong: rgba(15, 40, 64, 0.32);

  --color-text: var(--ink);
  --color-text-muted: var(--graphite);
  --color-text-faint: var(--muted-stone);

  --color-primary: var(--deep-navy);
  --color-primary-hover: #16395a;
  --color-accent: var(--forest-teal);
  --color-accent-hover: #245a61;

  --color-text-inverse: var(--parchment);

  /* The full-bleed statement band: navy paper, cream text. */
  --band-bg: var(--deep-navy);
  --band-text: var(--parchment);
  --band-muted: rgba(242, 239, 231, 0.66);
  --band-border: rgba(242, 239, 231, 0.16);
  --band-accent: #7fb6ad;

  --shadow-sm: 0 1px 2px rgba(15, 40, 64, 0.06);
  --shadow-md: 0 12px 30px -18px rgba(15, 40, 64, 0.28);
  --shadow-lg: 0 30px 60px -28px rgba(15, 40, 64, 0.3);

  --selection-bg: rgba(27, 71, 77, 0.18);

  /* Photography treatment — navy duotone, annual-report register. */
  --img-grayscale: 100%;
  --img-brightness: 1;
  --img-tint: rgba(15, 40, 64, 0.4);
  --img-tint-blend: multiply;
}

/* =========================================================================
   DARK THEME — deep ink-navy paper, warm off-white text.
   Designed intentionally, not inverted. The statement band flips to parchment.
   ========================================================================= */
[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #0b161e;
  --color-surface: #11212c;
  --color-surface-2: #172c38;
  --color-surface-offset: #ece6d6;

  --color-border: rgba(233, 226, 209, 0.14);
  --color-border-strong: rgba(233, 226, 209, 0.3);

  --color-text: #ece6d6;
  --color-text-muted: #b9b4a6;
  --color-text-faint: #8a8579;

  --color-primary: #ece6d6;
  --color-primary-hover: #ffffff;
  --color-accent: #7fb6ad;
  --color-accent-hover: #98c8c0;

  --color-text-inverse: #0b161e;

  /* Inverted band: warm parchment plate against the dark page. */
  --band-bg: #ece6d6;
  --band-text: #14212c;
  --band-muted: rgba(20, 33, 44, 0.66);
  --band-border: rgba(20, 33, 44, 0.16);
  --band-accent: #1b474d;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 14px 34px -18px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 34px 64px -28px rgba(0, 0, 0, 0.66);

  --selection-bg: rgba(127, 182, 173, 0.26);

  --img-grayscale: 100%;
  --img-brightness: 0.82;
  --img-tint: rgba(8, 16, 22, 0.34);
  --img-tint-blend: multiply;
}

/* Honour OS preference before any manual choice is stored. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    --color-bg: #0b161e;
    --color-surface: #11212c;
    --color-surface-2: #172c38;
    --color-surface-offset: #ece6d6;
    --color-border: rgba(233, 226, 209, 0.14);
    --color-border-strong: rgba(233, 226, 209, 0.3);
    --color-text: #ece6d6;
    --color-text-muted: #b9b4a6;
    --color-text-faint: #8a8579;
    --color-primary: #ece6d6;
    --color-primary-hover: #ffffff;
    --color-accent: #7fb6ad;
    --color-accent-hover: #98c8c0;
    --color-text-inverse: #0b161e;
    --band-bg: #ece6d6;
    --band-text: #14212c;
    --band-muted: rgba(20, 33, 44, 0.66);
    --band-border: rgba(20, 33, 44, 0.16);
    --band-accent: #1b474d;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 14px 34px -18px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 34px 64px -28px rgba(0, 0, 0, 0.66);
    --selection-bg: rgba(127, 182, 173, 0.26);
    --img-grayscale: 100%;
    --img-brightness: 0.82;
    --img-tint: rgba(8, 16, 22, 0.34);
    --img-tint-blend: multiply;
  }
}