/* EYOX brand layer for this page.
   Palette, type and radii follow ~/.claude/skills/eyox-design/colors_and_type.css.
   Sora loads from Google Fonts. */

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

:root {
  /* Teal (primary) */
  --eyox-teal-900: #4D757F;
  --eyox-teal-700: #6796A2;
  --eyox-teal-300: #A8DDE4;
  --eyox-teal-200: #D9EEF2;
  --eyox-teal-150: #CCE5EA;
  --eyox-teal-100: #E5F8FB;
  --eyox-teal-050: #F2FBFD;
  --eyox-teal-025: #F6FDFE;

  /* Navy: logo, H1, big numerals only */
  --eyox-navy-900: #1B4079;

  /* Pinks: subtle highlights */
  --eyox-pink-300: #FFC4EB;
  --eyox-pink-200: #FFD6F1;
  --eyox-pink-100: #FFEBF8;

  /* Neutrals */
  --eyox-ink-900: #383C42;
  --eyox-ink-700: #717884;
  --eyox-ink-500: #8DB1BA;
  --eyox-ink-300: #A7ACB4;
  --eyox-ink-200: #B0BEC5;
  --eyox-ink-100: #E2E8F0;

  /* Pastel chips */
  --eyox-chip-blue: #E6EEF9;
  --eyox-chip-green: #E5FBED;
  --eyox-chip-orange: #FBEEE5;

  /* Semantic */
  --eyox-success-700: #10B981;
  --eyox-success-500: #2D9F79;
  --eyox-success-100: #ECFDF5;
  --eyox-info-700: #3B82F6;
  --eyox-info-100: #EFF6FF;
  --eyox-warn-700: #D97706;
  --eyox-warn-100: #FEF3C7;
  --eyox-danger-700: #E03E3E;
  --eyox-danger-050: #FCEDED;

  /* Roles */
  --bg: var(--eyox-teal-050);
  --bg-elevated: var(--eyox-teal-025);
  --bg-band: var(--eyox-teal-100);
  --surface: #FFFFFF;
  --border: var(--eyox-teal-300);
  --border-strong: var(--eyox-teal-700);
  --fg: var(--eyox-ink-900);
  --fg-muted: var(--eyox-ink-700);
  --fg-on-primary: var(--eyox-teal-025);
  --primary: var(--eyox-teal-900);
  --accent: var(--eyox-navy-900);

  /* Type */
  --font-sans: 'Sora', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  /* Radii */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 9999px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0.0, 0, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;

  /* The only sanctioned shadow: the slider thumb */
  --shadow-thumb: 0 1px 2px rgba(77, 117, 127, 0.25);
}

html, body {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  color: var(--fg);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}