/* =========================================================================
   Human Centered Holdings: Design Tokens
   Palette is the original HCH brand palette (unchanged).
   Type, spacing, shape and elevation follow the gallery-wall register:
   whisper-weight display type, hairline rules, pill actions, flat surfaces.
   ========================================================================= */

:root {
  /* --- Brand palette (raw, theme-agnostic; unchanged) -------------------- */
  --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 brand 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;

  /* Legacy weight tokens kept for any remaining references. */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  --tracking-display: -0.018em;
  --tracking-heading: -0.018em;
  --tracking-body: 0em;
  --tracking-eyebrow: 0.12em;

  /* --- Spacing scale ------------------------------------------------------ */
  --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: 5rem; /* 80px section rhythm */
  --space-10: 8rem;

  --section-pad: clamp(3.5rem, 2.25rem + 4.5vw, 5rem);

  /* Device chrome (notch, home indicator, rounded corners). Requires
     viewport-fit=cover on the meta viewport tag to be non-zero. */
  --safe-top: constant(safe-area-inset-top, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: constant(safe-area-inset-right, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: constant(safe-area-inset-bottom, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: constant(safe-area-inset-left, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* --- Layout ------------------------------------------------------------ */
  --container: 69rem; /* ~1104px primary frame */
  --container-narrow: 38rem; /* ~608px reading measure */
  --container-wide: 75rem; /* 1200px, hero + gallery rows */
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 2.5rem);
  --col-gap: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  --sticky-offset: calc(5.75rem + env(safe-area-inset-top, 0px));

  /* --- Radius: 8px surfaces, pill actions, badge capsules ---------------- */
  --radius-xs: 3px;
  --radius-sm: 8px;
  --radius-md: 8px;
  --radius-lg: 8px;
  --radius-pill: 80px; /* buttons and pill containers */
  --radius-badge: 1584px; /* badges, tags, nav pills only */

  /* --- 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;
}

/* =========================================================================
   DARK THEME (default): deep ink-navy paper, warm off-white text.
   Colours unchanged. Depth comes from surface layering, never shadows.
   ========================================================================= */
:root,
[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-notice: #5ba3e0;
  --color-status-wait: #e3b23c;
  --color-status-alert: #e05c4c;
  --color-status-success: #5cb87a;

  --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;

  /* Elevation is surface contrast, not shadow. */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;

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

  /* Photography: colour, gently muted, with a whisper of the page tone. */
  --img-grayscale: 0%;
  --img-saturate: 0.88;
  --img-brightness: 0.92;
  --img-tint: rgba(8, 16, 22, 0.16);
  --img-tint-blend: multiply;
}

/* =========================================================================
   LIGHT THEME: warm institutional paper (colours unchanged)
   ========================================================================= */
[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-notice: #2b74c4;
  --color-status-wait: #c49212;
  --color-status-alert: #c43c32;
  --color-status-success: #2f8f52;

  --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: none;
  --shadow-md: none;
  --shadow-lg: none;

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

  /* Photography: colour, gently muted, with a light navy wash for cohesion. */
  --img-grayscale: 0%;
  --img-saturate: 0.92;
  --img-brightness: 1;
  --img-tint: rgba(15, 40, 64, 0.1);
  --img-tint-blend: multiply;
}