/* ═══════════════════════════════════════════════════════════════════════════
   AiRank Pro — Brand Design Tokens
   Version: 1.0 | Last updated: 2026-04-14

   USAGE: Import this file before airankpro.css. All components should
   reference these tokens for brand consistency across themes.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── PRIMARY — Hero purple, CTAs, active states ──────────────────────── */
  --brand-primary:       #7c3aed;
  --brand-primary-light: #a855f7;
  --brand-primary-dark:  #5b21b6;
  --brand-primary-hover: #6d28d9;
  --brand-primary-muted: rgba(124, 58, 237, .12);
  --brand-primary-subtle:rgba(124, 58, 237, .06);

  /* ── SECONDARY — Cyan accent for highlights ─────────────────────────── */
  --brand-secondary:       #14B583;
  --brand-secondary-light: #3AC79B;
  --brand-secondary-dark:  #0F8F66;
  --brand-secondary-muted: rgba(20,181,131, .12);

  /* ── SEMANTIC — Status & feedback ───────────────────────────────────── */
  --brand-success:       #10b981;
  --brand-success-light: #34d399;
  --brand-success-muted: rgba(16, 185, 129, .12);
  --brand-warning:       #f59e0b;
  --brand-warning-light: #fbbf24;
  --brand-warning-muted: rgba(245, 158, 11, .12);
  --brand-error:         #ef4444;
  --brand-error-light:   #f87171;
  --brand-error-muted:   rgba(239, 68, 68, .12);
  --brand-info:          #3b82f6;
  --brand-info-light:    #60a5fa;
  --brand-info-muted:    rgba(59, 130, 246, .12);

  /* ── ACCENT — Feature-specific colors ───────────────────────────────── */
  --brand-pink:    #ec4899;
  --brand-orange:  #f97316;
  --brand-teal:    #14b8a6;

  /* ── NEUTRAL SCALE — Text, backgrounds, borders ─────────────────────── */
  --neutral-50:  #f8fafc;
  --neutral-100: #f1f5f9;
  --neutral-200: #e2e8f0;
  --neutral-300: #cbd5e1;
  --neutral-400: #94a3b8;
  --neutral-500: #64748b;
  --neutral-600: #475569;
  --neutral-700: #334155;
  --neutral-800: #1e293b;
  --neutral-900: #0f172a;
  --neutral-950: #0a0a0f;

  /* ── TYPOGRAPHY ─────────────────────────────────────────────────────── */
  --font-display: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  --text-xs:   0.72rem;
  --text-sm:   0.82rem;
  --text-base: 0.9rem;
  --text-lg:   1.05rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.85rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    900;

  --leading-tight:   1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  /* ── SPACING ────────────────────────────────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* ── RADII ──────────────────────────────────────────────────────────── */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ── SHADOWS — Dark theme ───────────────────────────────────────────── */
  --shadow-xs:     0 1px 2px rgba(0,0,0,.2);
  --shadow-sm:     0 1px 8px rgba(0,0,0,.3);
  --shadow-md:     0 4px 20px rgba(0,0,0,.4);
  --shadow-lg:     0 8px 40px rgba(0,0,0,.5);
  --shadow-xl:     0 16px 60px rgba(0,0,0,.6);
  --shadow-purple: 0 4px 30px rgba(124,58,237,.25);
  --shadow-glow:   0 0 20px rgba(124,58,237,.15);

  /* ── MOTION ─────────────────────────────────────────────────────────── */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;

  /* ── GRADIENTS ──────────────────────────────────────────────────────── */
  --grad-purple:    linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
  --grad-cyan:      linear-gradient(135deg, #0F8F66 0%, #14B583 100%);
  --grad-green:     linear-gradient(135deg, #059669 0%, #10b981 100%);
  --grad-sunset:    linear-gradient(135deg, #f97316 0%, #ec4899 100%);
  --grad-brand:     linear-gradient(135deg, #7c3aed 0%, #14B583 100%);
}

/* ── LIGHT THEME SHADOW OVERRIDES ─────────────────────────────────────── */
[data-theme="light"] {
  --shadow-xs:     0 1px 2px rgba(0,0,0,.04);
  --shadow-sm:     0 1px 8px rgba(0,0,0,.06);
  --shadow-md:     0 4px 20px rgba(0,0,0,.08);
  --shadow-lg:     0 8px 40px rgba(0,0,0,.1);
  --shadow-xl:     0 16px 60px rgba(0,0,0,.12);
  --shadow-purple: 0 4px 30px rgba(124,58,237,.1);
  --shadow-glow:   0 0 20px rgba(124,58,237,.06);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BRAND RULES (for reference by developers & AI assistants)

   1. NEVER use hardcoded #000, #fff, black, or white for text/backgrounds.
      Always use CSS variables.

   2. Purple (#7c3aed) is the primary brand color. Use for:
      - CTAs, active states, primary buttons, focus rings, brand accents

   3. Cyan (#14B583) is secondary. Use for:
      - Links, secondary highlights, digital marketing features

   4. Green (#10b981) for success/positive states
      Amber (#f59e0b) for warnings
      Red (#ef4444) for errors/destructive actions

   5. All interactive elements need 4 states:
      default, hover, active/pressed, disabled

   6. Minimum contrast ratios:
      - Body text: 4.5:1 (WCAG AA)
      - Large text (>18px bold): 3:1
      - UI components: 3:1

   7. Dark theme = default. Light theme must be equally polished.
      Test BOTH themes for every change.

   8. Gradients: use --grad-purple for primary CTAs,
      --grad-brand for hero/marketing sections
   ═══════════════════════════════════════════════════════════════════════════ */