/* src/styles/tokens.css */
/*
 * FLOXAR MARKETING SITE — DESIGN TOKENS
 *
 * Single source of truth for the marketing site's visual system.
 * Naming mirrors floxar-flow-ui semantic tokens where the meaning matches,
 * with marketing-specific additions (decorative orbs, glassmorphism surfaces).
 *
 * Inspired by the flow-ui 3-tier token architecture but expressed as CSS
 * custom properties for use in static HTML pages.
 *
 * Loaded via <link rel="stylesheet" href="/styles/tokens.css"> from each page.
 */

:root {
  /* ============================================================
   * BRAND COLORS
   * Shared with floxar-flow-ui: brand-primary === flow-ui brandPrimary.
   * ============================================================ */
  --brand-primary: #00BDFF;
  --brand-primary-hover: #00A3E0;
  --brand-primary-active: #0090C0;
  --brand-accent-green: #00D4AA;

  /* Brand alpha variants (translucent overlays — used for hover states,
   * focus rings, soft backgrounds, glow shadows). */
  --brand-alpha-05: rgba(0, 189, 255, 0.05);
  --brand-alpha-10: rgba(0, 189, 255, 0.10);
  --brand-alpha-15: rgba(0, 189, 255, 0.15);
  --brand-alpha-20: rgba(0, 189, 255, 0.20);
  --brand-alpha-30: rgba(0, 189, 255, 0.30);
  --brand-alpha-35: rgba(0, 189, 255, 0.35);
  --brand-alpha-40: rgba(0, 189, 255, 0.40);
  --brand-alpha-50: rgba(0, 189, 255, 0.50);

  /* ============================================================
   * DECORATIVE PALETTE
   * Used by floating orbs, hero gradients, and decorative accents.
   * Marketing-only — not part of the app design system.
   * ============================================================ */
  --orb-coral: #FF6B6B;
  --orb-yellow: #FFE66D;
  --orb-purple: #A855F7;
  --orb-indigo: #6366F1;
  --orb-indigo-light: #818cf8;
  --orb-indigo-soft: #a5b4fc;
  --orb-indigo-pale: #c7d2fe;

  /* Indigo alphas (for orb gradients/shadows on info-styled pages) */
  --indigo-alpha-15: rgba(99, 102, 241, 0.15);
  --indigo-alpha-20: rgba(99, 102, 241, 0.20);
  --indigo-alpha-40: rgba(99, 102, 241, 0.40);

  /* ============================================================
   * STATUS COLORS
   * For error, warning, and informational pages (403/404/500/maintenance).
   * ============================================================ */
  --status-error: #ef4444;
  --status-error-strong: #f87171;
  --status-error-soft: #fca5a5;
  --status-error-pale: #fecaca;
  --status-error-bg: #fee2e2;
  --status-error-bg-soft: #fef2f2;
  --status-error-alpha-15: rgba(239, 68, 68, 0.15);
  --status-error-alpha-20: rgba(239, 68, 68, 0.20);
  --status-error-alpha-30: rgba(239, 68, 68, 0.30);
  --status-error-alpha-40: rgba(239, 68, 68, 0.40);

  --status-warning: #f59e0b;
  --status-warning-strong: #fbbf24;
  --status-warning-soft: #fcd34d;
  --status-warning-pale: #fde68a;
  --status-warning-bg: #fef3c7;
  --status-warning-bg-soft: #fef9c3;
  --status-warning-bg-pale: #fff7ed;
  --status-warning-bg-faint: #fffbf5;
  --status-warning-alpha-20: rgba(251, 191, 36, 0.20);
  --status-warning-alpha-30: rgba(251, 191, 36, 0.30);
  --status-warning-alpha-40: rgba(251, 191, 36, 0.40);
  --status-warning-alpha-60: rgba(251, 191, 36, 0.60);

  --status-info: #6366F1;
  --status-info-bg: #ede9fe;
  --status-info-bg-soft: #f5f3ff;
  --status-info-bg-pale: #e0e7ff;
  --status-info-bg-faint: #dbeafe;

  /* ============================================================
   * TEXT COLORS
   * ============================================================ */
  --text-primary: #1c1c1c;
  --text-secondary: #333;
  --text-secondary-strong: #444;
  --text-secondary-soft: #555;
  --text-tertiary: #666;
  --text-tertiary-soft: #6b7280;
  --text-muted: #888;
  --text-muted-soft: #999;
  --text-muted-strong: #9ca3af;
  --text-disabled: #ccc;
  --text-on-brand: #ffffff;
  --text-link: var(--brand-primary);

  /* Slate/zinc/stone neutrals (used in error pages) */
  --text-slate-strong: #64748b;
  --text-slate: #94a3b8;
  --text-stone: #78716c;
  --text-zinc: #71717a;
  --text-zinc-soft: #a1a1aa;
  --text-stone-soft: #a8a29e;

  /* ============================================================
   * BACKGROUNDS & SURFACES
   * ============================================================ */
  --bg-primary: #ffffff;
  --bg-page-gradient-start: #f8f9ff;
  --bg-page-gradient-mid-1: #f0f4ff;
  --bg-page-gradient-mid-2: #fff5f5;
  --bg-page-gradient-mid-3: #f0fff4;
  --bg-cookie-banner: rgba(28, 28, 28, 0.95);

  /* Slate/cool neutrals for error page surfaces */
  --bg-slate-soft: #f1f5f9;
  --bg-slate-pale: #cbd5e1;
  --bg-slate-light: #e2e8f0;
  --bg-gray-soft: #e5e7eb;
  --bg-gray-light: #e5e5e5;

  /* Glassmorphism surfaces (used for cards, panels, login boxes) */
  --surface-glass-30: rgba(255, 255, 255, 0.30);
  --surface-glass-60: rgba(255, 255, 255, 0.60);
  --surface-glass-70: rgba(255, 255, 255, 0.70);
  --surface-glass-80: rgba(255, 255, 255, 0.80);
  --surface-glass-85: rgba(255, 255, 255, 0.85);
  --surface-glass-95: rgba(255, 255, 255, 0.95);
  --surface-solid: rgba(255, 255, 255, 1);

  /* Black overlays (used for shadows/dividers) */
  --overlay-black-05: rgba(0, 0, 0, 0.05);
  --overlay-black-06: rgba(0, 0, 0, 0.06);
  --overlay-black-08: rgba(0, 0, 0, 0.08);
  --overlay-black-10: rgba(0, 0, 0, 0.10);

  /* ============================================================
   * TYPOGRAPHY
   * ============================================================ */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --font-size-xs: 0.75rem;       /* 12px */
  --font-size-sm: 0.85rem;       /* 13.6px */
  --font-size-base: 1rem;        /* 16px — body */
  --font-size-md: 1.05rem;       /* 16.8px — CTA */
  --font-size-lg: 1.1rem;        /* 17.6px */
  --font-size-xl: 1.2rem;        /* 19.2px */
  --font-size-2xl: 1.5rem;       /* 24px */
  --font-size-3xl: 1.75rem;      /* 28px */
  --font-size-headline: clamp(1.75rem, 4vw, 2.5rem); /* responsive headline */

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

  --line-height-tight: 1.35;
  --line-height-snug: 1.4;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;

  /* ============================================================
   * SPACING (4px scale)
   * ============================================================ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-15: 60px;

  /* Section spacing (page-level) */
  --section-sm: 24px;
  --section-md: 40px;
  --section-lg: 60px;

  /* ============================================================
   * BORDER RADIUS
   * ============================================================ */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 50%;

  /* ============================================================
   * SHADOWS
   * Brand-tinted shadows are a marketing-site signature (CTA glow).
   * ============================================================ */
  --shadow-card: 0 4px 24px var(--overlay-black-06);
  --shadow-panel: 0 8px 32px var(--overlay-black-08);
  --shadow-cta: 0 4px 20px var(--brand-alpha-40);
  --shadow-cta-hover: 0 8px 35px var(--brand-alpha-50);
  --shadow-step-hover: 0 10px 30px var(--brand-alpha-20);
  --shadow-step-active: 0 10px 40px var(--brand-alpha-35);
  --shadow-button-hover: 0 4px 15px var(--overlay-black-10);

  /* ============================================================
   * GRADIENTS
   * ============================================================ */
  --gradient-brand: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-hover) 100%);
  --gradient-brand-hover: linear-gradient(135deg, var(--brand-primary-hover) 0%, var(--brand-primary-active) 100%);
  --gradient-page: linear-gradient(135deg,
    var(--bg-page-gradient-start) 0%,
    var(--bg-page-gradient-mid-1) 25%,
    var(--bg-page-gradient-mid-2) 50%,
    var(--bg-page-gradient-mid-3) 75%,
    var(--bg-page-gradient-start) 100%);

  /* ============================================================
   * TRANSITIONS
   * ============================================================ */
  --transition-fast: 0.2s ease;
  --transition-default: 0.3s ease;

  /* ============================================================
   * Z-INDEX
   * ============================================================ */
  --z-orb: -1;
  --z-bg: -2;
  --z-cookie-banner: 1000;
}