/* ============================================================
   odNOVA — design tokens
   Captured 1:1 from `odNOVA Homepage v15.dc.html` (July 2026).
   DO NOT change values here without a design decision —
   this file exists so values are named, not to invent new ones.
   ============================================================ */

:root {
  /* ---- Type families ---- */
  --font-serif: 'Newsreader', serif;        /* display / editorial accents */
  --font-sans: 'Archivo', sans-serif;       /* body */
  --font-mono: 'IBM Plex Mono', monospace;  /* eyebrows / labels / micro-copy */

  /* ---- Grounds (dark navys) ---- */
  --navy-body: #0A1018;      /* page background + pinned atmosphere */
  --navy-section: #0B1119;   /* consultation + reviews sections */
  --navy-deep: #0F1520;      /* responsible aesthetics */
  --navy-near-black: #05070B;/* clinician section + footer */
  --navy-contact: #080B10;   /* contact + enquiry */
  --navy-card: #12151D;      /* quote card ground; dark button text */
  --navy-form-card: #0F131A; /* enquiry form card */
  --navy-menu: #090C12;      /* mobile menu ground */
  --navy-img-well: #04060A;  /* clinician image well */

  /* ---- Journal — dark mineral green (v17 locked direction) ---- */
  --journal-green: #12312D;      /* section ground */
  --journal-green-deep: #0E2926; /* reserved deeper stop */
  --journal-text: #F1ECE3;       /* headings / titles */
  --journal-muted: #B9C6BF;      /* body / tags */
  --journal-gold: #C09A63;       /* accents — shared brand gold */
  --journal-line: rgba(241, 236, 227, 0.18); /* rules */

  /* ---- Responsible-aesthetics principle fields (v19 — one deep blue family) ---- */
  --principle-1: #101A27;    /* deep ink blue */
  --principle-2: #152536;    /* mineral navy */
  --principle-3: #1B3044;    /* muted clinical blue */
  --principle-4: #233A4E;    /* soft blue-slate */

  /* ---- Creams (light sections) ---- */
  --cream-approach: #EDE8DF; /* the approach section; also light-on-dark UI ink */
  --cream-pillars: #E3DAC8;  /* two pillars section */
  --cream-panel: #E7E1D0;    /* treatments + results sections */
  --cream-card: #F4F1EA;     /* pillar cards */

  /* ---- Light text on dark ---- */
  --text-hi: #FBF9F4;        /* hero headline / brightest */
  --text-head: #EEF2F6;      /* dark-section headings */
  --text-warm: #F2EEE6;      /* wordmark / warm light */
  --text-body: #A7B2C0;      /* dark-section body */
  --text-body-2: #BCC6D2;    /* hero sub / creds */
  --text-soft: #93A0B0;      /* consent micro-copy */

  /* ---- Dark text on cream ---- */
  --ink: #191C22;            /* cream-section headings + links */
  --ink-body: #4A4D52;       /* cream-section body */
  --ink-card: #33363B;       /* pillar card body */
  --ink-soft: #6E6A61;       /* cream eyebrows / captions */

  /* ---- Gold accent family ---- */
  --gold: #C09A63;           /* primary accent: dots, dashes, borders */
  --gold-soft: #C9B79A;      /* stars, footer tag, watermarks */
  --gold-deep: #8C7150;      /* accent dashes / borders on cream */
  --gold-btn: #D9C49E;       /* "Browse all treatments" button */
  --gold-pale: #E7D3AC;      /* men's section accent + button */

  /* ---- Men's section bronze gradient stops ---- */
  --bronze-1: #20170B;
  --bronze-2: #140D05;
  --bronze-3: #0C0703;

  /* ---- Hairlines ---- */
  --line-on-dark: rgba(237, 232, 223, 0.14);  /* list rules on navy */
  --line-on-dark-soft: rgba(237, 232, 223, 0.12);
  --line-on-dark-faint: rgba(237, 232, 223, 0.1);
  --line-on-cream: rgba(26, 30, 34, 0.16);    /* rules on cream (tools) */
  --line-on-cream-soft: rgba(26, 30, 34, 0.12);

  /* ---- Layout ---- */
  --wrap-max: 1320px;        /* standard section container */
  --hero-max: 1440px;        /* hero + nav container */
  --pad-x: 60px;             /* desktop container padding */
  --pad-x-mobile: 24px;      /* <=860px container padding */
  --sec-pad-y: 108px;        /* desktop section padding */
  --sec-pad-y-mobile: 74px;  /* <=860px section padding */

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Breakpoints (CSS custom properties cannot drive @media — documented here):
   - 1120px  nav collapses to hamburger; hero scales down; announcement shortens
   - 860px   single-column grids; section padding 74px; container padding 24px
*/