/* =========================================================================
   PulseCore Risk v2 — design tokens
   The ONLY file in the v2 theme that may contain literal colour, size, shadow
   or timing values. Every component in theme.css consumes these.

   Direction: "summit". A deep petrol night palette, one electric cyan accent,
   a bold geometric sans (self-hosted Outfit), square-cornered actions and an
   angled double-chevron motif taken from the PulseCore mark.

   CONTRAST RULES (WCAG AA). Cyan is a very light colour, so:
   - text ON a cyan fill uses --v2-on-accent, never white;
   - cyan text is for DARK surfaces only; on light surfaces use
     --v2-accent-text, which holds 4.5:1 on white, #f5f7f7 and #cdeff7;
   - focus rings use --v2-focus (ink) on light, --v2-focus-on-dark (cyan) on dark.
   ========================================================================= */

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../../fonts/v2/outfit-latin-var.woff2') format('woff2');
}

:root {

  /* Ink / petrol foundation */
  --v2-ink-900: #061f24;
  --v2-ink-850: #0a2a30;
  --v2-ink-800: #0c3e46;
  --v2-ink-700: #115059;
  --v2-ink-600: #17636d;
  --v2-ink-500: #1f7a85;

  /* Neutrals / surfaces */
  --v2-white:      #ffffff;
  --v2-surface:    #ffffff;
  --v2-surface-2:  #f5f7f7;
  --v2-surface-3:  #e9efef;
  --v2-surface-4:  #dbe5e6;
  --v2-surface-cyan: #cdeff7;

  /* Lines */
  --v2-line:            #d9e3e4;
  --v2-line-strong:     #b4c6c9;
  --v2-line-on-dark:    rgba(255, 255, 255, 0.14);
  --v2-line-on-dark-2:  rgba(255, 255, 255, 0.32);

  /* Text */
  --v2-text:              #061f24;
  --v2-text-muted:        #3f5a60;
  --v2-text-faint:        #557076;
  --v2-text-invert:       #ffffff;
  --v2-text-invert-muted: #b4cdd1;
  --v2-text-invert-faint: #93b0b5;

  /* Action — electric cyan */
  --v2-accent:        #13e0e0;
  --v2-accent-hover:  #4aeaea;
  --v2-accent-active: #0fc4c4;
  --v2-accent-soft:   rgba(19, 224, 224, 0.14);
  --v2-accent-line:   rgba(19, 224, 224, 0.5);
  --v2-on-accent:     #061f24;
  --v2-accent-text:   #0a7279;

  /* Signal — teal for ticks, markers and data detail */
  --v2-signal:       #16d6d6;
  --v2-signal-text:  #0a7279;
  --v2-signal-soft:  rgba(22, 214, 214, 0.14);
  --v2-signal-line:  rgba(22, 214, 214, 0.45);

  /* Status */
  --v2-positive:      #0a7a5a;
  --v2-positive-soft: rgba(10, 122, 90, 0.10);
  --v2-danger:        #b42318;
  --v2-danger-soft:   rgba(180, 35, 24, 0.08);

  /* Tints — translucent white washes used on the ink surfaces */
  --v2-tint-1: rgba(255, 255, 255, 0.03);
  --v2-tint-2: rgba(255, 255, 255, 0.04);
  --v2-tint-3: rgba(255, 255, 255, 0.07);
  --v2-tint-4: rgba(255, 255, 255, 0.08);
  --v2-tint-5: rgba(255, 255, 255, 0.10);

  /* Gradients */
  --v2-grad-panel:  linear-gradient(135deg, #0c3e46 0%, #0a2a30 55%, #061f24 100%);
  --v2-grad-night:  linear-gradient(135deg, #061f24 0%, #0a2a30 50%, #0c3e46 100%);
  --v2-grad-footer: linear-gradient(135deg, #0c3e46 0%, #0a2a30 45%, #061f24 100%);
  --v2-grad-pale:   linear-gradient(180deg, #cdeff7 0%, #f5f7f7 100%);
  --v2-grad-header: linear-gradient(180deg, rgba(6, 31, 36, 0.78) 0%, rgba(6, 31, 36, 0) 100%);

  /* Overlays. The hero stays at 0.70 or darker so white and cyan text hold
     contrast even over a bright photo. */
  --v2-overlay-hero:   linear-gradient(180deg, rgba(6, 31, 36, 0.80) 0%, rgba(6, 31, 36, 0.70) 45%, rgba(6, 31, 36, 0.94) 100%);
  --v2-overlay-band:   linear-gradient(90deg, rgba(6, 31, 36, 0.96) 0%, rgba(6, 31, 36, 0.88) 55%, rgba(12, 62, 70, 0.78) 100%);
  --v2-overlay-tile:   linear-gradient(180deg, rgba(6, 31, 36, 0) 30%, rgba(6, 31, 36, 0.92) 100%);
  --v2-overlay-flat:   rgba(6, 31, 36, 0.90);
  --v2-hairline-grad:  linear-gradient(90deg, rgba(19, 224, 224, 0.95) 0%, rgba(19, 224, 224, 0) 100%);

  /* Signature geometry */
  --v2-shape-cyan:   linear-gradient(135deg, rgba(19, 224, 224, 0.38) 0%, rgba(19, 224, 224, 0) 80%);
  --v2-shape-petrol: linear-gradient(135deg, rgba(12, 62, 70, 0.82) 0%, rgba(23, 99, 109, 0.42) 100%);
  --v2-shape-light:  linear-gradient(135deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.04) 100%);
  --v2-stripe:       linear-gradient(135deg, rgba(19, 224, 224, 0) 74%, #13e0e0 74%, #13e0e0 84%, rgba(19, 224, 224, 0) 84%);
  --v2-motif-opacity: 0.08;
  --v2-cut:          3.5rem;

  /* The north-east arrow inside the primary button badge */
  --v2-icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2313e0e0' stroke-width='1.6' stroke-linecap='square'%3E%3Cpath d='M3 9l6-6M4 3h5v5'/%3E%3C/svg%3E");

  /* Focus ring */
  --v2-focus:         #061f24;
  --v2-focus-on-dark: #13e0e0;
  --v2-focus-width:   3px;
  --v2-focus-offset:  2px;

  /* Typography: one self-hosted family for display and body. */
  --v2-font-sans:    'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --v2-font-display: var(--v2-font-sans);

  --v2-fs-2xs:     0.75rem;
  --v2-fs-xs:      0.8125rem;
  --v2-fs-sm:      0.875rem;
  --v2-fs-base:    1rem;
  --v2-fs-md:      1.0625rem;
  --v2-fs-lg:      1.1875rem;
  --v2-fs-xl:      clamp(1.25rem, 1rem + 0.8vw, 1.5rem);
  --v2-fs-2xl:     clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --v2-fs-3xl:     clamp(1.75rem, 1.35rem + 1.8vw, 2.5rem);
  --v2-fs-4xl:     clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --v2-fs-display: clamp(2.1rem, 6vw, 4.6rem);
  --v2-fs-numeric: clamp(2.5rem, 1.7rem + 3vw, 4rem);

  --v2-lh-tight:   1.08;
  --v2-lh-snug:    1.25;
  --v2-lh-normal:  1.5;
  --v2-lh-relaxed: 1.65;

  --v2-fw-light:     300;
  --v2-fw-regular:   400;
  --v2-fw-medium:    500;
  --v2-fw-semibold:  600;
  --v2-fw-bold:      700;
  --v2-fw-extrabold: 800;

  --v2-ls-tight:  -0.02em;
  --v2-ls-normal: 0;
  --v2-ls-wide:   0.04em;
  --v2-ls-caps:   0.14em;

  /* Spacing — 4px base step */
  --v2-sp-0:  0;
  --v2-sp-1:  0.25rem;
  --v2-sp-2:  0.5rem;
  --v2-sp-3:  0.75rem;
  --v2-sp-4:  1rem;
  --v2-sp-5:  1.25rem;
  --v2-sp-6:  1.5rem;
  --v2-sp-7:  2rem;
  --v2-sp-8:  2.5rem;
  --v2-sp-9:  3rem;
  --v2-sp-10: 4rem;
  --v2-sp-11: 5rem;
  --v2-sp-12: 6rem;

  /* Vertical rhythm: about 96–128px on a desktop */
  --v2-section-y:       clamp(4rem, 2rem + 6.6vw, 8rem);
  --v2-section-y-tight: clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem);

  /* Layout */
  --v2-container:        1290px;
  --v2-container-narrow: 760px;
  --v2-gutter:           clamp(1rem, 0.55rem + 2vw, 2rem);
  --v2-grid-gap:         clamp(1rem, 0.7rem + 1.2vw, 1.75rem);

  /* Nav geometry */
  --v2-header-h:       88px;
  --v2-tap:            44px;
  --v2-btn-h:          52px;
  --v2-badge:          28px;
  --v2-logo-h:         48px;
  --v2-logo-h-mobile:  38px;

  /* Radii: actions are square, cards and plates are gently rounded */
  --v2-r-xs:   2px;
  --v2-r-sm:   0;
  --v2-r-md:   6px;
  --v2-r-lg:   10px;
  --v2-r-xl:   14px;
  --v2-r-pill: 999px;

  /* Elevation */
  --v2-sh-0: none;
  --v2-sh-1: 0 1px 2px rgba(6, 31, 36, 0.06), 0 1px 1px rgba(6, 31, 36, 0.04);
  --v2-sh-2: 0 2px 6px rgba(6, 31, 36, 0.08), 0 6px 18px rgba(6, 31, 36, 0.07);
  --v2-sh-3: 0 12px 32px rgba(6, 31, 36, 0.22), 0 2px 8px rgba(6, 31, 36, 0.10);
  --v2-sh-header: 0 1px 0 rgba(255, 255, 255, 0.06), 0 6px 24px rgba(6, 31, 36, 0.35);

  /* Motion */
  --v2-dur-1: 120ms;
  --v2-dur-2: 200ms;
  --v2-dur-3: 320ms;
  --v2-marquee-dur: 60s;
  --v2-lift: -6px;
  --v2-ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --v2-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Stacking */
  --v2-z-base:      1;
  --v2-z-sticky:    100;
  --v2-z-header:    200;
  --v2-z-drawer:    300;
  --v2-z-dialog:    400;
  --v2-z-skiplink:  500;

  /* Aspect ratios used to reserve space and avoid layout shift */
  --v2-ar-speaker: 1 / 1;
  --v2-ar-media:   16 / 9;
  --v2-ar-card:    3 / 2;
  --v2-ar-tile:    4 / 5;
}

/* Motion tokens collapse when the visitor asks for reduced motion, so every
   component that consumes them becomes still without needing its own rule. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --v2-dur-1: 0.01ms;
    --v2-dur-2: 0.01ms;
    --v2-dur-3: 0.01ms;
    --v2-lift: 0;
  }
}