:root {
  --ds-background-100: #FFFFFF;
  --ds-background-200: #E8EDF1;
  --ds-gray-100: #F4F7F9;
  --ds-gray-200: #E8EDF1;  --ds-gray-300: #DAE2E9;
  --ds-gray-400: #C2CFDA;  --ds-gray-500: #A9BAC7;
  --ds-gray-600: #697D8A;  --ds-gray-700: #5C6D79;  --ds-gray-800: #43525C;
  --ds-gray-900: #2E3F4C;
  --ds-gray-1000: #0A2536;
  --brand-blue: #154F74;
  --brand-blue-active: #0F3A56;
  --brand-blue-pressed: #0B2C42;
  --brand-sunset-hover: #C33E26;

  --ds-accent-100: #FFF1EE;
  --ds-accent-200: #FFD9D1;
  --ds-accent-400: #FFBAAD;  --ds-accent-600: #D4442A;  --ds-accent-700: #F24E30;  --ds-accent-900: #B13923;  --ds-accent-1000: #9D321F;
  --ds-radius-6: 6px;
  --ds-radius-12: 12px;
  --ds-radius-16: 16px;
  --ds-shadow-border: 0 0 0 1px var(--ds-gray-400);
  --ds-shadow-100: 0 1px 2px rgba(10, 37, 54, 0.07);
  --ds-shadow-200: 0 4px 8px rgba(10, 37, 54, 0.08), 0 1px 2px rgba(10, 37, 54, 0.05);
  --ds-shadow-300: 0 8px 24px rgba(10, 37, 54, 0.10), 0 2px 6px rgba(10, 37, 54, 0.05);

  --ds-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ds-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ds-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ds-duration-fast: 120ms;
  --ds-duration-base: 200ms;

  --ds-font-sans: "DM Sans", "DM Sans Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --ds-font-mono: "DM Mono", "DM Mono Fallback", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --surface-page: var(--ds-background-100);
  --surface-panel: var(--ds-background-200);  --surface-brand: var(--brand-blue);
  --surface-dark: var(--ds-gray-1000);
  --surface-banner: var(--ds-accent-400);  --ink-primary: var(--ds-gray-1000);
  --ink-secondary: var(--ds-gray-700);
  --ink-heading-alt: var(--ds-gray-700);
  --ink-brand: var(--brand-blue);  --ink-on-dark: #FFFFFF;
  --ink-on-dark-secondary: var(--ds-background-200);  --interactive-primary: var(--ds-accent-600);  --interactive-primary-label: #FFFFFF;  --interactive-primary-active: var(--brand-sunset-hover);
  --interactive-primary-pressed: var(--brand-sunset-hover);  --interactive-blue: var(--brand-blue);  --interactive-blue-active: var(--brand-blue-active);
  --interactive-blue-pressed: var(--brand-blue-pressed);
  --interactive-secondary: var(--ds-accent-900);
  --interactive-secondary-active: var(--ds-accent-1000);
  --interactive-on-brand: #FFFFFF;
  --accent-badge: var(--ds-accent-600);
  --data-signal: var(--ds-accent-600);
  --data-highlight: var(--ds-accent-400);
  --border-subtle: var(--ds-gray-400);
  --border-strong: var(--ds-gray-600);
  --fill-on-dark: rgba(255, 255, 255, 0.06);
  --fill-on-dark-raised: rgba(255, 255, 255, 0.08);
  --border-on-dark: rgba(255, 255, 255, 0.16);
  --border-on-dark-strong: rgba(255, 255, 255, 0.35);
  --state-error-marker: #C73A2E;  --state-success-marker: var(--ds-gray-700);
  --marker-tick: var(--ds-gray-700);
  --photo-edge: oklch(0 0 0 / 0.1);
  --photo-edge-on-dark: oklch(1 0 0 / 0.1);
  --focus-ring: var(--ds-accent-700);
  --focus-ring-on-dark: #FFFFFF;

  --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-section: clamp(48px, 8vw, 96px);
  --layout-container: 1320px;
  --layout-gutter: 16px;
  --panel-gutter: var(--space-2);
  --panel-inset: clamp(20px, 4.5vw, 72px);

  --radius-small: 6px;
  --radius-base: 6px;
  --radius-large: 12px;
  --radius-pill: 999px;

  --frosted-border: rgba(255, 255, 255, 0.4);
  --frosted-blur: 12px;
  --scrim-soft: rgba(10, 37, 54, 0.45);
  --scrim-firm: rgba(10, 37, 54, 0.65);

  --ghost-wordmark-opacity: 0.06;
}

@media (min-width: 768px) {
  :root {
    --layout-gutter: 32px;
    --panel-gutter: var(--space-3);
  }
}