/* ----------------------------------------
   DESIGN TOKENS
   CSS custom properties for the Packwerk design system.
   All component styles reference these tokens — never raw values.

   Categorized namespace: --pw-{category}-{name}-{variant}
   Categories: color, font, text, weight, leading, tracking,
               space, radius, shadow.

   Status-color tokens (--pw-color-status-*) are starting sketch
   values; they get tuned via the brand showcase in PWP-192.
---------------------------------------- */

:root {
  /* --- Brand-core palette --- */
  --pw-color-cream-base:    #F1EAE0;
  --pw-color-cream-soft:    #FCF9F2;
  --pw-color-cream-deep:    #E5DBCD;

  --pw-color-dark-base:     #2D2722;
  --pw-color-dark-soft:     #5C544D;
  --pw-color-dark-deep:     #1A1612;

  --pw-color-orange-base:   #C97A1F;
  --pw-color-orange-soft:   #E29A4A;
  --pw-color-orange-deep:   #A86515;

  --pw-color-teal-base:   #5A828F;   /* blue-leaning teal — secondary CTAs, active states, strategic attention */
  --pw-color-teal-soft:   #7DA0AB;
  --pw-color-teal-deep:   #3F6571;

  /* --- Surface aliases (semantic, point at brand-core) --- */
  --pw-color-surface-base:        var(--pw-color-cream-base);
  --pw-color-surface-raised:      var(--pw-color-cream-soft);
  --pw-color-surface-sunken:      var(--pw-color-cream-deep);
  --pw-color-surface-sunken-hover:#D8CCB9;
  --pw-color-input-bg:            #FFFFFF;

  --pw-color-text:           var(--pw-color-dark-base);
  --pw-color-text-secondary: #382F28;                       /* leans toward dark-base; subhead-tier emphasis */
  --pw-color-text-muted:     var(--pw-color-dark-soft);
  --pw-color-text-inverse:   var(--pw-color-cream-base);

  --pw-color-border:        var(--pw-color-cream-deep);
  --pw-color-focus-ring:    rgba(201, 122, 31, 0.25);

  --pw-color-progress-track: var(--pw-color-cream-deep);

  /* --- Chrome (admin / member) ---
     Member chrome bleed is intentional in M1; M(tail) milestone
     revisits member layout. */
  --pw-color-member-nav-bg:     #2E4A5C;
  --pw-color-member-nav-accent: #0D8CE8;

  /* --- Status palette ---
     Tuned to lean warm/earthy so status patches sit in the brand
     palette without losing meaning. Info derives from the teal accent
     so it shares lineage rather than being a one-off slate. */
  --pw-color-status-success-fg:        #347025;   /* leafy green, deeper */
  --pw-color-status-success-fg-hover:  #225014;
  --pw-color-status-success-bg:        #ECEED1;
  --pw-color-status-success-bg-hover:  #DEE3BD;
  --pw-color-status-success-border:    #BAC692;

  --pw-color-status-error-fg:        #9C3D26;     /* brick / clay red */
  --pw-color-status-error-fg-hover:  #7A2A1A;
  --pw-color-status-error-bg:        #F5DDD0;
  --pw-color-status-error-border:    #D9A78B;
  --pw-color-status-error-focus:     rgba(156, 61, 38, 0.2);

  --pw-color-status-warning-fg:        #9F7A20;   /* mustard — darker for contrast against lighter bg */
  --pw-color-status-warning-fg-hover:  #7A5A10;
  --pw-color-status-warning-bg:        #FAF1DA;
  --pw-color-status-warning-border:    #DDC174;

  --pw-color-status-info-fg:         var(--pw-color-teal-deep);   /* shares lineage with teal accent */
  --pw-color-status-info-fg-hover:   #2C4853;
  --pw-color-status-info-bg:         #DDE6EA;
  --pw-color-status-info-bg-hover:   #CCD9DF;
  --pw-color-status-info-border:     var(--pw-color-teal-soft);

  /* --- Typography --- */
  --pw-font-display:    "Scorekard", system-ui, sans-serif;
  --pw-font-sans:       "IBM Plex Sans", system-ui, sans-serif;

  --pw-text-xs:         0.75rem;
  --pw-text-sm:         0.8rem;
  --pw-text-base:       0.875rem;
  --pw-text-md:         0.9rem;
  --pw-text-lg:         1.1rem;
  --pw-text-xl:         1.5rem;    /* 24px — generic h2 */
  --pw-text-2xl:        1.75rem;   /* 28px — showcase section h2 / emphasis */
  --pw-text-3xl:        2.25rem;   /* 36px — Scorekard page title; display font benefits from generous size */

  --pw-weight-light:    300;
  --pw-weight-normal:   400;
  --pw-weight-medium:   500;
  --pw-weight-semibold: 600;
  --pw-weight-bold:     700;

  --pw-leading-tight:   1.25;
  --pw-leading-normal:  1.5;

  --pw-tracking-tight:  -0.02em;

  /* --- Spacing (4px base, 1–9 contiguous; --pw-space-16 dropped, no consumers) --- */
  --pw-space-1:         0.25rem;   /* 4px */
  --pw-space-2:         0.5rem;    /* 8px */
  --pw-space-3:         0.75rem;   /* 12px */
  --pw-space-4:         1rem;      /* 16px */
  --pw-space-5:         1.25rem;   /* 20px */
  --pw-space-6:         1.5rem;    /* 24px */
  --pw-space-7:         2rem;      /* 32px */
  --pw-space-8:         2.5rem;    /* 40px */
  --pw-space-9:         3rem;      /* 48px */

  /* --- Border radius --- */
  --pw-radius-sm:       4px;
  --pw-radius-md:       6px;
  --pw-radius-lg:       8px;
  --pw-radius-full:     100px;

  /* --- Shadows --- */
  --pw-shadow-sm:       0 1px 2px rgba(45, 39, 34, 0.05);
  --pw-shadow-md:       0 2px 8px rgba(45, 39, 34, 0.08);
  --pw-shadow-lg:       0 4px 16px rgba(45, 39, 34, 0.12);
}