/* ============================================
   AIMS FORCE — Design Tokens
   Generated from tokens.json
   All styles reference these custom properties.
   ============================================ */

:root {
  /* ---- Color: Primary ---- */
  --color-navy:           #1B2D4F;
  --color-navy-light:     #2A3E5C;
  --color-deep-ocean:     #0B1D3A;

  /* ---- Color: Secondary ---- */
  --color-teal:           #29A8DF;
  --color-teal-dark:      #1875A8;  /* Accessible: 5.06:1 on white */
  --color-teal-light:     #E0F7FA;

  /* ---- Color: Accent ---- */
  --color-gold:           #F59E0B;
  --color-gold-light:     #FEF3C7;
  --color-gold-dark:      #B45309;

  /* ---- Color: Neutral ---- */
  --color-white:          #FFFFFF;
  --color-off-white:      #F8F9FA;
  --color-gray-50:        #F1F3F5;
  --color-gray-100:       #E9ECEF;
  --color-gray-200:       #DEE2E6;
  --color-gray-300:       #CED4DA;
  --color-gray-400:       #ADB5BD;
  --color-gray-500:       #6C757D;
  --color-gray-600:       #495057;
  --color-gray-700:       #343A40;
  --color-gray-800:       #212529;

  /* ---- Color: Semantic ---- */
  --color-success:        #28A745;
  --color-error:          #DC2626;
  --color-warning:        #F59E0B;
  --color-info:           #29A8DF;

  /* ---- Typography: Family ---- */
  --font-heading:         'Inter', system-ui, -apple-system, sans-serif;
  --font-body:            'Source Sans 3', 'Source Sans Pro', system-ui, -apple-system, sans-serif;

  /* ---- Typography: Headings ---- */
  --h1-size:              44px;
  --h1-line:              52px;
  --h1-weight:            900;
  --h1-tracking:          -0.02em;

  --h2-size:              32px;
  --h2-line:              40px;
  --h2-weight:            800;
  --h2-tracking:          -0.01em;

  --h3-size:              24px;
  --h3-line:              32px;
  --h3-weight:            700;
  --h3-tracking:          0;

  --h4-size:              18px;
  --h4-line:              24px;
  --h4-weight:            700;

  /* ---- Typography: Body ---- */
  --body-lg:              18px;
  --body-lg-line:         28px;
  --body-md:              16px;
  --body-md-line:         24px;
  --body-sm:              14px;
  --body-sm-line:         20px;
  --body-xs:              12px;
  --body-xs-line:         16px;

  /* ---- Spacing (8px baseline) ---- */
  --space-1:              4px;
  --space-2:              8px;
  --space-3:              12px;
  --space-4:              16px;
  --space-5:              20px;
  --space-6:              24px;
  --space-8:              32px;
  --space-10:             40px;
  --space-12:             48px;
  --space-16:             64px;
  --space-20:             80px;
  --space-24:             96px;
  --space-32:             128px;

  /* ---- Grid ---- */
  --grid-columns:         12;
  --grid-max-width:       1200px;
  --grid-gutter:          24px;

  /* ---- Radius ---- */
  --radius-sm:            6px;
  --radius-md:            10px;
  --radius-lg:            16px;
  --radius-xl:            24px;
  --radius-full:          9999px;

  /* ---- Shadow ---- */
  --shadow-sm:            0 1px 3px rgba(10,37,64,0.08);
  --shadow-md:            0 4px 12px rgba(10,37,64,0.10);
  --shadow-lg:            0 8px 30px rgba(10,37,64,0.12);
  --shadow-xl:            0 20px 60px rgba(10,37,64,0.15);
  --shadow-teal:          0 8px 24px rgba(41,168,223,0.20);
  --shadow-gold:          0 8px 24px rgba(245,158,11,0.20);

  /* ---- Motion ---- */
  --duration-fast:        120ms;
  --duration-medium:      240ms;
  --duration-slow:        420ms;
  --ease-default:         cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-enter:           cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-exit:            cubic-bezier(0.4, 0.0, 1, 1);
  --ease-bounce:          cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- Transition shorthands ---- */
  --transition-fast:      all var(--duration-fast) var(--ease-default);
  --transition-medium:    all var(--duration-medium) var(--ease-default);
  --transition-slow:      all var(--duration-slow) var(--ease-default);

  /* ---- Component: Button ---- */
  --btn-py:               12px;
  --btn-px:               24px;
  --btn-radius:           6px;
  --btn-hover-lift:       -3px;
  --btn-font-size:        15px;
  --btn-font-weight:      600;

  /* ---- Component: Card ---- */
  --card-padding:         24px;
  --card-radius:          10px;
  --card-border:          1px solid var(--color-gray-100);
  --card-hover-lift:      -6px;
  --card-hover-shadow:    0 12px 32px rgba(41,168,223,0.12);

  /* ---- Component: Input ---- */
  --input-py:             12px;
  --input-px:             16px;
  --input-radius:         10px;
  --input-border:         1.5px solid var(--color-gray-200);
  --input-focus-ring:     0 0 0 4px rgba(41,168,223,0.10);

  /* ---- Component: Header ---- */
  --header-h:             72px;
  --header-h-scrolled:    60px;

  /* ---- Breakpoints (for reference; use in @media) ---- */
  /* sm: 480px  |  md: 768px  |  lg: 1024px  |  xl: 1440px */
}

/* ---- Reduced Motion ---- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:   0.01ms;
    --duration-medium: 0.01ms;
    --duration-slow:   0.01ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}