/**
 * HealthN.E.S.S. — Design Tokens
 * Central brand system for incremental implementation.
 * Preserves Stitch Material palette while exposing semantic brand aliases.
 *
 * Typography: Montserrat (display/nav/labels) · Manrope (body/UI) · Inter (Manrope fallback)
 * Do not import Ascend/Align product tokens here.
 */

:root {
  /* --------------------------------------------------------------------------
   * Brand colours (semantic)
   * ------------------------------------------------------------------------ */
  --color-deep-black: #000000;
  --color-charcoal-black: #121212;
  --color-charcoal-muted: #1a1a1a;
  --color-warm-grey: #2d2d2b;
  --color-metallic-gold: #f2ca50;
  --color-champagne-gold: #d3c5ad;
  --color-champagne-soft: #f0e0c8;
  --color-off-white: #f9f9f7;
  --color-muted-warm-grey: #99907c;
  --color-on-gold: #3c2f00;

  /* --------------------------------------------------------------------------
   * Stitch / Material surface system (preserve existing visuals)
   * ------------------------------------------------------------------------ */
  --color-background: #121413;
  --color-surface: #121413;
  --color-surface-dim: #121413;
  --color-surface-bright: #383a38;
  --color-surface-container-lowest: #0c0f0e;
  --color-surface-container-low: #1a1c1b;
  --color-surface-container: #1e201f;
  --color-surface-container-high: #282a29;
  --color-surface-container-highest: #333534;
  --color-surface-variant: #333534;
  --color-on-background: #e2e3e1;
  --color-on-surface: #e2e3e1;
  --color-on-surface-variant: #d0c5af;
  --color-outline: #99907c;
  --color-outline-variant: #4d4635;
  --color-primary: #f2ca50;
  --color-primary-container: #d4af37;
  --color-on-primary: #3c2f00;
  --color-secondary: #d3c5ad;
  --color-secondary-container: #524835;
  --color-surface-tint: #e9c349;
  --color-error: #ffb4ab;
  --color-on-error: #690005;
  --color-error-container: #93000a;

  /* --------------------------------------------------------------------------
   * Typography families
   * ------------------------------------------------------------------------ */
  --font-display: "Montserrat", system-ui, sans-serif;
  --font-heading: "Montserrat", system-ui, sans-serif;
  --font-label: "Montserrat", system-ui, sans-serif;
  --font-body: "Manrope", "Inter", system-ui, sans-serif;
  --font-ui: "Manrope", "Inter", system-ui, sans-serif;

  /* Type scale (matches Stitch homepage tokens) */
  --text-display-lg-size: 72px;
  --text-display-lg-line: 80px;
  --text-display-lg-tracking: -0.02em;
  --text-display-lg-weight: 700;

  --text-display-lg-mobile-size: 48px;
  --text-display-lg-mobile-line: 52px;
  --text-display-lg-mobile-tracking: -0.01em;
  --text-display-lg-mobile-weight: 700;

  --text-headline-md-size: 40px;
  --text-headline-md-line: 48px;
  --text-headline-md-weight: 700;

  --text-headline-sm-size: 32px;
  --text-headline-sm-line: 40px;
  --text-headline-sm-weight: 600;

  --text-body-lg-size: 18px;
  --text-body-lg-line: 32px;
  --text-body-lg-weight: 400;

  --text-body-md-size: 16px;
  --text-body-md-line: 28px;
  --text-body-md-weight: 400;

  --text-label-caps-size: 12px;
  --text-label-caps-line: 16px;
  --text-label-caps-tracking: 0.15em;
  --text-label-caps-weight: 600;

  /* --------------------------------------------------------------------------
   * Spacing
   * ------------------------------------------------------------------------ */
  --space-stack-xs: 4px;
  --space-stack-sm: 12px;
  --space-stack-md: 24px;
  --space-stack-lg: 48px;
  --space-section-gap: 160px;
  --space-section-gap-mobile: 80px;
  --space-gutter: 32px;
  --space-gutter-mobile: 20px;

  /* Mobile layout chrome — canonical offsets (safe-area aware) */
  --site-header-offset-mobile: calc(5.5rem + env(safe-area-inset-top, 0px));
  --mobile-sticky-clearance: calc(5.75rem + env(safe-area-inset-bottom, 0px));
  --mobile-modal-bottom-clearance: calc(5.75rem + env(safe-area-inset-bottom, 0px));

  /* --------------------------------------------------------------------------
   * Content widths
   * ------------------------------------------------------------------------ */
  --width-container-max: 1280px;
  --width-prose: 42rem;
  --width-narrow: 36rem;

  /* --------------------------------------------------------------------------
   * Border radii
   * Sharp-architectural default; Stitch HTML currently uses soft radii —
   * keep both so incremental work can converge without a redesign.
   * ------------------------------------------------------------------------ */
  --radius-none: 0;
  --radius-sm: 0.125rem;
  --radius-default: 0.25rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-full: 9999px;

  /* --------------------------------------------------------------------------
   * Shadows / elevation
   * ------------------------------------------------------------------------ */
  --shadow-soft: 0 20px 40px rgba(0, 0, 0, 0.5);
  --shadow-media: 0 25px 50px rgba(0, 0, 0, 0.5);
  --shadow-none: none;

  /* Hairline / glass helpers */
  --border-hairline: 1px solid rgba(153, 144, 124, 0.2);
  --glass-bg: rgba(18, 20, 19, 0.4);
  --glass-blur: 40px;

  /* --------------------------------------------------------------------------
   * Motion — shared cinematic language (use these everywhere)
   * ------------------------------------------------------------------------ */
  --duration-fast: 180ms;
  --duration-base: 320ms;
  --duration-slow: 520ms;
  --duration-cinematic: 720ms;
  --duration-reveal: 900ms;
  --duration-media: 1100ms;
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --reveal-distance: 1.35rem;
  --hover-lift: -1px;
  --stagger-step: 70ms;

  /* --------------------------------------------------------------------------
   * Breakpoint reference (documentation; media queries use raw values)
   * Primary: sm 640 · md 768 · lg 1024 · xl 1280
   * Also in use locally (do not mass-normalize in polish passes):
   * 389 (narrow gutter) · 700 · 800 · 900 · 960 · 1100
   * ------------------------------------------------------------------------ */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* --------------------------------------------------------------------------
   * Media placeholders (Work / Proof / Case / Video) — Phase F.4
   * ------------------------------------------------------------------------ */
  --media-placeholder-padding: 1.35rem 1.4rem;
  --media-placeholder-min-height: 12rem;
  --media-placeholder-label-size: 0.625rem;
  --media-placeholder-note-size: 0.875rem;
  --media-placeholder-gap: 0.4rem;
  --media-placeholder-inset: inset 0 0 0 1px rgba(153, 144, 124, 0.18);
  --media-placeholder-bg:
    linear-gradient(160deg, rgba(242, 202, 80, 0.07), transparent 48%),
    linear-gradient(180deg, var(--color-surface-container) 0%, var(--color-surface-container-lowest) 100%);
  --media-phone-aspect: 9 / 16;
}

