/* ============================================================
   EasyExOps — Design Tokens
   Visual language ported from EasyExOps PRO (XchangeOps)
   ============================================================ */

:root {
  /* Surfaces */
  --bg-base: #0F0A1E;
  --bg-page: #0F0A1E;                /* alias of --bg-base — used in page-local <style> blocks */
  --bg-card: #1A103C;
  --bg-card-hover: #1E1245;
  --bg-elevated: rgba(255, 255, 255, 0.04);
  --bg-translucent: rgba(15, 10, 30, 0.6);
  --bg-translucent-strong: rgba(15, 10, 30, 0.85);
  --bg-header:        rgba(15, 10, 30, 0.78);
  --bg-footer:        rgba(15, 10, 30, 0.7);
  --bg-menu-overlay:  rgba(15, 10, 30, 0.96);

  /* Accent (violet → magenta gradient) */
  --accent: #8B5CF6;
  --accent-violet: #8B5CF6;          /* alias of --accent — used widely in page-local <style> blocks */
  --accent-light: #A78BFA;
  --accent-magenta: #EC4899;
  --grad-primary: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
  --grad-soft: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(236, 72, 153, 0.25));

  /* Borders */
  --border-default: rgba(139, 92, 246, 0.18);
  --border-glow: rgba(139, 92, 246, 0.4);
  --border-faint: rgba(255, 255, 255, 0.06);

  /* Text */
  --text-primary: #FFFFFF;
  --text-strong:  #FFFFFF;           /* alias of --text-primary — used in page-local <style> blocks */
  --text-muted: rgba(255, 255, 255, 0.55);
  --text-faint: rgba(255, 255, 255, 0.32);

  /* Semantic colors */
  --green: #34D399;
  --blue: #38BDF8;
  --amber: #FBBF24;
  --red: #F87171;
  --pink: #F472B6;
  --gold: #FCD34D;

  /* Shadows */
  --shadow-glow: 0 8px 28px rgba(139, 92, 246, 0.35);
  --shadow-glow-strong: 0 12px 40px rgba(139, 92, 246, 0.45);
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.2);

  /* Typography */
  --font-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale — fluid via clamp().
     Mapped to existing utility classes in cd-app.css:
       --text-hero    → .h-display (hero H1)
       --text-section → .h-section (section H2)
       --text-card    → .h-card    (card H3 / feature title)
       --text-body-lg → .hero__subtitle, large body paragraphs */
  --text-hero:     clamp(30px, 4.6vw, 76px);
  --text-section:  clamp(24px, 3vw, 48px);
  --text-card:     clamp(16px, 2vw, 20px);
  --text-body-lg:  clamp(15px, 1.4vw, 19px);
  --text-body:     15px;
  --text-sm:       13px;
  --text-xs:       12px;
  --text-eyebrow:  10px;

  /* Radii */
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-card: 16px;
  --r-card-lg: 20px;
  --r-pill: 999px;

  /* Layout — container grows on wider screens via media queries in cd-app.css */
  --container-max: 1320px;
  --container-wide: 1500px;
  --container-pad: 16px;
  --header-h: 72px;
  --header-h-shrink: 56px;
  --gap-xs: 8px;
  --gap-sm: 12px;
  --gap: 20px;
  --gap-lg: 32px;
  --gap-xl: 48px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.9, 0.2, 1);
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 400ms;

  /* Motion — semantic aliases (preferred for new code).
     Old --t-* names are kept for backward compatibility with cd-app.css. */
  --duration-fast:    120ms;
  --duration-normal:  200ms;
  --duration-slow:    400ms;
  --duration-reveal:  420ms;  /* review-card lift choreography */
  --duration-fade:    220ms;  /* review-card opacity fade-in */
  --ease-out-expo:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart:   cubic-bezier(0.16, 0.84, 0.4, 1); /* review-card */

  /* z-index */
  --z-header: 100;
  --z-menu: 200;
  --z-dropdown: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* Light scrollbar */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(139, 92, 246, 0.22); border-radius: 6px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(139, 92, 246, 0.4); }

/* Reset spinners on number inputs */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] { -moz-appearance: textfield; }