/* Elective design tokens
   Source of truth: apps-staging/tailwind.config.js + packages/styles (product codebase).
   Keep tailwind.config.js in this folder in sync with the hex values below. */

@font-face {
  font-family: "Universal Sans";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("assets/fonts/universal-regular.woff2") format("woff2");
}

@font-face {
  font-family: "Universal Sans";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("assets/fonts/universal-semi-bold.woff2") format("woff2");
}

:root {
  /* Brand: primary (navy). Product scale runs DEFAULT (darkest) -> 50 (palest). */
  --primary: #424A68;
  --primary-900: #535A76;
  --primary-800: #646B85;
  --primary-700: #767C93;
  --primary-600: #888EA2;
  --primary-500: #9BA0B1;
  --primary-400: #AEB2C0;
  --primary-300: #C2C5D0;
  --primary-200: #D6D8DF;
  --primary-100: #EAEBEF;

  /* Brand: secondary (coral) */
  --secondary: #E26E4B;
  --secondary-ink: #C2532F; /* Added: coral for small text and white-label buttons (4.6:1 on white). Not in the product config. */
  --secondary-900: #E77D5E;
  --secondary-800: #EB8D70;
  --secondary-700: #EF9B82;
  --secondary-600: #F3AA94;
  --secondary-500: #F6B8A5;
  --secondary-400: #F8C6B7;
  --secondary-300: #FBD4C9;
  --secondary-200: #FDE5DB;
  --secondary-100: #FEF1ED;

  /* Brand: accent (teal) */
  --accent: #A9E0E0;
  --accent-900: #B2E3E3;
  --accent-800: #BBE6E6;
  --accent-700: #C4E9E9;
  --accent-600: #CCEDEC;
  --accent-500: #D5F0EF;
  --accent-400: #DDF3F2;
  --accent-300: #E6F6F5;
  --accent-200: #EEF9F9;
  --accent-100: #F7FCFC;

  /* Neutrals (product gray scale) */
  --gray-900: #111827;
  --gray-800: #1F2937;
  --gray-700: #374151;
  --gray-600: #4B5563;
  --gray-500: #6B7280;
  --gray-400: #9CA3AF;
  --gray-300: #D1D5DB;
  --gray-200: #E5E7EB;
  --gray-100: #F3F4F6;
  --gray-50:  #F9FAFB;
  --white: #FFFFFF;

  /* Status (product) */
  --info: #2E5BAD;
  --success: hsl(97deg 46% 59%);
  --success-ink: hsl(97deg 46% 30%);
  --error: hsl(0deg 91% 61%);
  --error-ink: hsl(0deg 91% 40%);
  --warning: oklch(0.681 0.162 75.834);
  --warning-ink: oklch(0.45 0.162 75.834);

  /* Roles: use these in components, not the raw scale */
  --text-heading: var(--primary);    /* 8.7:1 on white */
  --text-body: var(--gray-600);      /* 7.6:1 */
  --text-muted: var(--gray-500);     /* 4.8:1 */
  --text-link: var(--secondary-ink);
  --text-on-dark: var(--white);
  --surface: var(--white);
  --surface-tint: var(--accent-100);
  --surface-sunken: var(--gray-50);
  --surface-dark: var(--primary);
  --border: var(--gray-200);
  --border-strong: var(--gray-300);
  --focus-ring: var(--secondary);

  /* Type: Universal Sans, two weights only (400 body, 600 headings/labels) */
  --font-sans: "Universal Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --weight-regular: 400;
  --weight-semibold: 600;

  /* Type scale (marketing). Fluid sizes clamp between phone and desktop. */
  --text-display: clamp(2.75rem, 1.6rem + 4.2vw, 4.5rem);   /* 44 -> 72 */
  --text-h1: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);          /* 36 -> 56 */
  --text-h2: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);        /* 30 -> 44 */
  --text-h3: clamp(1.375rem, 1.2rem + .8vw, 1.75rem);       /* 22 -> 28 */
  --text-h4: 1.25rem;                                       /* 20 */
  --text-lead: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem); /* 18 -> 21 */
  --text-body-size: 1.0625rem;                              /* 17 */
  --text-small: 0.9375rem;                                  /* 15 */
  --text-caption: 0.8125rem;                                /* 13 */
  --leading-tight: 1.08;
  --leading-heading: 1.15;
  --leading-body: 1.6;
  --tracking-display: -0.025em;
  --tracking-heading: -0.015em;
  --tracking-eyebrow: 0.08em;

  /* Spacing: 4px base */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
  --space-24: 96px; --space-32: 128px;
  --section-y: clamp(64px, 4rem + 4vw, 128px);
  --container: 1200px;
  --gutter: clamp(16px, 4vw, 32px);

  /* Radius */
  --radius-sm: 8px;   /* buttons, inputs */
  --radius-md: 12px;  /* cards */
  --radius-lg: 20px;  /* panels, media */
  --radius-full: 9999px;

  /* Elevation: navy-tinted, never pure black */
  --shadow-sm: 0 1px 2px rgba(66, 74, 104, .06), 0 1px 3px rgba(66, 74, 104, .08);
  --shadow-md: 0 4px 12px rgba(66, 74, 104, .08), 0 2px 4px rgba(66, 74, 104, .05);
  --shadow-lg: 0 24px 48px -12px rgba(66, 74, 104, .22);

  /* Motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 700ms;
}

/* Base */
html { -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-body-size);
  line-height: var(--leading-body);
  color: var(--text-body);
  background: var(--surface);
}
h1, h2, h3, h4, h5, h6 { color: var(--text-heading); font-weight: var(--weight-semibold); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: 4px; }

