/* ============================================================
   ComplyAi · Brand Guide 2.0 · Webflow Custom Code Head
   ------------------------------------------------------------
   Paste this into:
     Webflow → Site Settings → Custom Code → Head Code
     (on the staging site "Copy of ComplyAi" first, then live)

   Purpose:
   - Provides the 2.0 tokens that Webflow's Variable type system
     can't hold natively: gradients, shadows, motion timings.
   - Adds spec-parity CSS aliases so `var(--space-1)` etc. work
     directly (Webflow Variables use the prefixed
     `--_complyai-tokens---space--1` form).
   - Opts into Inter WOFF2 for cross-platform Body typography
     consistency (per Decision 4b).

   Version: 2.0.0 · applied 2026-09-09
   ============================================================ */

:root {
  /* ---- Composite gradients ---------------------------------- */
  --gradient-heading:   linear-gradient(135deg, var(--_complyai-tokens---gradient--start), var(--_complyai-tokens---gradient--end));
  --gradient-em:        linear-gradient(90deg, #FF3B1E 0%, #E040FB 50%, #1E90FF 100%);

  /* ---- Shadows (low-shadow doctrine · dropdowns / tooltips / modals only) */
  --shadow-dropdown:    0 4px 16px rgba(13, 13, 13, 0.08);
  --shadow-modal:       0 8px 24px rgba(13, 13, 13, 0.12);
  --shadow-tooltip:     0 2px 8px rgba(13, 13, 13, 0.10);

  /* ---- Motion ---------------------------------------------- */
  --motion-fast:        120ms;
  --motion-base:        180ms;
  --motion-slow:        320ms;
  --ease-out:           cubic-bezier(0.2, 0.8, 0.4, 1);

  /* ---- Spec-parity aliases (bridge Webflow prefixed names → 2.0 spec names) */
  /* Brand */
  --brand-primary:      var(--_complyai-tokens---brand--primary);
  --brand-primary-08:   var(--_complyai-tokens---brand--primary-08);
  --brand-primary-15:   var(--_complyai-tokens---brand--primary-15);
  --brand-accent:       var(--_complyai-tokens---brand--accent);
  --brand-accent-10:    var(--_complyai-tokens---brand--accent-10);

  /* Gradient stops */
  --gradient-start:     var(--_complyai-tokens---gradient--start);
  --gradient-end:       var(--_complyai-tokens---gradient--end);

  /* Backgrounds (map surface tokens to 2.0 bg-* names · light default) */
  --bg-default:         var(--_complyai-tokens---surface--default);
  --bg-surface:         var(--_complyai-tokens---surface--card);
  --bg-sunken:          var(--_complyai-tokens---surface--sunken);
  --border-default:     var(--_complyai-tokens---border--default);

  /* Text */
  --text-primary:       var(--_complyai-tokens---text--primary);
  --text-secondary:     var(--_complyai-tokens---text--secondary);
  --text-tertiary:      var(--_complyai-tokens---text--tertiary);

  /* Status */
  --status-low:         var(--_complyai-tokens---status--low);
  --status-medium:      var(--_complyai-tokens---status--medium);
  --status-high:        var(--_complyai-tokens---status--high);

  /* Type · font families */
  --font-display:       var(--_complyai-tokens---font--display);
  --font-body:          var(--_complyai-tokens---font--body);
  --font-mono:          var(--_complyai-tokens---font--mono);

  /* Spacing (numeric-scale aliases for 2.0 spec parity) */
  --space-1: var(--_complyai-tokens---space--1);
  --space-2: var(--_complyai-tokens---space--2);
  --space-3: var(--_complyai-tokens---space--3);
  --space-4: var(--_complyai-tokens---space--4);
  --space-5: var(--_complyai-tokens---space--5);
  --space-6: var(--_complyai-tokens---space--6);
  --space-7: var(--_complyai-tokens---space--7);
  --space-8: var(--_complyai-tokens---space--8);

  /* Radii (usage-based aliases for 2.0 spec parity) */
  --radius-card:        var(--_complyai-tokens---radius--card);
  --radius-button:      var(--_complyai-tokens---radius--button);
  --radius-input:       var(--_complyai-tokens---radius--input);
  --radius-pill:        var(--_complyai-tokens---radius--pill);
  --radius-hairline:    var(--_complyai-tokens---radius--hairline);
}

/* ---- Dark scale opt-in (matches 2.0 spec [data-theme="dark"]) */
:root[data-theme="dark"] {
  --shadow-dropdown:    0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-modal:       0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-tooltip:     0 2px 8px rgba(0, 0, 0, 0.30);
}

/* ---- Inter WOFF2 (Decision 4b · cross-platform Body consistency) */
@font-face {
  font-family: "Inter";
  src: url("https://rsms.me/inter/font-files/Inter-Regular.woff2?v=3.19") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("https://rsms.me/inter/font-files/Inter-Medium.woff2?v=3.19") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("https://rsms.me/inter/font-files/Inter-SemiBold.woff2?v=3.19") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("https://rsms.me/inter/font-files/Inter-Bold.woff2?v=3.19") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* NOTE: `rsms.me/inter` is the canonical Inter CDN maintained by
   Rasmus Andersson (Inter's designer). If you want a self-hosted
   fallback for offline / policy reasons, upload the WOFF2s to
   Webflow Assets and swap the src URLs to the Webflow-hosted
   asset URLs. */