/* =========================================================
   Code Amani Design Tokens – iOS 26 Liquid Glass
   Shared across: Main site, QR suite, Apex Waiver
   ========================================================= */

:root {
  /* 1. Color System – Neutrals */
  --ca-color-bg-base: #020617;         /* App background */
  --ca-color-bg-elevated: #020617;     /* Behind glass */
  --ca-color-fg-main: #e5e7eb;
  --ca-color-fg-muted: #9ca3af;
  --ca-color-border-soft: rgba(148, 163, 184, 0.45);

  /* 2. Brand Accents (primary = Code Amani core) */
  --ca-color-accent-primary: #a855f7;       /* Code Amani core tint */
  --ca-color-accent-primary-soft: rgba(168, 85, 247, 0.35);

  /* Optional secondary accent (used sparingly) */
  --ca-color-accent-secondary: #4f46e5;
  --ca-color-accent-secondary-soft: rgba(79, 70, 229, 0.45);

  /* Status colors */
  --ca-color-success: #22c55e;
  --ca-color-warning: #eab308;
  --ca-color-danger: #f97316;

  /* 3. Gradients (Liquid background + accent rays) */
  --ca-gradient-bg-liquid:
    radial-gradient(circle at top, #4f46e5 0%, #0f172a 35%, #020617 100%);
  --ca-gradient-blob-blue: radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.16), transparent 55%);
  --ca-gradient-blob-teal: radial-gradient(circle at 10% 20%, rgba(45, 212, 191, 0.14), transparent 50%);
  --ca-gradient-blob-purple: radial-gradient(circle at 80% 0%, rgba(168, 85, 247, 0.18), transparent 55%);

  /* 4. Glass Surfaces */
  --ca-glass-bg-default: rgba(15, 23, 42, 0.62);   /* main card */
  --ca-glass-bg-soft: rgba(15, 23, 42, 0.5);       /* softer panels */
  --ca-glass-bg-strong: rgba(15, 23, 42, 0.78);    /* nav / toolbars */
  --ca-glass-border: rgba(148, 163, 184, 0.55);
  --ca-glass-highlight: rgba(255, 255, 255, 0.12);

  --ca-blur-sm: 10px;
  --ca-blur-md: 18px;
  --ca-blur-lg: 24px;

  /* 5. Radius – soft, rounded, liquid */
  --ca-radius-md: 16px;
  --ca-radius-lg: 24px;
  --ca-radius-xl: 30px;
  --ca-radius-pill: 999px;

  /* 6. Elevation / Shadows (soft, not harsh) */
  --ca-shadow-soft: 0 16px 40px rgba(15, 23, 42, 0.65);
  --ca-shadow-nav: 0 18px 45px rgba(15, 23, 42, 0.9);
  --ca-shadow-press: 0 8px 22px rgba(15, 23, 42, 0.75);

  /* 7. Motion / Transitions */
  --ca-motion-fast: 120ms;
  --ca-motion-normal: 200ms;
  --ca-motion-slow: 280ms;

  --ca-ease-standard: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ca-ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ca-ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* 8. Layout */
  --ca-layout-max-width: 1120px;
  --ca-layout-gutter: 1.25rem;

  /* 9. Typography */
  --ca-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI", sans-serif;
  --ca-font-size-base: 16px;
  --ca-font-size-body: 0.95rem;
  --ca-font-size-label: 0.78rem;
  --ca-font-size-h1: 2.4rem;
  --ca-font-size-h2: 1.5rem;
  --ca-font-size-h3: 1.1rem;
}

/* Brand overrides – example: QR suite */
[data-brand="qr-suite"] {
  --ca-color-accent-primary: #22c55e;
  --ca-color-accent-primary-soft: rgba(34, 197, 94, 0.3);
}

/* Brand overrides – example: Apex Waiver */
[data-brand="apex-waiver"] {
  --ca-color-accent-primary: #f97316;
  --ca-color-accent-primary-soft: rgba(249, 115, 22, 0.35);
}