/*
 * CoverYou design tokens (D-018).
 * Source: Figma "Design System - CoverYou" (file 29HHBfatb6E5JaKWjYdXaK), Foundations pages,
 * read 17 Oct 2026. Colours, radius and elevation are exact Figma values. Fonts: Inter for
 * everything, Pacifico only as the special font (.cy-special). The type scale and button
 * sizes are tuned smaller than Figma (see decision.md D-018); spacing is a 4px scale.
 * Only CSS custom properties live here, so loading this file changes nothing on its own.
 * Every name is prefixed --cy- so it cannot collide with Bootstrap or style.css.
 */
:root {
  /* ---------- Primitive colours (Figma: Colors) ---------- */
  --cy-neutral-0: #ffffff;
  --cy-neutral-50: #fafafa;
  --cy-neutral-100: #f5f5f5;
  --cy-neutral-200: #e5e5e5;
  --cy-neutral-300: #d4d4d4;
  --cy-neutral-400: #a3a3a3;
  --cy-neutral-500: #737373;
  --cy-neutral-600: #525252;
  --cy-neutral-700: #404040;
  --cy-neutral-800: #262626;
  --cy-neutral-900: #171717;
  --cy-neutral-1000: #000000;

  --cy-brand-50: #fdeae7;
  --cy-brand-100: #fcdfdb;
  --cy-brand-200: #fac9c2;
  --cy-brand-300: #f8aea4;
  --cy-brand-400: #f59386;
  --cy-brand-500: #f37867;
  --cy-brand-600: #f05d49; /* the CoverYou orange, same as today's site */
  --cy-brand-700: #a03e31;
  --cy-brand-800: #501f18;
  --cy-brand-900: #30130f;

  --cy-secondary-50: #e6e6e6;
  --cy-secondary-100: #dadada;
  --cy-secondary-200: #c1c1c1;
  --cy-secondary-300: #a2a2a2;
  --cy-secondary-400: #828282;
  --cy-secondary-500: #636363;
  --cy-secondary-600: #444444;
  --cy-secondary-700: #2d2d2d;
  --cy-secondary-800: #171717;
  --cy-secondary-900: #0e0e0e;

  --cy-info-50: #f2f7ff;
  --cy-info-100: #e2ecfe;
  --cy-info-200: #b6cffc;
  --cy-info-300: #8aacf7;
  --cy-info-400: #6488ff;
  --cy-info-500: #365eed;
  --cy-info-600: #1b3cce;
  --cy-info-700: #0d26ab;
  --cy-info-800: #0a1b7a;
  --cy-info-900: #071356;

  --cy-success-50: #effef5;
  --cy-success-100: #dafee9;
  --cy-success-200: #b7fbd4;
  --cy-success-300: #7ff6b2;
  --cy-success-400: #40e889;
  --cy-success-500: #17d068;
  --cy-success-600: #0ca750;
  --cy-success-700: #0e8743;
  --cy-success-800: #116a39;
  --cy-success-900: #105731;

  --cy-warning-50: #fffdee;
  --cy-warning-100: #fff9cc;
  --cy-warning-200: #fbefa4;
  --cy-warning-300: #f6dc5e;
  --cy-warning-400: #f4c519;
  --cy-warning-500: #eaad00;
  --cy-warning-600: #d1870a;
  --cy-warning-700: #a15e00;
  --cy-warning-800: #653a01;
  --cy-warning-900: #271500;

  --cy-critical-50: #fff2ed;
  --cy-critical-100: #ffe2d4;
  --cy-critical-200: #ffc0a8;
  --cy-critical-300: #ff9471;
  --cy-critical-400: #ff5630;
  --cy-critical-500: #fe3311;
  --cy-critical-600: #c60c08;
  --cy-critical-700: #b00e00;
  --cy-critical-800: #9d0f11;
  --cy-critical-900: #7e1011;

  /* Overlays (Figma: static-lighten / static-darken) */
  --cy-lighten-100: rgba(255, 255, 255, 0.10);
  --cy-lighten-200: rgba(255, 255, 255, 0.15);
  --cy-lighten-300: rgba(255, 255, 255, 0.25); /* Figma dynamic-lighten/300 (glass header) */
  --cy-lighten-400: rgba(255, 255, 255, 0.35);
  --cy-lighten-600: rgba(255, 255, 255, 0.75);
  --cy-darken-100: rgba(0, 0, 0, 0.10);
  --cy-darken-200: rgba(0, 0, 0, 0.15);
  --cy-darken-300: rgba(0, 0, 0, 0.30);
  --cy-darken-500: rgba(0, 0, 0, 0.60);

  /* ---------- Main colours: the 600 of each family (Figma theme/Primary, theme/Secondary) ----------
     Use these by default. The other steps are tints/shades for backgrounds (50-100), borders
     (200-300), and small text on light backgrounds (700-800), where a 600 is too light to read. */
  --cy-primary: var(--cy-brand-600);       /* #f05d49 */
  --cy-secondary: var(--cy-secondary-600); /* #444444 */
  --cy-info: var(--cy-info-600);
  --cy-success: var(--cy-success-600);
  --cy-warning: var(--cy-warning-600);
  --cy-critical: var(--cy-critical-600);

  /* ---------- Semantic colours (Figma: base-* / interactive-*) ---------- */
  --cy-surface-primary: var(--cy-neutral-0);
  --cy-surface-secondary: var(--cy-neutral-50);
  --cy-surface-tertiary: var(--cy-neutral-100);
  --cy-text-primary: var(--cy-neutral-900);      /* headings (base-surface/on-primary) */
  --cy-text-body: var(--cy-secondary);           /* body text: brand secondary #444444, 9.7:1 on white */
  --cy-text-secondary: var(--cy-neutral-500);    /* muted text, 4.7:1. Figma on-secondary is neutral-600, too close to the #444 body text */
  --cy-text-tertiary: var(--cy-neutral-500);     /* Figma on-tertiary is neutral-400, too faint for text: 2.5:1 on white */
  --cy-container-dark: var(--cy-neutral-900);
  --cy-text-on-dark: var(--cy-neutral-50);
  --cy-text-on-dark-secondary: var(--cy-neutral-300);

  --cy-divider: var(--cy-darken-100);
  --cy-border: var(--cy-neutral-200);
  --cy-dimmer: var(--cy-darken-500);

  --cy-info-bg: var(--cy-info-50);
  --cy-info-label: var(--cy-info-600);
  --cy-success-bg: var(--cy-success-50);
  --cy-success-label: var(--cy-success-600);
  --cy-warning-bg: var(--cy-warning-50);
  --cy-warning-label: var(--cy-warning-600);
  --cy-critical-bg: var(--cy-critical-50);
  --cy-critical-label: var(--cy-critical-600);

  /* Interactive: brand. Figma hover is brand-900 and pressed brand-800 (near black and dark
     brown). Tuned: hover and pressed are the same orange, 10% and 20% darker (see the
     color-mix block at the end; brand-700/800 are the fallback for old browsers). */
  /* D-119 tried a deeper coral (#c9412e) here; reverted on 30 Oct (owner: keep the brand primary) */
  --cy-action-brand: var(--cy-primary);
  --cy-action-brand-hover: var(--cy-brand-700);
  --cy-action-brand-pressed: var(--cy-brand-800);
  --cy-action-brand-label: var(--cy-neutral-0);
  --cy-action-brand-subtle: var(--cy-brand-50);

  --cy-action-critical: var(--cy-critical);
  --cy-action-critical-hover: var(--cy-critical-700);
  --cy-action-critical-pressed: var(--cy-critical-800);

  --cy-input-bg: var(--cy-neutral-0);
  --cy-input-bg-hover: var(--cy-neutral-0);
  /* Figma input border is neutral-300 (1.5:1 on white). Form fields need 3:1 so people can
     see where to type, so neutral-500 (4.7:1). */
  --cy-input-border: var(--cy-neutral-500);
  --cy-input-border-focus: var(--cy-neutral-1000);
  --cy-input-placeholder: var(--cy-neutral-500);
  --cy-input-helper: var(--cy-neutral-600);

  --cy-focus-ring: 0 0 0 3px var(--cy-darken-200); /* Figma *-ring: #00000026 */

  /* ---------- Typography (Figma: Typography, tuned smaller) ---------- */
  --cy-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  /* Special font: a few special places only (header highlight, banners), via .cy-special (never body, buttons,
     menus, forms or prices). One weight (400). */
  --cy-font-special: 'Pacifico', 'Segoe Script', cursive;
  --cy-weight-body: 400;       /* Figma Body */
  --cy-weight-label: 500;      /* Figma Label */
  --cy-weight-title: 600;      /* Figma Title */
  --cy-weight-subheading: 600; /* Figma Sub Heading is 700; 600 keeps H2s lighter than H1 */
  --cy-weight-heading: 700;    /* Figma Heading is 800; 800 is too dark for long headlines */

  /* size / line-height pairs. Figma desktop scale is 14-56. Owner: "12px is also big in some
     places" and wants a smaller hero, so the scale starts at 11 and tops out at 44. */
  --cy-fs-2xs: 11px;  --cy-lh-2xs: 14px;  /* badges, footnotes only */
  --cy-fs-xs: 12px;   --cy-lh-xs: 16px;   /* captions, helper text, legal */
  --cy-fs-sm: 13px;   --cy-lh-sm: 18px;   /* secondary UI text, menu descriptions */
  --cy-fs-md: 14px;   --cy-lh-md: 20px;   /* default UI + body text */
  --cy-fs-lg: 16px;   --cy-lh-lg: 24px;   /* long-form paragraphs, lead text */
  --cy-fs-xl: 18px;   --cy-lh-xl: 26px;
  --cy-fs-2xl: 20px;  --cy-lh-2xl: 28px;
  --cy-fs-3xl: 24px;  --cy-lh-3xl: 32px;
  --cy-fs-4xl: 28px;  --cy-lh-4xl: 36px;
  --cy-fs-5xl: 36px;  --cy-lh-5xl: 44px;
  --cy-fs-6xl: 44px;  --cy-lh-6xl: 52px;  /* hero only */

  /* Heading roles (desktop). Mobile values are in the media query below. */
  --cy-h1-fs: var(--cy-fs-5xl); --cy-h1-lh: var(--cy-lh-5xl);
  --cy-h2-fs: var(--cy-fs-4xl); --cy-h2-lh: var(--cy-lh-4xl);
  --cy-h3-fs: var(--cy-fs-xl);  --cy-h3-lh: var(--cy-lh-xl);   /* 18px: sub-sections and card titles (D-023; was 20) */
  --cy-h4-fs: var(--cy-fs-lg);  --cy-h4-lh: var(--cy-lh-lg);   /* 16px: small card/list titles (D-023; was 18) */
  --cy-hero-fs: var(--cy-fs-6xl); --cy-hero-lh: var(--cy-lh-6xl);

  /* ---------- Spacing (4px base) ---------- */
  --cy-space-0: 0;
  --cy-space-1: 4px;
  --cy-space-2: 8px;
  --cy-space-3: 12px;
  --cy-space-4: 16px;
  --cy-space-5: 20px;
  --cy-space-6: 24px;
  --cy-space-8: 32px;
  --cy-space-10: 40px;
  --cy-space-12: 48px;
  --cy-space-16: 64px;
  --cy-space-20: 80px;
  --cy-space-24: 96px;
  --cy-section-y: var(--cy-space-20); /* vertical padding of a page section */
  --cy-container: 1200px;
  --cy-gutter: var(--cy-space-6);

  /* ---------- Corner radius (Figma: Corner Radius Scale, exact) ---------- */
  --cy-radius-none: 0;
  --cy-radius-xs: 4px;
  --cy-radius-sm: 8px;
  --cy-radius-md: 12px;
  --cy-radius-lg: 16px;
  --cy-radius-lg-plus: 20px;
  --cy-radius-xl: 28px;
  --cy-radius-xl-plus: 32px;
  --cy-radius-2xl: 48px;
  --cy-radius-full: 9999px;

  /* ---------- Elevation & blur (Figma: Depth, exact) ---------- */
  --cy-elevation-1: 0 4px 4px rgba(0, 0, 0, 0.03);
  --cy-elevation-2: 0 6px 8px rgba(0, 0, 0, 0.04);
  --cy-elevation-3: 0 8px 10px rgba(0, 0, 0, 0.05);
  --cy-elevation-4: 0 10px 15px rgba(0, 0, 0, 0.06);
  --cy-elevation-5: 0 15px 20px rgba(0, 0, 0, 0.07);
  --cy-elevation-6: 0 25px 30px rgba(0, 0, 0, 0.08);
  --cy-elevation-7: 0 35px 40px rgba(0, 0, 0, 0.09);
  --cy-elevation-8: 0 40px 50px rgba(0, 0, 0, 0.10);
  --cy-elevation-9: 0 50px 60px rgba(0, 0, 0, 0.04);
  --cy-elevation-10: 0 60px 70px rgba(0, 0, 0, 0.12);
  --cy-blur-light: blur(30px);
  --cy-blur-heavy: blur(60px);
  /* Button bevel, from the Figma button component */
  --cy-bevel: inset -3px -3px 4px rgba(0, 0, 0, 0.30), inset 4px 4px 4px rgba(255, 255, 255, 0.35);

  /* ---------- Buttons (Figma: Buttons, tuned; see D-018) ---------- */
  --cy-btn-sm-h: 32px;  --cy-btn-sm-px: 12px;  --cy-btn-sm-fs: var(--cy-fs-sm);  --cy-btn-sm-r: var(--cy-radius-sm);
  --cy-btn-md-h: 40px;  --cy-btn-md-px: 16px;  --cy-btn-md-fs: var(--cy-fs-md);  --cy-btn-md-r: var(--cy-radius-md);
  --cy-btn-lg-h: 48px;  --cy-btn-lg-px: 20px;  --cy-btn-lg-fs: var(--cy-fs-lg);  --cy-btn-lg-r: var(--cy-radius-md);
  --cy-btn-xl-h: 56px;  --cy-btn-xl-px: 24px;  --cy-btn-xl-fs: var(--cy-fs-xl);  --cy-btn-xl-r: var(--cy-radius-md);

  /* ---------- Icons (Tabler, D-019) ---------- */
  --cy-icon-sm: 16px;
  --cy-icon-md: 20px;
  --cy-icon-lg: 24px;
  --cy-icon-xl: 32px;
  /* Tabler draws at 2px. 1.75 matches Inter's weight at 16-24px without looking thin. */
  --cy-icon-stroke: 1.75;

  /* Motion */
  --cy-ease: cubic-bezier(0.2, 0, 0, 1);
  --cy-duration: 150ms;
}