/* Shared utility classes used by Stitch HTML (safe to share across screens) */
.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.hairline-border {
  border: var(--border-hairline);
}

.hairline-border-t {
  border-top: var(--border-hairline);
}

.hairline-border-b {
  border-bottom: var(--border-hairline);
}

.hairline-border-y {
  border-top: var(--border-hairline);
  border-bottom: var(--border-hairline);
}

.hover-gold:hover {
  background-color: var(--color-primary-container);
}

.grain-overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 10;
}

.cinematic-img {
  filter: contrast(1.1) saturate(0.85);
}

/* Narrow phones + all phones: dedicated mobile gutter */
@media (max-width: 767px) {
  :root {
    --space-gutter: var(--space-gutter-mobile);
  }
}

/* Skip link — keyboard access to primary content (clip pattern avoids horizontal overflow) */
.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  z-index: 200;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-label, Montserrat, system-ui, sans-serif);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 600;
}

.skip-link:focus {
  width: auto;
  height: auto;
  margin: 0;
  clip: auto;
  overflow: visible;
  left: 1rem;
  top: 1rem;
  padding: 0.75rem 1rem;
  outline: 2px solid var(--color-on-primary);
  outline-offset: 2px;
}

/* Shared media-empty frame — use for Work / Proof / Case / Video placeholders */
.media-placeholder {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--media-placeholder-gap);
  width: 100%;
  height: 100%;
  min-height: var(--media-placeholder-min-height);
  padding: var(--media-placeholder-padding);
  background: var(--media-placeholder-bg);
  border: 0;
  box-shadow: var(--media-placeholder-inset);
}

.media-placeholder__label {
  font-family: var(--font-label);
  font-size: var(--media-placeholder-label-size);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.media-placeholder__note {
  font-family: var(--font-body);
  font-size: var(--media-placeholder-note-size);
  line-height: 1.45;
  color: var(--color-on-surface-variant);
  max-width: 22rem;
}

.material-symbols-outlined {
  font-family: "Material Symbols Outlined", sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 1.125em;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: "liga";
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  speak: never;
}