/* ================================================================
   APAS Design System — Tokens
   ----------------------------------------------------------------
   Single source of truth for colour, typography, spacing, radius
   and shadow values used across the APAS UI.

   Usage:
     <link rel="stylesheet" href="tokens.css" />
     <link rel="stylesheet" href="components.css" />

   All values are CSS custom properties on :root so they cascade
   into every component. Override at any scope (e.g. a dark theme)
   by redefining them under a different selector.
   ================================================================ */

:root {
  /* ---------- Colour: surfaces & ink ---------- */
  --apas-bg:           #f3f3f5;
  --apas-surface:      #ffffff;
  --apas-surface-2:    #fafafb;
  --apas-ink:          #111114;
  --apas-ink-2:        #3a3a42;
  --apas-muted:        #8a8a94;
  --apas-line:         #e7e7eb;
  --apas-line-2:       #efeff2;

  /* ---------- Colour: accent ---------- */
  --apas-accent:       #111114;   /* primary action background */
  --apas-accent-soft:  #1e1e24;   /* hover state for primary */
  --apas-on-accent:    #ffffff;   /* text on dark accent */

  /* ---------- Colour: pills (status / category) ---------- */
  --apas-pill-green-bg:    #b6f0c2;
  --apas-pill-green-ink:   #0c5b29;
  --apas-pill-purple-bg:   #c9c2ff;
  --apas-pill-purple-ink:  #2c2271;
  --apas-pill-amber-bg:    #ffd591;
  --apas-pill-amber-ink:   #6b3d00;
  --apas-pill-blue-bg:     #cfe2ff;
  --apas-pill-blue-ink:    #0d3b86;
  --apas-pill-pink-bg:     #ffd1e0;
  --apas-pill-pink-ink:    #7a1c44;

  /* ---------- Colour: semantic / status ---------- */
  --apas-status-ok:      #1f9d55;
  --apas-status-warn:    #c47a00;
  --apas-status-info:    #2563eb;
  --apas-status-danger:  #c0392b;

  /* ---------- Typography ---------- */
  --apas-font-family:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --apas-font-weight-regular: 400;
  --apas-font-weight-medium:  500;
  --apas-font-weight-semibold:600;
  --apas-font-weight-bold:    700;

  /* sizes */
  --apas-text-display-xl: 2.0rem;   /* 32px */
  --apas-text-display-lg: 1.625rem; /* 26px */
  --apas-text-heading-lg: 1.375rem; /* 22px */
  --apas-text-heading-md: 1.125rem; /* 18px */
  --apas-text-heading-sm: 0.9375rem;/* 15px */
  --apas-text-body-md:    0.875rem; /* 14px */
  --apas-text-body-sm:    0.8125rem;/* 13px */
  --apas-text-caption:    0.75rem;  /* 12px */
  --apas-text-label:      0.6875rem;/* 11px */

  /* line heights (unitless) */
  --apas-line-tight:  1.2;
  --apas-line-snug:   1.3;
  --apas-line-normal: 1.45;
  --apas-line-relaxed:1.55;

  /* letter spacing (em) */
  --apas-tracking-tight:   -0.02em;
  --apas-tracking-snug:    -0.01em;
  --apas-tracking-normal:  0;
  --apas-tracking-wide:    0.04em;
  --apas-tracking-wider:   0.06em;
  --apas-tracking-widest:  0.08em;

  /* ---------- Spacing ---------- */
  --apas-space-4:  4px;
  --apas-space-6:  6px;
  --apas-space-8:  8px;
  --apas-space-10: 10px;
  --apas-space-12: 12px;
  --apas-space-14: 14px;
  --apas-space-16: 16px;
  --apas-space-20: 20px;
  --apas-space-24: 24px;
  --apas-space-32: 32px;

  /* ---------- Radius ---------- */
  --apas-radius-sm:   8px;
  --apas-radius-md:  10px;
  --apas-radius-lg:  12px;
  --apas-radius-xl:  14px;
  --apas-radius-2xl: 20px;
  --apas-radius-full:999px;

  /* ---------- Shadows ---------- */
  --apas-shadow-sm: 0 1px 2px rgba(17,17,20,.04);
  --apas-shadow-md: 0 4px 16px rgba(17,17,20,.06);
  --apas-shadow-lg: 0 12px 32px rgba(17,17,20,.10);

  /* ---------- Motion ---------- */
  --apas-ease:        cubic-bezier(.4, 0, .2, 1);
  --apas-duration-fast:    .15s;
  --apas-duration-normal:  .25s;
  --apas-duration-slow:    .35s;
}