/* ══════════════════════════════════════════════════════════════════════════════
   Design Tokens — Delist.ai
   Canonical source: index.html
   All values extracted from the index.html design language.
   Import this file in every page: <link rel="stylesheet" href="/design-tokens.css">
   Then replace hardcoded values in each page's <style> with var() references.
   ══════════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Backgrounds ───────────────────────────────────────────────────────────
     Layered dark surfaces, darkest to lightest.
     bg → bg-raised → surface → surface-2                                    */
  --bg:         #09090f;   /* Page background, deepest layer                 */
  --bg-raised:  #0e0e18;   /* Raised sections (how-it-works, FAQ, vs-grid)   */
  --surface:    #13131c;   /* Cards, panels, input backgrounds               */
  --surface-2:  #1a1a26;   /* Secondary surfaces, nested cards               */

  /* ── Borders ───────────────────────────────────────────────────────────────
     Opacity-based so they work on any background layer.                      */
  --border:     rgba(255,255,255,0.07);  /* Default subtle border            */
  --border-2:   rgba(255,255,255,0.13);  /* Emphasized border, hover states  */

  /* ── Brand / accent ────────────────────────────────────────────────────────
     Indigo for interactive elements, links, focus rings.                     */
  --primary:       #6366f1;  /* Buttons, links, active states                */
  --primary-light: #818cf8;  /* Hover states, lighter accent                 */

  /* ── Semantic colors ───────────────────────────────────────────────────────
     Success, error, warning — used across all pages for status and feedback. */
  --green:       #22c55e;  /* Success, CTA buttons, confirmed states         */
  --green-light: #4ade80;  /* Hover on green buttons, lighter success        */
  --red:         #ef4444;  /* Error, high-risk, alert badges                 */
  --red-light:   #f87171;  /* Lighter error/warning accent                   */
  --amber:       #f59e0b;  /* Warning, caution, medium-risk                  */
  --orange:      #f97316;  /* Stalking category, secondary warning           */
  --yellow:      #eab308;  /* Harassment category, tertiary warning          */

  /* ── Extended palette ──────────────────────────────────────────────────────
     Category and decorative colors used in specific components.              */
  --purple:  #a855f7;  /* Impersonation category                             */
  --blue:    #3b82f6;  /* Account hacking category, informational            */
  --teal:    #14b8a6;  /* Financial fraud category                           */
  --pink:    #ec4899;  /* Reputation damage category                         */
  --cyan:    #06b6d4;  /* Informational accents                              */

  /* ── Text ──────────────────────────────────────────────────────────────────
     Four tiers from brightest to dimmest.                                    */
  --text:    #f1f5f9;  /* Primary text, headings                             */
  --text-2:  #94a3b8;  /* Secondary text, descriptions, muted labels         */
  --text-3:  #475569;  /* Tertiary text, placeholders, disabled              */
  --text-4:  #334155;  /* Quaternary text, faintest (dividers, watermarks)    */

  /* ── Special text ──────────────────────────────────────────────────────────*/
  --text-on-green: #071a0c;  /* Text on green CTA buttons (dark on bright)   */

  /* ── Border radius ─────────────────────────────────────────────────────────
     Two sizes cover all components.                                          */
  --r:     12px;  /* Standard — buttons, inputs, small cards, badges         */
  --r-lg:  18px;  /* Large — hero cards, section cards, modals               */

  /* ── Layout ────────────────────────────────────────────────────────────────*/
  --max: 1080px;  /* Max content width for centered layouts                  */

  /* ── Typography ────────────────────────────────────────────────────────────
     System font stack — no web fonts, fast first paint.                      */
  --font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* ── Transitions ───────────────────────────────────────────────────────────
     Standardized durations for consistency.                                  */
  --transition-fast:   0.1s;   /* Micro-interactions (transform, scale)      */
  --transition-normal: 0.15s;  /* Standard hover (color, bg, border)         */
  --transition-slow:   0.25s;  /* Larger reveals (accordion, card lift)       */
}