/* Type styles */
.t-display { font-size: var(--text-display); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); font-weight: 600; color: var(--text-heading); }
.t-h1 { font-size: var(--text-h1); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); font-weight: 600; color: var(--text-heading); }
.t-h2 { font-size: var(--text-h2); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); font-weight: 600; color: var(--text-heading); }
.t-h3 { font-size: var(--text-h3); line-height: 1.25; letter-spacing: -0.01em; font-weight: 600; color: var(--text-heading); }
.t-h4 { font-size: var(--text-h4); line-height: 1.35; font-weight: 600; color: var(--text-heading); }
.t-lead { font-size: var(--text-lead); line-height: 1.55; color: var(--text-body); }
.t-small { font-size: var(--text-small); line-height: 1.5; }
.t-caption { font-size: var(--text-caption); line-height: 1.4; color: var(--text-muted); }
.t-eyebrow { font-size: var(--text-caption); font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--secondary-ink); }
.dot { color: var(--secondary); } /* the brand's coral period, as in the logo */

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 1rem; line-height: 1; padding: 16px 24px; border-radius: var(--radius-sm); transition: background-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); }
.btn:active { transform: translateY(1px); }
.btn-sm { padding: 11px 18px; font-size: .9375rem; }
.btn-primary { background: var(--primary); color: var(--white); }
.btn-primary:hover { background: #363D57; box-shadow: var(--shadow-md); }
.btn-secondary { background: var(--secondary-ink); color: var(--white); }
.btn-secondary:hover { background: #A9441F; box-shadow: var(--shadow-md); }
.btn-accent { background: var(--accent); color: var(--primary); }
.btn-accent:hover { background: var(--accent-900); }
.btn-ghost { background: transparent; color: var(--primary); box-shadow: inset 0 0 0 1px var(--border-strong); }
.btn-ghost:hover { background: var(--gray-50); }

/* Surfaces */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.panel-dark { background: var(--surface-dark); color: rgba(255,255,255,.8); border-radius: var(--radius-lg); }
.panel-dark h1, .panel-dark h2, .panel-dark h3, .panel-dark h4 { color: var(--white); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}