/* ============================================================
   DPL Design Tokens
   Source of truth for colors, fonts, spacing, radii.
   If a color or size is used in more than one place, it lives here.
   ============================================================ */

:root {
  /* Brand colors (from brand sheet) */
  --dpl-teal:        #0E4D54;  /* primary background, logo */
  --dpl-mint:        #6FBFAD;  /* secondary accent */
  --dpl-gold:        #F4C430;  /* primary action / attention */
  --dpl-gold-ink:    #3a2a00;  /* dark text on gold */
  --dpl-coral:       #D95F4D;  /* self-logged / bonus / player-added */
  --dpl-rust:        #B24A3B;  /* deeper warning */
  --dpl-cream:       #F5F4F1;  /* primary text on teal */
  --dpl-charcoal:    #3A3F42;  /* text on light surfaces */

  /* Semantic colors (what things mean, not what they are) */
  --bg-page:         var(--dpl-teal);
  --bg-surface:      rgba(245, 244, 241, 0.05);   /* faint cream, for card fills */
  --bg-surface-2:    rgba(245, 244, 241, 0.08);   /* slightly stronger */
  --bg-surface-alt:  rgba(245, 244, 241, 0.03);   /* for dashed/optional cards */

  --border-faint:    rgba(245, 244, 241, 0.12);
  --border-soft:     rgba(245, 244, 241, 0.20);
  --border-dashed:   rgba(245, 244, 241, 0.22);

  --text-primary:    var(--dpl-cream);
  --text-secondary:  rgba(245, 244, 241, 0.72);
  --text-muted:      rgba(245, 244, 241, 0.55);
  --text-faint:      rgba(245, 244, 241, 0.40);

  --action-bg:       var(--dpl-gold);
  --action-ink:      var(--dpl-gold-ink);

  --coach-bg:        rgba(244, 196, 48, 0.12);
  --coach-border:    rgba(244, 196, 48, 0.40);
  --coach-accent:    var(--dpl-gold);

  /* Typography */
  --font-display:  "Bree Serif", Georgia, serif;
  --font-body:     "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Type scale */
  --fs-hero:       clamp(28px, 6vw, 48px);    /* hero quote */
  --fs-h1:         24px;                       /* big numbers / major labels */
  --fs-title:      16px;                       /* card titles */
  --fs-body:       14px;
  --fs-small:      13px;
  --fs-micro:      11px;                       /* section labels, tiny meta */

  /* Spacing */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;

  /* Radii */
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* Layout */
  --content-max: 1100px;   /* desktop max width */
  --mobile-max:  480px;    /* mobile card max */
}