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

:root {
  /* --- Brand colors --- */
  --pw-primary:           #E8620D;
  --pw-primary-hover:     #CC5509;
  --pw-primary-focus:     rgba(232, 98, 13, 0.25);
  --pw-primary-inverse:   #FFFFFF;
  --pw-danger-focus:      rgba(192, 57, 43, 0.2);

  /* --- Semantic colors --- */
  --pw-success:           #2E7D32;
  --pw-success-hover:     #256428;
  --pw-success-bg:        #E8F5E9;
  --pw-success-bg-hover:  #C8E6C9;
  --pw-success-border:    #B8D8B4;

  --pw-warning:           #F57F17;
  --pw-warning-bg:        #FFF8E1;
  --pw-warning-border:    #F5D98E;

  --pw-danger:            #C0392B;
  --pw-danger-bg:         #FCEAEA;
  --pw-danger-border:     #F0C4B8;

  --pw-info:              #1565C0;
  --pw-info-bg:           #E3F2FD;
  --pw-info-bg-hover:     #D6EAF8;
  --pw-info-border:       #90CAF9;

  --pw-muted:             #757575;
  --pw-muted-bg:          #F5F5F5;
  --pw-muted-bg-hover:    #EEEEEE;
  --pw-muted-border:      #E0E0E0;

  --pw-progress-track:    #E0E0E0;

  /* --- Surfaces --- */
  --pw-bg:                #FAF8F5;
  --pw-surface:           #F2EDE5;
  --pw-border:            #E0D6CC;

  /* --- Text --- */
  --pw-text:              #231A15;
  --pw-text-muted:        #7A6558;

  /* --- Navigation --- */
  --pw-nav-bg:            #5C3D2E;
  --pw-nav-accent:        #E8620D;
  --pw-nav-text:          #C4B0A6;
  --pw-nav-text-hover:    #FAF8F5;
  --pw-nav-divider:       #4A3830;
  --pw-nav-muted:         #8A7268;

  --pw-member-nav-bg:     #2E4A5C;
  --pw-member-nav-accent: #0D8CE8;

  /* --- Typography --- */
  --pw-font:              "DM 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.2rem;
  --pw-text-2xl:          1.35rem;
  --pw-text-3xl:          1.5rem;

  --pw-weight-normal:     400;
  --pw-weight-medium:     500;
  --pw-weight-semibold:   600;

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

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

  /* --- Spacing (4px base) --- */
  --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-8:           2rem;      /* 32px */
  --pw-space-10:          2.5rem;    /* 40px */
  --pw-space-12:          3rem;      /* 48px */
  --pw-space-16:          4rem;      /* 64px */

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

  /* --- Surfaces (specific) --- */
  --pw-input-bg:          #FFFFFF;

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