/* ==========================================================================
   Cumbre English — Design tokens
   One place for colour, type, spacing, radius, elevation and motion.
   ========================================================================== */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/jakarta.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand */
  --navy-950: #0b1b31;
  --navy-900: #0f2440;
  --navy-800: #142d4e;
  --navy-700: #1c3c62;
  --navy-600: #274b74;

  --blue-700: #1d4ed8;
  --blue-600: #2563eb;
  --blue-500: #3b82f6;
  --blue-100: #dbeafe;
  --blue-50: #eff5ff;

  --teal-800: #0b5f57;
  --teal-700: #0e7c72;
  --teal-600: #12988b;
  --teal-500: #16b8a6;
  --teal-100: #c9f1eb;
  --teal-50: #e8f8f5;

  --green-700: #15803d;
  --green-600: #16a34a;
  --green-100: #dcfce7;
  --green-50: #ecfdf3;

  --amber-700: #b45309;
  --amber-100: #fef3c7;
  --amber-50: #fff8eb;

  --red-700: #b91c1c;
  --red-600: #dc2626;
  --red-100: #fee2e2;
  --red-50: #fef2f2;

  /* Surfaces */
  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-alt: #f1f5f9;
  --surface-sunken: #eef3f9;
  --line: #e2e8f0;
  --line-strong: #cbd5e1;
  --line-navy: rgba(20, 45, 78, 0.14);

  /* Text */
  --ink: #172033;
  --navy-text: var(--navy-800);
  --muted: #64748b;
  --muted-strong: #526176;
  --on-dark: #f8fafc;
  --on-dark-muted: #aab8cc;

  /* Semantic */
  --focus: #2563eb;
  --success: var(--green-600);
  --warning: var(--amber-700);
  --danger: var(--red-600);

  /* Typography */
  --font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: clamp(2.125rem, 1.55rem + 2.6vw, 2.875rem);
  --text-5xl: clamp(2.5rem, 1.6rem + 4vw, 4rem);

  --leading-tight: 1.12;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.72;

  --tracking-wide: 0.08em;
  --tracking-tight: -0.02em;

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

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(15, 36, 64, 0.06);
  --shadow-sm: 0 1px 2px rgba(15, 36, 64, 0.05), 0 2px 6px rgba(15, 36, 64, 0.04);
  --shadow-md: 0 12px 28px -18px rgba(15, 36, 64, 0.26), 0 3px 8px -4px rgba(15, 36, 64, 0.08);
  --shadow-lg: 0 32px 64px -32px rgba(11, 27, 49, 0.34), 0 8px 20px -12px rgba(11, 27, 49, 0.16);
  --shadow-dialog: 0 48px 96px -40px rgba(7, 18, 34, 0.48);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.25, 1);
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 400ms;

  /* Layout */
  --container: 1200px;
  --container-wide: 1320px;
  --header-height: 76px;
  --sidebar-width: 272px;

  /* Component aliases */
  --control-height: 46px;
  --btn-height: 46px;
  --card-radius: var(--radius-lg);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
  }
}