@media (max-width: 767.98px) {
  :root {
    --cy-h1-fs: var(--cy-fs-4xl); --cy-h1-lh: var(--cy-lh-4xl);
    --cy-h2-fs: var(--cy-fs-3xl); --cy-h2-lh: var(--cy-lh-3xl);
    --cy-h3-fs: var(--cy-fs-lg);  --cy-h3-lh: var(--cy-lh-lg);
    --cy-h4-fs: var(--cy-fs-lg);  --cy-h4-lh: var(--cy-lh-lg);
    --cy-hero-fs: var(--cy-fs-4xl); --cy-hero-lh: var(--cy-lh-4xl);
    --cy-section-y: var(--cy-space-12);
    --cy-gutter: var(--cy-space-4);
  }
}

/* Same-hue hover/pressed for the brand button where the browser supports color-mix (2023+). */
@supports (color: color-mix(in srgb, red, blue)) {
  :root {
    --cy-action-brand-hover: color-mix(in srgb, var(--cy-brand-600) 90%, #000);
    --cy-action-brand-pressed: color-mix(in srgb, var(--cy-brand-600) 80%, #000);
  }
}

/* ---------- Section rhythm (D-038) ----------
   One vertical rhythm for every content section on the site:
   --cy-section-y     padding above and below a section's content (so ~2x between two sections)
   --cy-section-head  gap between a section's heading block (divider + title + intro) and its content */
:root {
  --cy-section-y: 64px;
  --cy-section-head: 40px;
}
@media (max-width: 1199px) { :root { --cy-section-y: 56px; --cy-section-head: 36px; } }
@media (max-width: 767px)  { :root { --cy-section-y: 48px; --cy-section-head: 28px; } }