/* PWS Design System tokens — generated from design system export 2026-07-09 */

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

:root {
  /* Brand teal scale */
  --teal-900: #073B40;
  --teal-800: #0A5A61;
  --teal-700: #0E7C86; /* primary brand */
  --teal-600: #12939E;
  --teal-500: #17A9B4;
  --teal-300: #7FD1D8;
  --teal-100: #DFF2F3;
  --teal-050: #F0F9F9;

  /* Neutrals */
  --ink-900: #0B0B0C;
  --ink-700: #2A2C2D;
  --ink-500: #55595B;
  --ink-400: #8A8F91;
  --ink-300: #C9CDCE;
  --ink-200: #E7E9E9;
  --ink-100: #F4F4F2;
  --white: #FFFFFF;

  /* Warm accent — Tangerine (secondary brand color) */
  --tangerine-700: #C97655;
  --tangerine-600: #D6866A;
  --tangerine-500: #E29578; /* Tangerine Dream — accent */
  --tangerine-300: #EEC0AE;
  --tangerine-100: #FFDDD2; /* Almond Silk — tint */
  --tangerine-050: #FFF1EB;

  /* Semantic status */
  --success: #2E7D32;
  --warning: #B26A00;
  --error: #C5321F;
  --info: var(--teal-600);

  /* Aliases */
  --brand: var(--teal-700);
  --brand-strong: var(--teal-800);
  --brand-tint: var(--teal-100);
  --brand-faint: var(--teal-050);
  --accent-warm: var(--tangerine-500);
  --accent-warm-strong: var(--tangerine-700);
  --accent-warm-tint: var(--tangerine-100);
  --accent-warm-faint: var(--tangerine-050);
  --text-heading: var(--ink-900);
  --text-body: var(--ink-700);
  --text-muted: var(--ink-500);
  --text-faint: var(--ink-400);
  --text-on-brand: var(--white);
  --surface-page: var(--white);
  --surface-alt: var(--ink-100);
  --surface-card: var(--white);
  --surface-dark: var(--ink-900);
  --border-default: var(--ink-200);
  --border-strong: var(--ink-300);
  --link: var(--teal-700);
  --link-hover: var(--teal-800);

  /* Type */
  --font-sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --text-display: 600 3.5rem/1.08 var(--font-sans);
  --text-h1: 600 2.5rem/1.12 var(--font-sans);
  --text-h2: 600 2rem/1.18 var(--font-sans);
  --text-h3: 600 1.5rem/1.25 var(--font-sans);
  --text-h4: 600 1.125rem/1.35 var(--font-sans);
  --text-body-lg: 400 1.125rem/1.6 var(--font-sans);
  --text-body: 400 1rem/1.6 var(--font-sans);
  --text-small: 400 0.875rem/1.5 var(--font-sans);
  --text-caption: 400 0.75rem/1.4 var(--font-sans);
  --text-label: 500 0.75rem/1.3 var(--font-sans);
  --tracking-tight: -0.02em;
  --tracking-label: 0.14em;

  /* Spacing — 4px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --container-max: 1160px;
  --gutter: 24px;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --radius-tab: 0 0 24px 24px;

  /* Shadows */
  --shadow-card: 0 1px 2px rgba(11, 11, 12, 0.05), 0 4px 16px rgba(11, 11, 12, 0.06);
  --shadow-float: 0 2px 6px rgba(11, 11, 12, 0.08), 0 12px 32px rgba(11, 11, 12, 0.12);
  --shadow-focus: 0 0 0 3px var(--teal-100);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 120ms;
  --dur-med: 220ms;
}

body {
  font-family: var(--font-sans);
  color: var(--text-body);
  background: var(--surface-page);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--text-heading);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--fw-semibold);
}

a {
  color: var(--link);
}
a:hover {
  color: var(--link-hover);
}