/**
 * YNDJ Design Tokens
 * yndj-theme/assets/css/tokens.css
 *
 * THE single source of truth for every --yndj-* CSS custom property.
 *
 * Rules:
 *  - No selector other than :root lives in this file.
 *  - No plugin, page, or component ever re-declares these values.
 *  - To change a colour or spacing value site-wide, change it here only.
 *  - This file is enqueued first by functions.php, before all other stylesheets.
 *  - yndj-surveys.css, lesson-components.css, and all page stylesheets
 *    inherit from this file — they never hardcode a token value.
 */

:root {

  /* ── Colour: Core Palette ─────────────────────────────────── */
  --yndj-navy:              #0d1f3c;
  --yndj-navy-mid:          #162d52;
  --yndj-navy-light:        #1e3a6a;

  --yndj-gold:              #c9933a;
  --yndj-gold-light:        #e8b96a;
  --yndj-gold-pale:         rgba(201, 147, 58, 0.12);

  --yndj-cream:             #f7f3ec;
  --yndj-cream-dark:        #ede8df;

  --yndj-white:             #ffffff;

  /* ── Colour: Typography ───────────────────────────────────── */
  --yndj-text:              #1a1a2e;
  --yndj-muted:             #5a6478;

  /* ── Colour: Semantic ─────────────────────────────────────── */
  --yndj-border:            rgba(201, 147, 58, 0.25);

  --yndj-highlight-bg:      #fdf0dc;   /* solid hex — NOT rgba, cross-browser reliable */
  --yndj-bold-bg:           #f5d99a;   /* solid hex — NOT rgba */

  --yndj-danger:            rgba(220, 53, 69, 0.08);
  --yndj-danger-border:     rgba(220, 53, 69, 0.35);
  --yndj-danger-text:       #c0392b;

  --yndj-star-empty:        #dddddd;
  --yndj-star-filled:       #c9933a;   /* same as --yndj-gold — explicit for star context */

  /* ── Typography: Font Stacks ──────────────────────────────── */
  --yndj-font-display:      'Playfair Display', Georgia, serif;
  --yndj-font-body:         'DM Sans', system-ui, sans-serif;

  /* ── Typography: Scale ────────────────────────────────────── */
  --yndj-text-xs:           0.68rem;   /*  ~11px — eyebrows, hints                */
  --yndj-text-sm:           0.75rem;   /*  ~12px — meta, labels                   */
  --yndj-text-base:         0.88rem;   /*  ~14px — body small, form text          */
  --yndj-text-md:           1rem;      /*  ~16px — body default                   */
  --yndj-text-lg:           1.1rem;    /*  ~18px — body large, card answers       */
  --yndj-text-xl:           1.25rem;   /*  ~20px — section sub-headings           */
  --yndj-text-2xl:          1.5rem;    /*  ~24px — section headings               */
  --yndj-text-3xl:          2rem;      /*  ~32px — page / lesson titles           */

  /* ── Spacing ──────────────────────────────────────────────── */
  --yndj-space-xs:          0.4rem;    /*   6px  */
  --yndj-space-sm:          0.75rem;   /*  12px  */
  --yndj-space-md:          1rem;      /*  16px  */
  --yndj-space-lg:          1.5rem;    /*  24px  */
  --yndj-space-xl:          2rem;      /*  32px  */
  --yndj-space-2xl:         2.5rem;    /*  40px  */
  --yndj-space-3xl:         4rem;      /*  64px  */

  /* ── Border Radius ────────────────────────────────────────── */
  --yndj-radius-sm:         6px;
  --yndj-radius-md:         10px;
  --yndj-radius-lg:         14px;
  --yndj-radius-xl:         20px;
  --yndj-radius-pill:       999px;

  /* ── Transitions ──────────────────────────────────────────── */
  --yndj-transition-fast:   0.15s ease;
  --yndj-transition-base:   0.2s ease;
  --yndj-transition-slow:   0.35s ease;

  /* ── Shadows ──────────────────────────────────────────────── */
  --yndj-shadow-card:       0 8px 28px rgba(13, 31, 60, 0.09);
  --yndj-shadow-gold:       0 4px 16px rgba(201, 147, 58, 0.3);

  /* ── Layout ───────────────────────────────────────────────── */
  --yndj-max-width-content: 860px;
  --yndj-max-width-narrow:  640px;
  --yndj-nav-height:        56px;

}