/**
 * Gutterpro design tokens
 * Source: PC + mobile mockups, with forest green remapped to white-bluish + bronze.
 *
 * Load this file before component CSS:
 *   <link rel="stylesheet" href="design-tokens.css" />
 */

:root {
  /* ------------------------------------------------------------------ */
  /* Color — White Bluish (replaces forest-green fills)                 */
  /* ------------------------------------------------------------------ */
  --color-white-bluish-50: #fbfdff;
  --color-white-bluish-100: #f4f8fc;
  --color-white-bluish-200: #e8eef6;
  --color-white-bluish-300: #d4deea;
  --color-white-bluish-400: #b7c6d6;
  --color-white-bluish-500: #8fa4b8;
  --color-white-bluish-600: #6d849b;
  --color-white-bluish-700: #4e647a;
  --color-white-bluish-800: #34485c;
  --color-white-bluish-900: #1c2d3e;

  /* ------------------------------------------------------------------ */
  /* Color — Bronze (replaces gold CTAs + green labels / stats)         */
  /* ------------------------------------------------------------------ */
  --color-bronze-50: #f8f1e6;
  --color-bronze-100: #ead8b8;
  --color-bronze-200: #dcc08a;
  --color-bronze-300: #cda85f;
  --color-bronze-400: #c4964a;
  --color-bronze-500: #b08a3e;
  --color-bronze-600: #957433;
  --color-bronze-700: #785c28;
  --color-bronze-800: #5c451e;
  --color-bronze-900: #3f2e14;

  /* ------------------------------------------------------------------ */
  /* Color — Neutrals                                                   */
  /* ------------------------------------------------------------------ */
  --color-white: #ffffff;
  --color-black: #111111;
  --color-gray-100: #f4f4f5;
  --color-gray-300: #d4d4d8;
  --color-gray-500: #71717a;
  --color-gray-600: #52525b;
  --color-gray-700: #3f3f46;
  --color-gray-800: #27272a;
  --color-overlay-before: #1f2430;

  /* ------------------------------------------------------------------ */
  /* Semantic color                                                     */
  /* ------------------------------------------------------------------ */
  --color-bg-page: var(--color-white);
  --color-bg-surface: var(--color-white-bluish-200);
  --color-bg-surface-muted: var(--color-white-bluish-100);
  --color-bg-card: var(--color-white);
  --color-bg-emphasis: var(--color-bronze-500);
  --color-bg-cta-band: var(--color-white-bluish-200);
  --color-bg-cta-section: var(--color-white-bluish-100);
  --color-bg-cta-panel: var(--color-white);
  --color-cta-accent: var(--color-bronze-400);
  --color-bg-choosing-panel: var(--color-white-bluish-100);
  --color-bg-choosing-option: var(--color-white);
  --color-bg-choosing-option-active: var(--color-bronze-50);
  --color-border-choosing-active: var(--color-bronze-400);

  --color-text-primary: var(--color-black);
  --color-text-secondary: var(--color-gray-600);
  --color-text-muted: var(--color-gray-500);
  --color-text-on-surface: var(--color-white-bluish-900);
  --color-text-on-surface-muted: var(--color-white-bluish-700);
  --color-text-on-emphasis: var(--color-white);
  --color-text-accent: var(--color-bronze-600);
  --color-text-stat: var(--color-bronze-600);

  --color-border-subtle: var(--color-white-bluish-300);
  --color-border-faq: var(--color-white-bluish-200);
  --color-border-process: var(--color-gray-100);
  --color-border-strong: var(--color-white-bluish-900);
  --color-border-on-surface: var(--color-white-bluish-800);

  --color-icon-star: var(--color-bronze-400);
  --color-icon-tile: var(--color-bronze-400);
  --color-icon-on-tile: var(--color-black);
  --color-checkmark: var(--color-bronze-400);

  --color-label-before-bg: var(--color-overlay-before);
  --color-label-before-text: var(--color-white);
  --color-label-after-bg: var(--color-bronze-400);
  --color-label-after-text: var(--color-black);

  --color-bg-service-card: var(--color-white-bluish-100);
  --color-bg-service-card-hover: var(--color-white-bluish-200);

  --color-tab-text: var(--color-text-secondary);
  --color-tab-text-active: var(--color-text-primary);
  --color-tab-indicator: var(--color-bronze-500);
  --color-tab-bg-hover: var(--color-white-bluish-100);

  /* ------------------------------------------------------------------ */
  /* Typography                                                         */
  /* ------------------------------------------------------------------ */
  --font-family-sans: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --font-size-xs: 0.75rem;     /* 12px — section labels, image badges */
  --font-size-sm: 0.875rem;    /* 14px — trust line, locations */
  --font-size-md: 1rem;        /* 16px — body */
  --font-size-lg: 1.125rem;    /* 18px — lead body */
  --font-size-xl: 1.25rem;     /* 20px — card titles */
  --font-size-2xl: 1.75rem;    /* 28px — mobile H2 */
  --font-size-3xl: 2.25rem;    /* 36px — desktop H2 / mobile H1 */
  --font-size-4xl: 3rem;       /* 48px — desktop H1 */
  --font-size-5xl: 3.5rem;     /* 56px — stat numbers (desktop) */

  --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;

  /* ------------------------------------------------------------------ */
  /* Spacing (4px base)                                                 */
  /* ------------------------------------------------------------------ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --space-section-y-mobile: var(--space-12);
  --space-section-y-desktop: var(--space-20);
  --section-padding: 5rem;
  --section-padding-mobile: 3rem;
  --element-gap: 1.5rem;
  --space-page-x-mobile: var(--space-5);
  --space-page-x-desktop: var(--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(--space-6);

  --space-card-padding: var(--space-8);
  --space-button-y: 0.9rem;
  --space-button-x: 1.5rem;

  --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);

  /* ------------------------------------------------------------------ */
  /* Sizing                                                             */
  /* ------------------------------------------------------------------ */
  --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: 75rem;
  --size-checkmark: 1.125rem;

  /* ------------------------------------------------------------------ */
  /* Radius / shadow / border                                           */
  /* ------------------------------------------------------------------ */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-full: 9999px;

  --radius-button: var(--radius-none);
  --radius-card: var(--radius-none);
  --radius-badge: var(--radius-none);
  --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);

  --shadow-none: none;
  --shadow-card: 0 8px 24px rgba(28, 45, 62, 0.06);
  --shadow-cta-panel: 0 16px 48px rgba(28, 45, 62, 0.08), 0 0 0 1px rgba(28, 45, 62, 0.04);
  --shadow-choosing-option: 0 4px 16px rgba(28, 45, 62, 0.06);
  --shadow-choosing-stage: 0 12px 40px rgba(28, 45, 62, 0.08);
  --shadow-process-step: 0 4px 12px rgba(0, 0, 0, 0.05);

  /* ------------------------------------------------------------------ */
  /* Motion                                                             */
  /* ------------------------------------------------------------------ */
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 150ms;
  --duration-base: 220ms;

  /* ------------------------------------------------------------------ */
  /* Breakpoints (for reference in JS / documentation)                  */
  /* ------------------------------------------------------------------ */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* ------------------------------------------------------------------ */
  /* Component aliases                                                  */
  /* ------------------------------------------------------------------ */
  --btn-primary-bg: var(--color-bronze-400);
  --btn-primary-text: var(--color-black);
  --btn-primary-bg-hover: var(--color-bronze-500);
  --btn-primary-border: 1px solid var(--color-bronze-600);
  --shadow-btn-primary: 0 2px 10px rgba(149, 116, 51, 0.28), 0 1px 2px rgba(17, 17, 17, 0.06);
  --shadow-btn-primary-hover: 0 6px 20px rgba(149, 116, 51, 0.38), 0 2px 6px rgba(17, 17, 17, 0.08);
  --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-white-bluish-100);
  --btn-on-emphasis-text: var(--color-bronze-800);
}

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