/*!
 * Collect! Design System — Design Tokens
 * Version: 1.0.0
 *
 * Single source of truth for colors, typography, spacing, radii, and shadows.
 * Derived from:
 *   - docs/ComtechSystems_CorporateIdentity2019/corporate_identity_2019.md
 *   - docs/corporate_identity_2026.md
 *
 * Do not hard-code brand values elsewhere — reference these tokens.
 */

:root {
  /* ----- Brand colors (2019, unchanged in 2026) ----- */
  --color-teal:           #2BA3BB;
  --color-persian-blue:   #1A3373;
  --color-urgent-orange:  #F89939;
  --color-mid-grey:       #626464;
  --color-money:          #A1BF2F;
  --color-berry:          #A94382;

  /* ----- Semantic roles (2026 mapping) ----- */
  --color-primary:    var(--color-teal);
  --color-secondary:  var(--color-persian-blue);
  --color-accent:     var(--color-urgent-orange);
  --color-neutral:    var(--color-mid-grey);
  --color-success:    var(--color-money);
  --color-info:       var(--color-berry);
  --color-warning:    var(--color-urgent-orange);
  --color-danger:     #C0392B;

  /* ----- Surfaces & text ----- */
  --color-text:       var(--color-mid-grey);
  --color-heading:    var(--color-persian-blue);
  --color-muted:      #8A8C8C;
  --color-bg:         #FFFFFF;
  --color-bg-alt:     #F7F8FA;
  --color-bg-dark:    #0F1A3A;
  --color-border:     #E4E7EC;
  --color-border-strong: #C9CED6;

  /* ----- Tints (10% / 20% / 90%) ----- */
  --color-teal-50:    #E9F6F9;
  --color-teal-100:   #C8E8EE;
  --color-teal-700:   #1F7F92;
  --color-blue-50:    #EAEEF7;
  --color-blue-700:   #122657;
  --color-orange-50:  #FDEEDB;
  --color-money-50:   #F1F6DD;
  --color-berry-50:   #F2E1EC;

  /* ----- Typography (2026) ----- */
  --font-heading: 'Outfit', 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

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

  --leading-tight:   1.15;
  --leading-snug:    1.35;
  --leading-normal:  1.6;
  --leading-loose:   1.8;

  /* Type scale — modular, 1.250 (Major Third) */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-60: 3.75rem;

  /* ----- Spacing (4 px base) ----- */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ----- Radii ----- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* ----- Shadows ----- */
  --shadow-xs:   0 1px 2px rgba(15, 26, 58, 0.06);
  --shadow-sm:   0 2px 4px rgba(15, 26, 58, 0.06), 0 1px 2px rgba(15, 26, 58, 0.04);
  --shadow-md:   0 6px 16px rgba(15, 26, 58, 0.08), 0 2px 4px rgba(15, 26, 58, 0.04);
  --shadow-lg:   0 18px 40px rgba(15, 26, 58, 0.12), 0 4px 12px rgba(15, 26, 58, 0.06);
  --shadow-ring: 0 0 0 3px rgba(43, 163, 187, 0.30);

  /* ----- Motion ----- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --duration-1:    120ms;
  --duration-2:    200ms;
  --duration-3:    320ms;

  /* ----- Layout ----- */
  --container-max: 1180px;
  --content-max:   72ch;
}