/* ==========================================================================
   CrysMed — Design Tokens (Layout Variation 2)
   Palette for index-layout-2.html ONLY.
   Structure identical to tokens.css — only color values differ.
   Updated palette: brand/accent/premium/danger swapped to 4 new client-given
   colors (#018683, #54c2f4, #ddac3d, #e5630b), mapped by role — deep teal is
   dark enough for white-text contrast so it takes over the structural/button
   role once held by navy; success/warning are left as the existing universal
   semantic colors since only 4 new colors were given, not 6.
     Primary teal    #018683 — headers, navigation, dashboards, corporate content, buttons
     Sky accent      #54C2F4 — verification / care-pathway role (defined, not used on buttons here)
     Premium gold    #DDAC3D — membership, vouchers, CME, premium emphasis
     Warm white      #FBFAF7 — primary page background
     Light blue-grey #EDF3F4 — cards, filters, section separation
     Success green   #1D7654 — verified, available, approved, paid states
     Warning amber   #C68024 — policy, expiry, eligibility notices
     Error orange    #E5630B — errors, failed payments, critical warnings
   ========================================================================== */

:root {
  /* ---- Type ---- */
  --font: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-2xs: .75rem;     /* 12px — micro labels, meta */
  --fs-xs: .8125rem;    /* 13px — dense UI text */
  --fs-sm: .875rem;     /* 14px — default body/nav */
  --fs-base: 1rem;      /* 16px — lead paragraphs */
  --fs-md: 1.125rem;    /* 18px */
  --fs-lg: 1.5rem;      /* 24px — card/subsection heads */
  --fs-xl: 2rem;        /* 32px — section heads */
  --fs-2xl: 2.5rem;     /* 40px — hero secondary line */
  --fs-3xl: 3.5rem;     /* 56px — hero headline, desktop */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --tracking-tighter: -0.03em;  /* large display headlines */
  --tracking-tight: -0.015em;   /* section heads */
  --tracking-normal: 0;
  --tracking-wide: 0.06em;      /* uppercase eyebrow labels, nav caps */

  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.6;

  /* ---- Color — ink / neutrals (unchanged) ---- */
  --ink-900: #161616;
  --ink-700: #3a3a3a;
  --ink-500: #6b6b6b;
  --ink-300: #acadaf;
  --line: #e9edf1;
  --line-strong: #d4d9de;
  --paper: #FBFAF7;        /* client "warm white" — primary page background */
  --surface: #EDF3F4;      /* client "light blue-grey" — cards, filters, section separation */
  --surface-2: #dce7e9;    /* derived, one step deeper than surface */
  --peach-tint: #f6ecd9;   /* soft pale gold-cream — used here for the voucher panel background */
  --white: #ffffff;

  /* ---- Color — brand (client "primary teal" — DOMINANT: structure AND primary actions) --- */
  --brand-900: #0a4550;    /* derived, blue-leaning deep teal for hover/depth — kept blue > green so large fills read as teal, not forest green */
  --brand-700: #077994;    /* 2026-08-26: unified sitewide with index.html's palette-extraction teal (was #018683) */
  --brand-500: #2b9fb0;    /* derived, lighter blue-leaning teal */
  --brand-tint: #e2f3f5;   /* derived, pale teal wash for tint role */
  --brand-tint-strong: #c5e8ec;

  /* ---- Color — accent (client "sky accent" — defined for completeness; not used on buttons in this variation) --- */
  --accent-700: #1e88b8;
  --accent-500: #54c2f4;
  --accent-tint: #e5f5fd;

  /* ---- Color — premium (membership, vouchers, CME, premium emphasis).
     2026-08-26: base swapped gold #ddac3d -> sky blue #2394c0; hover/tint
     re-derived from the new blue to match (were derived from the old gold). ---- */
  --premium-700: #1b7396;  /* derived, darker blue for hover */
  --premium-500: #2394c0;
  --premium-tint: #ddf2f9;

  --danger: #e5630b;       /* client "error orange" — independent, not aliased to accent */
  --badge-amber: #f8800d;  /* derived — product card category badges (new-designs reference), lighter/more amber than --danger's button orange */
  --success: #1d7654;      /* client "success green" */
  --warning: #c68024;      /* client "warning amber" */

  /* ---- Color — new design system (pixel-sampled from new-designs/Offers Drs Prducts - Final.png,
     2026-08-24 palette-extraction pass). Additive only — existing --brand/--accent/--premium roles
     above are untouched until each section is explicitly redone with these. Rolled out section by
     section per the homepage roadmap; see the "Palette Extraction" artifact for the full mapping. ---- */
  --ref-teal-700: #01657d;   /* deep teal — outline buttons, active pills, price/structural text */
  --ref-sky-500: #2394c0;    /* sky gradient, dark stop — "featured" banner card fills */
  --ref-sky-300: #40b1ea;    /* sky gradient, light stop */
  --ref-orange-500: #fb5612; /* vivid orange — CTA button fills (role TBD vs --danger, see artifact) */
  --ref-gold-500: #ffb100;   /* gold — sparing "featured" badge accents only. Value set to the
     client's own pick (2026-09-04, home "Offers made for your wellbeing" featured card) — was
     #f7c22e before, never used elsewhere so no other element shifted shade. */
  --ref-mint-tint: #d0ebee;  /* pale teal — photo category-tag pill backgrounds */

  /* ---- Spacing scale (4px base, matches ICICI's density) ---- */
  --sp-1: .25rem;   /* 4  */
  --sp-2: .5rem;    /* 8  */
  --sp-3: .75rem;   /* 12 */
  --sp-4: 1rem;     /* 16 */
  --sp-5: 1.5rem;   /* 24 */
  --sp-6: 2rem;     /* 32 */
  --sp-7: 2.5rem;   /* 40 */
  --sp-8: 3rem;     /* 48 */
  --sp-9: 4rem;     /* 64 — section separation only */

  /* ---- Radius (restrained; pill/circle reserved for badges/avatars) ---- */
  --r-sm: .375rem;  /* 6px  — inputs, chips */
  --r-md: .5rem;    /* 8px  — buttons, cards */
  --r-lg: .75rem;   /* 12px — feature cards, image frames */
  --r-full: 999px;

  /* ---- Shadow (hairline, not soft-blur neumorphism) ---- */
  --shadow-1: 0 1px 2px rgba(20, 24, 28, .06);
  --shadow-2: 0 1px 3px rgba(20, 24, 28, .08), 0 1px 2px rgba(20, 24, 28, .04);
  --shadow-hover: 0 6px 16px rgba(20, 24, 28, .10);

  /* ---- Layout ---- */
  --container-max: 1280px;
  --container-inner: 1040px;
  --sticky-top: calc(68px + var(--sp-3)); /* clears the sticky 68px site-header */

  --ease: cubic-bezier(.4, 0, .2, 1);
}