/* ==========================================================================
   SafeSwap design tokens — the single source of truth for every web surface.
   Mirrors ios/SafeSwap/DesignSystem/SafeSwapTheme.swift 1:1 (SSColor / SSSpacing
   / SSRadius): change a value in Theme.swift and change it here, nowhere else.
   This file paints NOTHING — it only defines --ss-* custom properties, so any
   page (landing, admin, driver, operator) can opt in safely.

   System architecture ported from the SBS sister brand's sbs-tokens.css.
   ========================================================================== */

:root {
  /* Brand accents (dark scheme is the default brand expression) */
  --ss-purple: #A78BFA;            /* text/tint accent — NOT a fill (contrast) */
  --ss-purple-fill: #6D28D9;       /* fills, CTAs — white text passes WCAG */
  --ss-purple-hover: #8B5CF6;
  --ss-purple-subtle: #2A2342;
  --ss-navy: #0F0E26;
  --ss-navy-muted: #1B1942;
  --ss-gold: #E3B341;
  --ss-gold-strong: #F5B301;

  /* Surfaces */
  --ss-canvas: #0B0A12;
  --ss-surface: #16151F;
  --ss-raised: #201E2C;
  --ss-sunken: #100F18;
  --ss-navbar: #0F0E26;

  /* Text */
  --ss-text: #F5F4FA;
  --ss-text-2: #B6B2C7;
  --ss-text-3: #8C8A9C;
  --ss-text-disabled: #5A5870;
  --ss-on-brand: #FFFFFF;

  /* Borders */
  --ss-line: #26242F;
  --ss-line-2: #2F2D3B;
  --ss-line-strong: #43404F;

  /* Semantic + Bg pairs */
  --ss-trust: #A78BFA;
  --ss-success: #3CCB7F;   --ss-success-bg: #13311F;
  --ss-warning: #F0A93B;   --ss-warning-bg: #3A2A0E;
  --ss-danger: #FF6B5E;    --ss-danger-bg: #3A1714;
  --ss-info: #5BA3E8;      --ss-info-bg: #0F2438;
  --ss-neutral: #8C8A9C;   --ss-neutral-bg: #211F2C;
  --ss-badge-red: #FF3B30; /* count pips, iOS-red, 2px canvas keyline */

  /* Brand gradient (hero fills, nav accents) */
  --ss-gradient: linear-gradient(135deg, #6D28D9, #0F0E26);
  --ss-gradient-bright: linear-gradient(135deg, #7C3AED, #312E81);

  /* Glass (web analogue of .ultraThinMaterial, recomputed from #0B0A12) */
  --ss-glass-bg: rgba(22, 21, 31, 0.55);
  --ss-glass-bg-strong: rgba(11, 10, 18, 0.72);
  --ss-glass-blur: 22px;
  --ss-hairline: rgba(255, 255, 255, 0.10);
  --ss-hairline-brand: rgba(167, 139, 250, 0.22);

  /* Shadows */
  --ss-shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.25);
  --ss-shadow-strong: 0 12px 32px rgba(0, 0, 0, 0.55);
  --ss-shadow-glow: 0 8px 22px rgba(109, 40, 217, 0.35);

  /* Chips / filter pills */
  --ss-chip-bg: #1B1926;
  --ss-chip-line: rgba(167, 139, 250, 0.15);
  --ss-chip-active-bg: #6D28D9;
  --ss-chip-active-text: #FFFFFF;

  /* Scrims */
  --ss-scrim: rgba(0, 0, 0, 0.55);

  /* Spacing (SSSpacing) */
  --ss-sp-xs: 4px; --ss-sp-sm: 8px; --ss-sp-md: 12px;
  --ss-sp-lg: 16px; --ss-sp-xl: 24px; --ss-sp-xxl: 32px;

  /* Radii (SSRadius) */
  --ss-r-sm: 8px; --ss-r-md: 12px; --ss-r-lg: 16px; --ss-r-pill: 999px;

  /* Type — Inter honors browser font-size prefs (web mirror of Dynamic Type).
     Display stays system-rounded to echo iOS SF Rounded. */
  --ss-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --ss-font-display: ui-rounded, 'SF Pro Rounded', var(--ss-font);
  --ss-fs-caption: 0.6875rem;  /* 11 */
  --ss-fs-footnote: 0.8125rem; /* 13 */
  --ss-fs-body: 1rem;          /* 16 */
  --ss-fs-headline: 1.125rem;  /* 18 */
  --ss-fs-title: 1.375rem;     /* 22 */
  --ss-fs-large: 1.75rem;      /* 28 */
  --ss-fs-hero: clamp(1.75rem, 1.30rem + 2.2vw, 2.6rem);

  /* Motion (brand-neutral spring pack) */
  --ss-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ss-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ss-ease-snappy: cubic-bezier(0.40, 0, 0.20, 1);
  --ss-dur-fast: 180ms; --ss-dur-base: 280ms; --ss-dur-slow: 380ms;

  /* Focus */
  --ss-focus-ring: 0 0 0 2px var(--ss-canvas), 0 0 0 4px var(--ss-purple);

  color-scheme: dark;
}

/* Light scheme — mirrors the light() side of every dyn() pair in Theme.swift. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ss-purple: #6D28D9;
    --ss-purple-fill: #6D28D9;
    --ss-purple-hover: #5B21B6;
    --ss-purple-subtle: #F3EEFE;
    --ss-navy: #1E1B4B;
    --ss-navy-muted: #312E81;
    --ss-gold: #B8860B;
    --ss-gold-strong: #D99A06;

    --ss-canvas: #F7F7FB;
    --ss-surface: #FFFFFF;
    --ss-raised: #FFFFFF;
    --ss-sunken: #EFEFF5;
    --ss-navbar: #1E1B4B;

    --ss-text: #15131F;
    --ss-text-2: #4A4760;
    --ss-text-3: #6E6B82;
    --ss-text-disabled: #A9A6B8;

    --ss-line: #EDECF3;
    --ss-line-2: #E0DEEA;
    --ss-line-strong: #C7C4D6;

    --ss-trust: #6D28D9;
    --ss-success: #1F8A4C;  --ss-success-bg: #E4F6EC;
    --ss-warning: #B26A00;  --ss-warning-bg: #FBEFD9;
    --ss-danger: #C0392B;   --ss-danger-bg: #FBE7E4;
    --ss-info: #2563A8;     --ss-info-bg: #E4EEF8;
    --ss-neutral: #6E6B82;  --ss-neutral-bg: #EFEFF5;

    --ss-gradient: linear-gradient(135deg, #6D28D9, #1E1B4B);
    --ss-gradient-bright: linear-gradient(135deg, #6D28D9, #312E81);

    --ss-glass-bg: rgba(255, 255, 255, 0.60);
    --ss-glass-bg-strong: rgba(247, 247, 251, 0.78);
    --ss-hairline: rgba(0, 0, 0, 0.08);
    --ss-hairline-brand: rgba(109, 40, 217, 0.22);

    --ss-shadow-soft: 0 4px 12px rgba(30, 27, 75, 0.10);
    --ss-shadow-strong: 0 12px 32px rgba(30, 27, 75, 0.18);

    --ss-chip-bg: #EFEFF5;
    --ss-chip-line: rgba(109, 40, 217, 0.15);

    color-scheme: light;
  }
}

/* ==========================================================================
   Micro-utilities driven by the tokens (opt-in classes, no element selectors
   except the a11y/motion gates below).
   ========================================================================== */

.ss-glass {
  background: var(--ss-glass-bg);
  -webkit-backdrop-filter: blur(var(--ss-glass-blur)) saturate(180%);
  backdrop-filter: blur(var(--ss-glass-blur)) saturate(180%);
  border: 1px solid var(--ss-hairline);
}

.ss-tactile { transition: transform var(--ss-dur-fast) var(--ss-ease-spring); }
.ss-tactile:active { transform: scale(0.96); }

.ss-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Focus: never a default outline, always a visible ring for keyboards. */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--ss-purple); outline-offset: 2px; }

::selection { background: rgba(167, 139, 250, 0.30); }

/* Reduced-motion gate — zero every animation for users who ask, plus a
   .no-motion class hook for an in-app toggle. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
.no-motion *, .no-motion *::before, .no-motion *::after {
  animation-duration: 0.01ms !important;
  transition-duration: 0.01ms !important;
}