/**
 * tokens.css — PAASL design system tokens.
 *
 * This file is the single source of truth for all design decisions.
 * Load this file BEFORE brand.css and clerk-overrides.css so every
 * downstream stylesheet can reference these custom properties.
 *
 * Breakpoint reference (cannot be used in @media with var(), document only):
 *   --bp-sm  : 480px   small mobile
 *   --bp-md  : 640px   tablet / large mobile
 *   --bp-lg  : 768px   landscape tablet
 *   --bp-xl  : 900px   desktop
 *   --bp-2xl : 1200px  wide desktop
 */

:root {

  /* ── Primary (green) ──────────────────────────────────────────────── */
  --color-primary:       #3d6b4e;
  --color-primary-dark:  #2d5a3d;
  --color-primary-darker:#1e3c2a;
  --color-primary-hover: #345d47;
  --color-primary-light: #e8f5e9;
  --color-primary-muted: #e8ebe8;
  --color-primary-focus: rgba(61, 107, 78, 0.2);

  /* ── Neutral text ─────────────────────────────────────────────────── */
  --color-text:           #1a1a1a;
  --color-text-secondary: #4a4a4a;
  --color-text-muted:     #666;
  --color-text-faint:     #999;

  /* ── Borders ──────────────────────────────────────────────────────── */
  --color-border:         #e5e5e5;
  --color-border-muted:   #e8ebe8;
  --color-border-strong:  #ccc;

  /* ── Backgrounds ──────────────────────────────────────────────────── */
  --color-bg:             #ffffff;
  --color-bg-subtle:      #fafafa;
  --color-bg-muted:       #f5f5f5;
  --color-bg-primary:     #e8f0ea;
  --color-bg-primary-soft:#f8faf9;
  --color-bg-primary-dim: #f5f7f5;

  /* ── Status ───────────────────────────────────────────────────────── */
  --color-error:         #b53c3c;
  --color-error-hover:   #8b4545;
  --color-error-dark:    #8b3232;
  --color-error-bg:      #fef2f2;
  --color-info:          #1a5a8c;
  --color-info-dark:     #1565c0;
  --color-info-bg:       #e3f2fd;
  --color-success:       #166534;
  --color-success-text:  #15803d;
  --color-success-bg:    #f0fdf4;
  --color-success-light: #d8f3dc;
  --color-warning:       #a63d3d;
  --color-warning-text:  #7c5a03;
  --color-warning-bg:    #fff3cd;
  --color-disabled:      #9ca3af;

  /* ── Border radius ────────────────────────────────────────────────── */
  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-lg:     12px;
  --radius-xl:     16px;
  --radius-pill:   9999px;
  --radius-circle: 50%;

  /* ── Shadows (4 elevation levels) ────────────────────────────────── */
  --shadow-sm:    0 2px 8px rgba(45, 90, 61, 0.06);
  --shadow-md:    0 4px 12px rgba(61, 107, 78, 0.08);
  --shadow-lg:    0 8px 24px rgba(0, 0, 0, 0.06);
  --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.18);
  --shadow-focus: 0 0 0 2px rgba(61, 107, 78, 0.2);

  /* ── Typography — font-size scale ────────────────────────────────── */
  --text-xs:      0.6875rem;  /* 11px */
  --text-sm:      0.75rem;    /* 12px */
  --text-base-sm: 0.8125rem;  /* 13px */
  --text-base:    0.875rem;   /* 14px */
  --text-md:      0.9375rem;  /* 15px — most common body size */
  --text-lg:      1rem;       /* 16px */
  --text-xl:      1.125rem;   /* 18px */
  --text-2xl:     1.25rem;    /* 20px */
  --text-3xl:     1.5rem;     /* 24px */
  --text-4xl:     1.75rem;    /* 28px */
  --text-5xl:     2rem;       /* 32px */

  /* ── Typography — font weights ────────────────────────────────────── */
  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;
  --font-extrabold:800;

  /* ── Semantic / component-specific ───────────────────────────────── */
  /* Permit PDF badge (brown — intentionally distinct from primary green) */
  --color-permit:        #5d4037;
  --color-permit-hover:  #3e2723;
  --color-permit-border: #8d6e63;
  --color-permit-bg:     #efebe9;
  /* Player count badge (purple — visually distinct from status greens) */
  --color-player:        #5a1a8c;
  --color-player-bg:     rgba(90, 26, 140, 0.12);
  /* Season / referee navy accent */
  --color-navy:          #1a4a6e;
  --color-navy-dark:     #163d5c;
  --color-navy-label:    #1a3a5c;

  /* ── Transitions ──────────────────────────────────────────────────── */
  --transition-fast:   0.15s ease;
  --transition-base:   0.2s ease;
  --transition-ui:     background var(--transition-fast), color var(--transition-fast);
  --transition-border: border-color var(--transition-fast), box-shadow var(--transition-fast);
}