/* ============================================================================
 SLEEP SOLUTIONS - Air Liquide Healthcare Australia
 Foundational design tokens: colour + type
 Built on the Air Liquide corporate identity (2022 Brand Book) adapted for the
 patient-facing Sleep Solutions website (E-E-A-T led WordPress replatform).
 ============================================================================ */

/* ---- Webfonts -------------------------------------------------------------
 Brand fonts: ITC Lubalin Graph (display) + Roboto (body) + handwriting.
 ITC Lubalin Graph is a licensed commercial face - SUBSTITUTED here with
 Rokkitt, the closest free geometric slab serif (rounded terminals, single-
 story 'a', full weight range incl. extra-light). Swap to the licensed face
 in production. Roboto is the exact brand body font (free).
 Handwriting: the brand's external face is Arsilon (licensed) and its free
 internal counterpart is Kaushan Script - we load Kaushan as the stand-in.  */
@import url('https://fonts.googleapis.com/css2?family=Rokkitt:wght@300;400;500;600;700&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&family=Kaushan+Script&display=swap');

:root {
  /* ======================================================================
   1. BRAND CORE  - the three identity colours (blue, red, white)
   ====================================================================== */
  --al-blue:     #375F9B;  /* PANTONE 7684 C - primary identity blue */
  --al-red:    #D7001E;  /* PANTONE 2035 C - accent / emphasis only  */
  --al-white:    #FFFFFF;

  /* Extended brand blues (from the main palette) */
  --al-blue-dark:  #003264;  /* deep navy - headings on light, footers */
  --al-blue-vibrant: #00349B;  /* digital "vibrant blue" for large areas */
  --al-cyan:     #50C3E1;  /* light energising blue - highlights    */
  --al-healthcare:   #4696CD;  /* the Healthcare WBL accent blue    */

  /* ======================================================================
   2. NEUTRALS  - warm-cool grey ramp (white is a MAJOR brand component)
   ====================================================================== */
  --grey-000:    #FFFFFF;
  --grey-50:     #F6F8FB;  /* page tint - barely-there blue-white   */
  --grey-100:    #EDF1F6;  /* card / section alt background     */
  --grey-200:    #EBEBEB;  /* brand light grey - hairlines, dividers  */
  --grey-300:    #D5DCE4;  /* borders             */
  --grey-400:    #96A5AF;  /* brand secondary grey - muted icons    */
  --grey-500:    #6B7884;  /* secondary text          */
  --grey-700:    #3C4A57;  /* body text on white (80% black feel)   */
  --grey-900:    #1A222B;  /* near-black headings         */
  --black:     #000000;

  /* ======================================================================
   3. SEMANTIC SURFACES + TEXT
   ====================================================================== */
  --bg-page:     var(--grey-50);
  --bg-surface:    var(--grey-000);
  --bg-subtle:   var(--grey-100);
  --bg-brand:    var(--al-blue);
  --bg-brand-deep:   var(--al-blue-dark);

  --fg-1:      var(--grey-900);  /* primary text / headings     */
  --fg-2:      var(--grey-700);  /* body          */
  --fg-3:      var(--grey-500);  /* secondary / captions      */
  --fg-on-brand:   #FFFFFF;
  --fg-on-brand-soft:  rgba(255,255,255,.78);

  --link:      var(--al-blue);
  --link-hover:    var(--al-blue-dark);

  /* ======================================================================
   4. STATUS  (clinical, calm - sparing use of red)
   ====================================================================== */
  --ok:      #2E8B57;
  --ok-bg:     #E7F3EC;
  --warn:      #B8860B;
  --warn-bg:     #FBF3E0;
  --danger:     var(--al-red);
  --danger-bg:    #FCE8EA;
  --info:     var(--al-healthcare);
  --info-bg:    #E8F2F9;

  /* ======================================================================
   5. TYPE FAMILIES
   ====================================================================== */
  --font-display: 'Rokkitt', 'ITC Lubalin Graph', Georgia, serif;  /* titles */
  --font-body:  'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-accent:  'Kaushan Script', cursive;  /* Arsilon (licensed) → Kaushan substitute; quotes & signatures only */

  /* Type scale (1.250 major-third on a 16px base; display steps up steeper) */
  --text-xs:  0.75rem; /* 12px - legal, captions    */
  --text-sm:  0.875rem;  /* 14px - meta, labels     */
  --text-base:  1rem;  /* 16px - body       */
  --text-md:  1.125rem;  /* 18px - lead body      */
  --text-lg:  1.375rem;  /* 22px - small headings     */
  --text-xl:  1.75rem; /* 28px - h3         */
  --text-2xl: 2.25rem; /* 36px - h2         */
  --text-3xl: 3rem;  /* 48px - h1         */
  --text-4xl: 4rem;  /* 64px - hero display     */

  --leading-tight:  1.12;
  --leading-snug: 1.28;
  --leading-normal: 1.6;

  --tracking-tight: -0.01em;
  --tracking-caps:  0.08em; /* HEALTHCARE-style spaced capitals */

  /* ======================================================================
   6. RADII, SHADOW, SPACING, LAYOUT
   ====================================================================== */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  18px;
  --r-xl:  28px;
  --r-pill: 999px;

  /* Soft, low, cool-tinted shadows - clean & clear, never heavy */
  --shadow-xs: 0 1px 2px rgba(16,42,77,.06);
  --shadow-sm: 0 2px 8px rgba(16,42,77,.07);
  --shadow-md: 0 8px 24px rgba(16,42,77,.09);
  --shadow-lg: 0 18px 48px rgba(16,42,77,.12);

  --space-1: 4px; --space-2: 8px; --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;
  --space-9: 96px;  --space-10: 128px;

  --maxw-prose: 68ch;
  --maxw-content: 1200px;
  --gutter:   clamp(20px, 5vw, 64px);
}

/* ============================================================================
 SEMANTIC ELEMENT STYLES  (opt-in via .ss-type scope so the tokens above can
 be imported without forcing global resets)
 ============================================================================ */
.ss-type {
  font-family: var(--font-body);
  color: var(--fg-2);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ss-type h1, .ss-h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--al-blue-dark);
  text-wrap: balance;
}
.ss-type h2, .ss-h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--al-blue-dark);
  text-wrap: balance;
}
.ss-type h3, .ss-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--al-blue-dark);
}
.ss-type h4, .ss-h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}
.ss-type p, .ss-body { margin: 0 0 1em; max-width: var(--maxw-prose); }
.ss-lead {
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--fg-2);
}
.ss-type a, .ss-link { color: var(--link); text-decoration: none; }
.ss-type a:hover, .ss-link:hover { color: var(--link-hover); text-decoration: underline; }

/* Spaced capitals - echoes the "HEALTHCARE" lockup under the wordmark */
.ss-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--al-healthcare);
}
/* Red is reserved for a single emphasised word/line, never whole headings */
.ss-emphasis { color: var(--al-red); }

.ss-quote {
  font-family: var(--font-accent);
  font-size: var(--text-xl);
  color: var(--al-blue);
  line-height: 1.4;
}

code, .ss-mono {
  font-family: 'Roboto Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.9em;
}