/**
 * CSS custom properties compiled from design-tokens/tokens.token.json
 * W3C DTCG v2025.10 — Primitive → Semantic → Component
 * Palette: logo navy + metallic gold (forest/amber are not brand actions)
 *
 * Load this file before component CSS.
 */

@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&display=swap");

:root {
  /* Color — Primitive */
  --color-primitive-navy-900: #0e2240;
  --color-primitive-navy-800: #1a3558;
  --color-primitive-gold-400: #d0ad5f;
  --color-primitive-gold-500: #c9a85c;
  --color-primitive-gold-600: #ad883e;
  --color-primitive-gold-700: #8a6918;
  --color-primitive-gold-ink: #12151a;
  --color-primitive-gold-tint: #f8f4eb;
  --color-primitive-black: #000000;
  --color-primitive-slate-200: #e2e8f0;
  --color-primitive-slate-300: #cbd5e1;
  --color-primitive-slate-400: #94a3b8;
  --color-primitive-slate-500: #64748b;
  --color-primitive-slate-600: #475569;
  --color-primitive-slate-700: #334155;
  --color-primitive-neutral-50: #f8fafc;
  --color-primitive-neutral-100: #f1f5f9;
  --color-primitive-neutral-900: var(--color-primitive-navy-900);
  --color-primitive-red-100: #fee2e2;
  --color-primitive-red-700: #b91c1c;
  --color-primitive-fascia-600: #92400e;
  --color-primitive-fascia-500: #b45309;

  /* Color — Semantic */
  --color-semantic-surface-default: #ffffff;
  --color-semantic-surface-subtle: var(--color-primitive-neutral-50);
  --color-semantic-surface-dark: var(--color-primitive-navy-900);
  --color-semantic-surface-warning: var(--color-primitive-red-100);
  --color-semantic-surface-caution: color-mix(
    in srgb,
    var(--color-primitive-gold-500) 16%,
    var(--color-semantic-surface-default)
  );
  --color-semantic-surface-brand: color-mix(
    in srgb,
    var(--color-primitive-gold-500) 12%,
    var(--color-primitive-navy-800)
  );
  --color-semantic-text-primary: var(--color-primitive-neutral-900);
  --color-semantic-text-inverse: #ffffff;
  --color-semantic-text-brand: var(--color-primitive-gold-700);
  --color-semantic-text-on-gold: var(--color-primitive-gold-ink);
  --color-semantic-text-muted: var(--color-primitive-slate-500);
  --color-semantic-text-secondary: var(--color-primitive-slate-600);
  --color-semantic-action-primary-default: var(--color-primitive-navy-900);
  --color-semantic-action-primary-hover: var(--color-primitive-navy-800);
  --color-semantic-action-urgent-default: var(--color-primitive-gold-500);
  --color-semantic-action-urgent-hover: var(--color-primitive-gold-600);

  /* Dimension — Primitive */
  --dimension-primitive-space-1: 4px;
  --dimension-primitive-space-2: 8px;
  --dimension-primitive-space-3: 12px;
  --dimension-primitive-space-4: 16px;
  --dimension-primitive-space-6: 24px;
  --dimension-primitive-space-8: 32px;
  --dimension-primitive-space-12: 48px;
  --dimension-primitive-space-16: 64px;
  --dimension-primitive-space-20: 80px;
  --dimension-primitive-space-24: 96px;

  --dimension-primitive-radius-sm: 4px;
  --dimension-primitive-radius-md: 8px;
  --dimension-primitive-radius-lg: 16px;
  --dimension-primitive-radius-xl: 24px;
  --dimension-primitive-radius-full: 9999px;

  /* Dimension — Semantic */
  --dimension-semantic-layout-max-width: 1280px;
  --dimension-semantic-layout-header-height: var(--dimension-primitive-space-20);
  --dimension-semantic-layout-mobile-header-height: 56px;
  --dimension-semantic-layout-utility-height: 40px;
  --dimension-semantic-layout-ticker-height: 24px;
  --dimension-semantic-layout-mobile-dock-height: var(--dimension-primitive-space-16);
  --dimension-semantic-layout-gutter: var(--dimension-primitive-space-6);
  --dimension-semantic-layout-touch: var(--dimension-primitive-space-12);
  --dimension-semantic-layout-touch-gap: var(--dimension-primitive-space-3);

  /* Font */
  --font-family-primary: "Inter", system-ui, -apple-system, sans-serif;
  --font-family-heading: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Shadow */
  --shadow-card-default: 0 4px 12px rgba(14, 34, 64, 0.08);
  --shadow-card-hover: 0 12px 24px rgba(14, 34, 64, 0.16);

  /* Component */
  --component-button-primary-background: var(--color-semantic-action-primary-default);
  --component-button-primary-border-radius: var(--dimension-primitive-radius-md);
  --component-button-primary-min-height: var(--dimension-primitive-space-12);
  --component-button-urgent-background: var(--color-semantic-action-urgent-default);
  --component-button-urgent-text: var(--color-semantic-text-on-gold);
  --component-logo-plate-background: transparent;
  --component-mobile-dock-background: var(--color-semantic-surface-dark);
  --component-mobile-dock-height: var(--dimension-semantic-layout-mobile-dock-height);

  /* Component aliases used by existing CSS */
  --color-white: var(--color-semantic-surface-default);
  --color-black: var(--color-primitive-navy-900);

  --color-bg-page: var(--color-semantic-surface-default);
  --color-bg-surface: var(--color-semantic-surface-subtle);
  --color-bg-surface-muted: var(--color-semantic-surface-subtle);
  --color-bg-card: var(--color-semantic-surface-default);
  --color-bg-emphasis: var(--color-primitive-navy-800);
  --color-bg-cta-band: var(--color-semantic-surface-subtle);
  --color-bg-cta-section: var(--color-semantic-surface-subtle);
  --color-bg-cta-panel: var(--color-semantic-surface-default);
  --color-cta-accent: var(--color-primitive-gold-500);
  --color-bg-choosing-panel: var(--color-semantic-surface-subtle);
  --color-bg-choosing-option: var(--color-semantic-surface-default);
  --color-bg-choosing-option-active: var(--color-primitive-gold-tint);
  --color-border-choosing-active: var(--color-primitive-gold-600);

  --color-text-primary: var(--color-semantic-text-primary);
  --color-text-secondary: var(--color-semantic-text-secondary);
  --color-text-muted: var(--color-semantic-text-muted);
  --color-text-on-surface: var(--color-semantic-text-primary);
  --color-text-on-surface-muted: var(--color-semantic-text-secondary);
  --color-text-on-emphasis: var(--color-semantic-text-inverse);
  --color-text-accent: var(--color-semantic-text-brand);
  --color-text-stat: var(--color-semantic-text-brand);
  --color-accent: var(--color-primitive-navy-900);

  --color-border-subtle: var(--color-primitive-neutral-100);
  --color-border-faq: var(--color-primitive-neutral-100);
  --color-border-process: var(--color-primitive-neutral-100);
  --color-border-strong: var(--color-primitive-navy-900);
  --color-border-on-surface: var(--color-primitive-navy-800);

  --color-icon-star: var(--color-primitive-gold-600);
  --color-icon-tile: var(--color-primitive-navy-900);
  --color-icon-on-tile: var(--color-semantic-text-inverse);
  --color-checkmark: var(--color-primitive-gold-600);

  --color-overlay-before: var(--color-primitive-navy-800);
  --color-label-before-bg: var(--color-overlay-before);
  --color-label-before-text: var(--color-semantic-text-inverse);
  --color-label-after-bg: var(--color-primitive-navy-900);
  --color-label-after-text: var(--color-semantic-text-inverse);

  --color-bg-service-card: var(--color-semantic-surface-subtle);
  --color-bg-service-card-hover: var(--color-primitive-neutral-100);

  --color-bg-main: var(--color-semantic-surface-default);
  --color-bg-subtle: var(--color-semantic-surface-subtle);
  --color-bg-coverage-card: var(--color-bg-subtle);
  --color-bg-city-card: var(--color-semantic-surface-default);
  --color-bg-city-card-hover: var(--color-semantic-surface-default);
  --color-areas-hero-overlay: color-mix(in srgb, var(--color-primitive-navy-900) 62%, transparent);
  --color-areas-hero-text: var(--color-semantic-text-inverse);
  --color-areas-hero-ghost-border: color-mix(in srgb, var(--color-semantic-text-inverse) 72%, transparent);
  --radius-coverage-card: var(--dimension-primitive-radius-md);
  --shadow-coverage-card: var(--shadow-card-default);
  --shadow-city-card-hover: var(--shadow-card-hover);

  --color-tab-text: var(--color-text-secondary);
  --color-tab-text-active: var(--color-text-primary);
  --color-tab-indicator: var(--color-primitive-gold-600);
  --color-tab-bg-hover: var(--color-semantic-surface-subtle);

  --font-family-sans: var(--font-family-primary);

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.75rem;
  --font-size-3xl: 2.25rem;
  --font-size-4xl: 3rem;
  --font-size-5xl: 3.5rem;

  --line-height-tight: 1.15;
  --line-height-snug: 1.3;
  --line-height-body: 1.6;
  --line-height-relaxed: 1.65;
  --letter-spacing-label: 0.08em;
  --letter-spacing-button: 0.04em;
  --letter-spacing-wide: 0.06em;
  --letter-spacing-card-title: 0.04em;

  --space-1: var(--dimension-primitive-space-1);
  --space-2: var(--dimension-primitive-space-2);
  --space-3: var(--dimension-primitive-space-3);
  --space-4: var(--dimension-primitive-space-4);
  --space-5: 1.25rem;
  --space-6: var(--dimension-primitive-space-6);
  --space-8: var(--dimension-primitive-space-8);
  --space-10: 2.5rem;
  --space-12: var(--dimension-primitive-space-12);
  --space-16: var(--dimension-primitive-space-16);
  --space-20: var(--dimension-primitive-space-20);
  --space-24: var(--dimension-primitive-space-24);

  --space-section-y-mobile: var(--dimension-primitive-space-16);
  --space-section-y-desktop: clamp(
    var(--dimension-primitive-space-20),
    6vw,
    120px
  );
  --section-padding: var(--dimension-primitive-space-20);
  --section-padding-mobile: var(--dimension-primitive-space-12);
  --element-gap: var(--dimension-primitive-space-6);
  --space-page-x-mobile: var(--dimension-primitive-space-4);
  --space-page-x-desktop: var(--dimension-primitive-space-16);

  --space-stack-xs: var(--space-2);
  --space-stack-sm: var(--space-4);
  --space-stack-md: var(--space-6);
  --space-stack-lg: var(--space-8);

  --space-grid-gap-mobile: var(--space-4);
  --space-grid-gap-desktop: var(--dimension-semantic-layout-gutter);

  --space-card-padding: var(--space-8);
  --space-button-y: 0.75rem;
  --space-button-x: var(--dimension-primitive-space-6);

  --space-services-overview-header-gap: var(--space-8);
  --space-services-overview-grid-gap: var(--space-6);
  --space-service-section-gap: var(--space-12);
  --space-tab-x: var(--space-5);
  --space-tab-y: var(--space-3);

  --size-avatar-sm: 2.5rem;
  --size-avatar-md: 3rem;
  --size-avatar-overlap: -0.7rem;
  --size-icon-tile: 2.75rem;
  --size-service-icon-tile: var(--size-icon-tile);
  --size-star: 1rem;
  --size-label-dot: 0.5rem;
  --size-hero-min-height: 100vh;
  --size-container-max: var(--dimension-semantic-layout-max-width);
  --size-checkmark: 1.125rem;

  --radius-none: 0;
  --radius-sm: var(--dimension-primitive-radius-sm);
  --radius-md: var(--dimension-primitive-radius-md);
  --radius-lg: var(--dimension-primitive-radius-lg);
  --radius-xl: var(--dimension-primitive-radius-xl);
  --radius-full: var(--dimension-primitive-radius-full);

  --radius-button: var(--component-button-primary-border-radius);
  --radius-card: var(--dimension-primitive-radius-md);
  --radius-badge: var(--dimension-primitive-radius-sm);
  --radius-avatar: var(--radius-full);
  --radius-dot: var(--radius-full);

  --border-width-thin: 1px;
  --border-width-button: 1px;
  --border-tab-active: 2px solid var(--color-tab-indicator);

  --color-glass-fill: color-mix(in srgb, var(--color-semantic-text-inverse) 12%, transparent);
  --color-glass-border: color-mix(in srgb, var(--color-primitive-gold-400) 48%, transparent);
  --color-glass-border-hover: color-mix(in srgb, var(--color-primitive-gold-400) 78%, transparent);
  --color-glass-highlight: color-mix(in srgb, var(--color-semantic-text-inverse) 32%, transparent);
  --color-glass-copy: color-mix(in srgb, var(--color-semantic-text-inverse) 78%, transparent);
  --blur-glass: blur(16px) saturate(140%);
  --shadow-glass: 0 10px 32px rgba(14, 34, 64, 0.32), inset 0 1px 0 var(--color-glass-highlight);
  --shadow-glass-hover: 0 16px 36px rgba(14, 34, 64, 0.42), inset 0 1px 0 var(--color-glass-highlight);

  --shadow-none: none;
  --shadow-card: var(--shadow-card-default);
  --shadow-cta-panel: var(--shadow-card-hover);
  --shadow-choosing-option: var(--shadow-card-default);
  --shadow-choosing-stage: var(--shadow-card-hover);
  --shadow-process-step: var(--shadow-card-default);

  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 150ms;
  --duration-base: 220ms;
  --transition-card-hover-duration: 200ms;
  --transition-card-hover-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-modal-enter-duration: 250ms;
  --transition-modal-enter-ease: cubic-bezier(0.34, 1.56, 0.64, 1);

  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  --btn-primary-bg: var(--component-button-primary-background);
  --btn-primary-text: var(--color-semantic-text-inverse);
  --btn-primary-bg-hover: var(--color-semantic-action-primary-hover);
  --btn-primary-border: 1px solid var(--color-primitive-navy-800);
  --shadow-btn-primary: var(--shadow-card-default);
  --shadow-btn-primary-hover: var(--shadow-card-hover);
  --space-button-y-lg: 1.05rem;
  --space-button-x-lg: 2rem;

  --btn-secondary-bg: transparent;
  --btn-secondary-text: var(--color-text-on-surface);
  --btn-secondary-border: var(--color-border-on-surface);

  --btn-on-emphasis-bg: var(--color-primitive-neutral-50);
  --btn-on-emphasis-text: var(--color-primitive-navy-900);
}

@media (min-width: 768px) {
  :root {
    --font-size-2xl: 2rem;
    --font-size-3xl: 2.75rem;
    --font-size-4xl: 3.5rem;
    --font-size-5xl: 4rem;
  }
}