/* tokens.css -- Design tokens only. :root and nothing else.
   Every colour, type, spacing, radius, shadow, and breakpoint value in the
   application is defined here. No other CSS file may define a token, and no
   other selector may appear in this file. Source of truth: docs/DESIGN.md. */

:root {
  /* ---------------------------------------------------------------
     Colour -- Primary (Deep Navy)
     --------------------------------------------------------------- */
  --color-primary:          #1B2A4A;
  --color-primary-light:    #2C3E63;
  --color-primary-subtle:   #EEF1F7;

  /* Colour -- Secondary (Teal: positive, confirmed, action) */
  --color-secondary:        #0D9488;
  --color-secondary-light:  #CCFBF1;
  --color-secondary-subtle: #F0FDFA;

  /* Colour -- Warning (Amber: unclassified, caution, unlocked) */
  --color-warning:          #D97706;
  --color-warning-light:    #FEF3C7;
  --color-warning-subtle:   #FFFBEB;

  /* Colour -- Danger (Red: negative figures, errors, destructive) */
  --color-danger:           #DC2626;
  --color-danger-light:     #FEE2E2;
  --color-danger-subtle:    #FFF5F5;

  /* Colour -- Neutrals */
  --color-surface:          #F8FAFC;
  --color-panel:            #FFFFFF;
  --color-border:           #E2E8F0;
  --color-border-strong:    #CBD5E1;

  /* Colour -- Text */
  --color-text-primary:     #1E293B;
  --color-text-secondary:   #64748B;
  --color-text-disabled:    #94A3B8;
  --color-text-inverse:     #FFFFFF;

  /* Colour -- Chrome overlays (DESIGN inline values, tokenised so no other
     file hardcodes a colour). Modal overlay scrim and header control border. */
  --color-overlay:          rgba(0, 0, 0, 0.4);
  --color-header-control-border: rgba(255, 255, 255, 0.2);

  /* ---------------------------------------------------------------
     Typography -- Scale
     --------------------------------------------------------------- */
  --text-xs:    0.75rem;    /* 12px -- table labels, badges */
  --text-sm:    0.875rem;   /* 14px -- table body, secondary labels */
  --text-base:  1rem;       /* 16px -- body, form controls */
  --text-lg:    1.125rem;   /* 18px -- panel headings */
  --text-xl:    1.25rem;    /* 20px -- section headings */
  --text-2xl:   1.5rem;     /* 24px -- metric tile values */
  --text-3xl:   1.875rem;   /* 30px -- page title */

  /* Typography -- Weight */
  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Typography -- Font families */
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'DM Mono', 'Courier New', monospace;  /* financial figures */
  --font-display: 'DM Sans', system-ui, sans-serif;

  /* ---------------------------------------------------------------
     Spacing
     --------------------------------------------------------------- */
  --space-1:   0.25rem;   /* 4px */
  --space-2:   0.5rem;    /* 8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */

  /* ---------------------------------------------------------------
     Radius
     --------------------------------------------------------------- */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;

  /* ---------------------------------------------------------------
     Shadow
     --------------------------------------------------------------- */
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.10);

  /* ---------------------------------------------------------------
     Responsive breakpoints
     --------------------------------------------------------------- */
  --bp-md: 768px;
  --bp-lg: 1024px;
}