/* ============================================================================
   px-tokens.css — Piplix unified design tokens
   Canonical source: PIPLIX_DESIGN_GUIDELINE.md §2 (Design Tokens).
   THE single `--px-*` namespace. Replaces the retired --pl-*, --pplx-*, --ds-*.
   Tokens only — no component or utility rules live here (those are in px-base.css).
   Do not hardcode any value that exists below.
   ============================================================================ */

:root {

  /* ---- §2.1 Color — Brand --------------------------------------------- */
  --px-brand:            #F26B1D;  /* Piplix Orange — primary actions, brand */
  --px-brand-hover:      #D95A12;
  --px-brand-active:     #C04E0C;
  --px-brand-subtle:     #FEEFE4;  /* tinted backgrounds, selected states */
  --px-brand-on:         #FFFFFF;  /* text/icon on brand fill */

  /* Bamboo (reward / positive / streak-safe) */
  --px-bamboo:           #5DBB30;  /* bamboo green — reward currency, success */
  --px-bamboo-hover:     #4FA528;
  --px-bamboo-subtle:    #EAF6E3;
  --px-bamboo-on:        #FFFFFF;

  /* Streak (flame) */
  --px-streak:           #FFB743;  /* active streak flame */
  --px-streak-subtle:    #FEF3C7;
  --px-streak-dormant:   #D1D5DB;  /* 0-streak grey flame */

  /* ---- §2.2 Color — Semantic / Feedback ------------------------------- */
  --px-success:          #4EC363;  /* correct answer, pass */
  --px-success-subtle:   #E6F6EE;
  --px-success-border:   #A7E0C4;

  --px-error:            #E3473F;  /* wrong answer, fail */
  --px-error-subtle:     #FDECEC;
  --px-error-border:     #F4B5B7;

  --px-warning:          #E8A317;
  --px-warning-subtle:   #FCF3DE;

  --px-info:             #3B82F6;  /* neutral highlight, "current" ring */
  /* --px-info-subtle:      #E8F1FE; */
  --px-info-subtle:      #F5FBFF;
  
  --px-info-brand:      #83DBFF;
  --px-info-brand-subtle:#EEF3F7;

  /* ---- §2.3 Color — Neutrals (ink & surface) -------------------------- */
  --px-ink-900:          #0F172A;  /* headings */
  /* --px-ink-700:          #334155;  body */
  --px-ink-700:          #262C30;  /* body */
  --px-ink-500:          #64748B;  /* secondary text */
  --px-ink-400:          #94A3B8;  /* placeholder, disabled text */
  --px-ink-300:          #CBD5E1;  /* borders strong */

  --px-surface-0:        #FFFFFF;  /* cards, modals */
  --px-surface-50:       #F8FAFC;  /* page background */
  --px-surface-100:      #F1F5F9;  /* subtle panel */
  --px-surface-200:      #E2E8F0;  /* dividers, borders */

  --px-overlay:          rgba(15, 23, 42, 0.55); /* modal scrim */

  /* ---- §2.4 Spacing scale (4px base) ---------------------------------- */
  --px-space-1:  4px;
  --px-space-2:  8px;
  --px-space-3:  12px;
  --px-space-4:  16px;
  --px-space-5:  20px;
  --px-space-6:  24px;
  --px-space-8:  32px;
  --px-space-10: 40px;
  --px-space-12: 48px;
  --px-space-16: 64px;

  /* ---- §2.5 Radius ---------------------------------------------------- */
  --px-radius-sm:   8px;    /* inputs, chips, small controls */
  --px-radius-md:   12px;   /* cards, list rows */
  --px-radius-lg:   16px;   /* feature cards, modals */
  --px-radius-xl:   24px;   /* hero cards, level cards */
  --px-radius-pill: 999px;  /* buttons, counters, tags */

  /* ---- §2.6 Elevation (shadow) ---------------------------------------- */
  --px-shadow-sm:   0 1px 2px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.08);
  --px-shadow-md:   0 4px 12px rgba(15,23,42,0.08);
  --px-shadow-lg:   0 12px 32px rgba(15,23,42,0.12);
  --px-shadow-card: 0 2px 8px rgba(15,23,42,0.06); /* default card resting */

  /* ---- §2.7 Z-index scale --------------------------------------------- */
  --px-z-base:          0;
  --px-z-sticky:        100;  /* sticky headers, HUD */
  --px-z-dropdown:      200;
  --px-z-player-chrome: 300;  /* player progress bar / close */
  --px-z-modal:         9999;  /* streak modal, badge sheet */
  --px-z-toast:         500;

  /* ---- §2.8 Motion tokens --------------------------------------------- */
  --px-ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --px-ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --px-dur-fast:      120ms;
  --px-dur-base:      220ms;
  --px-dur-slow:      400ms;
  --px-dur-celebrate: 700ms;  /* crown-fill, level-unlock reveal */

  /* ---- §2.9 Breakpoints ----------------------------------------------- */
  /* Mobile-first. These are the ONLY breakpoints. Exposed as tokens for
     reference/JS; CSS @media conditions cannot read custom properties, so
     media queries in px-base.css use the identical literal px values. */
  --px-bp-sm: 480px;   /* large phone */
  --px-bp-md: 768px;   /* tablet */
  --px-bp-lg: 1024px;  /* desktop */
  --px-bp-xl: 1280px;  /* wide desktop */
}