/*
 * All Life Skills prototype v1: design tokens.
 * Palette source: context/brand/All Life Skills Brand Guide Rev04.pdf, pages 25-29 (Color Palette).
 * Guide rules applied: serene blue / dusty teal for headers and buttons; warm white or misty blue
 * backgrounds; avoid harsh white/black combos; peach + lavender as soft accents.
 *
 * "guide"   = hex printed in the brand guide.
 * "derived" = darker step of a guide hue so text and buttons pass WCAG AA (guide teal on white is 3.2:1).
 * "logo"    = sampled from the logo wordmark (guide page 22).
 * Components reference LAYER 2 only. In WordPress this file maps 1:1 to theme.json settings.color.palette.
 */
:root {
  /* LAYER 1: primitives */
  --p-serene-blue: #9BC1BC;   /* guide: Serene Blue, calm soft ocean tone */
  --p-dusty-teal:  #6C9A8B;   /* guide: Dusty Teal, gentle, prosperous, grounded */
  --p-sky-mist:    #DDEFEF;   /* guide: Sky Mist, light airiness, clean canvas */
  --p-sage:        #B5CDA3;   /* guide: Sage Green, growth, peace, nature */
  --p-clay:        #D2BBA0;   /* guide: Clay Taupe, earthy warm neutral */
  --p-peach:       #F3D6C1;   /* guide: Blush Peach, compassionate, comforting */
  --p-lavender:    #D5C4E0;   /* guide: Muted Lavender, reflective */
  --p-black:       #000000;   /* guide: Black (used only inside the logo artwork; text uses ink below) */

  --p-teal-700:    #2F5F54;   /* derived from Dusty Teal: buttons, links (white on it 7.3:1) */
  --p-teal-900:    #1E3A34;   /* derived from Dusty Teal: body ink in place of black (11.6:1 on warm white) */
  --p-slate:       #4E5F5A;   /* derived: muted text (6.4:1 on warm white) */
  --p-warm-white:  #FBF8F3;   /* derived: the guide's "warm white" background */
  --p-white:       #FFFFFF;
  --p-logo-blue:   #3F51A3;   /* logo: wordmark colour */

  /* tints (guide shows 75/50/25/10% swatches) */
  --p-mist-50:     #EEF7F7;
  --p-sage-25:     #EDF3E8;
  --p-peach-25:    #FCF5F0;
  --p-lavender-25: #F5F0F7;
  --p-clay-25:     #F4EEE7;

  /* LAYER 2: roles */
  --c-ink:          var(--p-teal-900);
  --c-ink-muted:    var(--p-slate);
  --c-bg:           var(--p-warm-white);
  --c-surface:      var(--p-white);
  --c-band-mist:    var(--p-sky-mist);
  --c-band-mist-soft: var(--p-mist-50);
  --c-band-sage:    var(--p-sage-25);
  --c-band-peach:   var(--p-peach-25);
  --c-band-lavender:var(--p-lavender-25);
  --c-band-deep:    var(--p-teal-900);
  --c-on-deep:      var(--p-white);
  --c-on-deep-muted:var(--p-sky-mist);
  --c-primary:      var(--p-teal-700);
  --c-on-primary:   var(--p-white);
  --c-accent:       var(--p-dusty-teal);
  --c-accent-soft:  var(--p-serene-blue);
  --c-link:         var(--p-teal-700);
  --c-border:       #D9E3E0;
  --c-border-strong:var(--p-serene-blue);
  --c-focus:        var(--p-logo-blue);
  --c-logo:         var(--p-logo-blue);

  /* type: guide page 23-24. Source Sans 3 for titles (ExtraBold / SemiBold / Light), Open Sans for paragraphs */
  --f-head: "Source Sans 3", "Source Sans Pro", system-ui, sans-serif;
  --f-body: "Open Sans", system-ui, sans-serif;
  --fs-xs: .8125rem;
  --fs-sm: .9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
  --fs-2xl: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  --fs-3xl: clamp(2.25rem, 1.5rem + 2.8vw, 3.75rem);

  /* space + shape */
  --maxw: 1300px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(3.5rem, 7vw, 6.5rem);
  --section-y-sm: clamp(2.25rem, 4vw, 3.5rem);
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 24px;
  --r-xl: 36px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(30,58,52,.06), 0 2px 8px rgba(30,58,52,.05);
  --shadow-md: 0 4px 14px rgba(30,58,52,.08), 0 12px 32px rgba(30,58,52,.06);
  --ease: cubic-bezier(.2,.7,.2,1);
}