@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Inter:wght@400;500&display=swap');

:root {
  /* ── Color Tokens ─────────────────────────────────── */
  --color-canvas:          #F6F7F9;
  --color-surface:         #FFFFFF;
  --color-surface-raised:  #FDFEFE;

  --color-navy:            #162841;
  --color-navy-hover:      #1E3A55;
  --color-navy-active:     #0F2030;

  --color-text-primary:    #162841;
  --color-text-secondary:  #4A6070;

  --color-border:          #DDE4EC;

  --color-success:         #4CAF82;
  --color-success-bg:      #E8F5EE;
  --color-success-text:    #347A52;

  --color-warning:         #E6A743;
  --color-warning-bg:      #FDF5E4;
  --color-warning-text:    #8C6918;

  --color-error:           #D64531;
  --color-error-bg:        #FDEAE6;
  --color-error-text:      #B33A28;

  --color-info:            #92B4B5;
  --color-info-bg:         #EDF4F4;
  --color-info-text:       #3A6E70;

  /* ── Shadow Tokens ────────────────────────────────── */
  --shadow-clay-light:
    inset 0 2px 4px rgba(0, 0, 0, 0.06),
    inset 0 -2px 4px rgba(255, 255, 255, 0.8);

  --shadow-clay-standard:
    6px 6px 12px rgba(0, 0, 0, 0.10),
    -6px -6px 12px rgba(255, 255, 255, 0.9),
    inset 0 1px 2px rgba(255, 255, 255, 0.6);

  --shadow-clay-raised:
    8px 8px 16px rgba(0, 0, 0, 0.13),
    -8px -8px 16px rgba(255, 255, 255, 0.95),
    inset 0 2px 4px rgba(255, 255, 255, 0.7);

  /* ── Border Radius Tokens ─────────────────────────── */
  --radius-card:    20px;
  --radius-button:  9999px;
  --radius-input:   16px;
  --radius-badge:   9999px;
  --radius-modal:   24px;
  --radius-toast:   16px;
  --radius-tooltip: 12px;

  /* ── Motion Tokens ────────────────────────────────── */
  --transition-hover:   200ms ease-out;
  --transition-press:   150ms ease-in-out;
  --transition-page:    350ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-modal:   400ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Typography Tokens ────────────────────────────── */
  --font-heading: 'Poppins', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
}

/* ── Reduced Motion ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
  }
}