/* ==========================================================================
   Botino 2.0 - Design Tokens
   Single source of truth for colour, type, spacing, radius, shadow, motion.
   WordPress note: expose these as theme.json settings / CSS custom props.
   ========================================================================== */

:root {
  /* ---- Brand colour ---------------------------------------------------- */
  --color-primary-50:  #EEF2FF;
  --color-primary-100: #E0E7FF;
  --color-primary-200: #C7D2FF;
  --color-primary-300: #A5B4FF;
  --color-primary-400: #7B8BFB;
  --color-primary-500: #4F66F7;
  --color-primary-600: #3B5BFC;   /* PRIMARY - buttons, links */
  --color-primary-700: #2E45D8;
  --color-primary-800: #2637AC;
  --color-primary-900: #233286;

  --color-violet-500: #8B5CF6;
  --color-violet-600: #6D4AF2;    /* SECONDARY - gradient partner */
  --color-violet-700: #5B37D6;

  --color-teal-400: #2CE0C3;
  --color-teal-500: #14C4B8;      /* ACCENT - highlights, voice */
  --color-teal-600: #0FA79E;

  --color-warm-500: #FF7A45;      /* warm accent, used sparingly */

  /* ---- Semantic / status ----------------------------------------------- */
  --color-success: #16A66B;
  --color-success-bg: #E7F6EF;
  --color-warning: #E08A00;
  --color-warning-bg: #FCF1DC;
  --color-danger:  #E5484D;
  --color-danger-bg: #FCE9EA;
  --color-info:    #2F80ED;
  --color-info-bg: #E6F0FD;

  /* ---- Neutral / slate scale ------------------------------------------- */
  --color-ink:       #0B1220;   /* near-black text */
  --color-slate-900: #111A2E;
  --color-slate-800: #1E293B;
  --color-slate-700: #334155;
  --color-slate-600: #475569;
  --color-slate-500: #64748B;
  --color-slate-400: #94A3B8;
  --color-slate-300: #CBD5E1;
  --color-slate-200: #E2E8F0;
  --color-slate-100: #EEF2F7;
  --color-slate-50:  #F6F8FC;

  /* ---- Surfaces / text / border (semantic aliases) --------------------- */
  --bg:            #FFFFFF;
  --bg-soft:       #F6F8FC;
  --bg-softer:     #FBFCFE;
  --bg-ink:        #0B1220;     /* dark sections */
  --bg-ink-soft:   #131D33;

  --text-strong:   var(--color-ink);
  --text-default:  #28324A;
  --text-muted:    var(--color-slate-500);
  --text-subtle:   var(--color-slate-400);
  --text-on-dark:  #EAF0FB;
  --text-on-dark-muted: #9DAAC4;

  --border:        #E6EAF2;
  --border-strong: #D3DAE8;
  --border-on-dark: rgba(255,255,255,0.12);

  /* ---- Gradients -------------------------------------------------------- */
  --grad-brand: linear-gradient(135deg, #3B5BFC 0%, #6D4AF2 100%);
  --grad-brand-soft: linear-gradient(135deg, #EEF2FF 0%, #F2ECFE 100%);
  --grad-teal: linear-gradient(135deg, #14C4B8 0%, #3B5BFC 100%);
  --grad-ink: linear-gradient(160deg, #0B1220 0%, #16213C 100%);
  --grad-hero-glow: radial-gradient(60% 60% at 50% 0%, rgba(109,74,242,0.18) 0%, rgba(59,91,252,0) 70%);

  /* ---- Chart / data-viz palette (analytics) ---------------------------- */
  --chart-1: #3B5BFC;
  --chart-2: #14C4B8;
  --chart-3: #8B5CF6;
  --chart-4: #FF7A45;
  --chart-5: #2CE0C3;
  --chart-6: #94A3B8;

  /* ---- Typography ------------------------------------------------------- */
  --font-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-display: clamp(2.6rem, 1.6rem + 3.6vw, 4.25rem);  /* hero */
  --fs-h1:      clamp(2.2rem, 1.5rem + 2.4vw, 3.25rem);
  --fs-h2:      clamp(1.8rem, 1.3rem + 1.6vw, 2.5rem);
  --fs-h3:      clamp(1.3rem, 1.1rem + 0.7vw, 1.6rem);
  --fs-h4:      1.18rem;
  --fs-lg:      1.18rem;
  --fs-body:    1.0625rem;   /* 17px */
  --fs-sm:      0.9375rem;   /* 15px */
  --fs-xs:      0.8125rem;   /* 13px */

  --lh-tight: 1.08;
  --lh-snug:  1.25;
  --lh-base:  1.6;
  --lh-relaxed: 1.7;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;
  --fw-extra:   800;

  --tracking-tight: -0.02em;
  --tracking-tighter: -0.035em;
  --tracking-wide: 0.06em;

  /* ---- Spacing scale (4px base) ---------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-12: 7rem;

  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* ---- Layout ----------------------------------------------------------- */
  --container: 1200px;
  --container-wide: 1320px;
  --container-narrow: 760px;
  --gutter: clamp(1.1rem, 0.5rem + 2vw, 2rem);
  --header-h: 72px;

  /* ---- Radius ----------------------------------------------------------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-full: 999px;

  /* ---- Shadows ---------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(16,24,40,0.06);
  --shadow-sm: 0 2px 6px -1px rgba(16,24,40,0.08), 0 1px 2px rgba(16,24,40,0.05);
  --shadow-md: 0 10px 28px -10px rgba(20,30,60,0.16), 0 2px 6px rgba(16,24,40,0.05);
  --shadow-lg: 0 28px 60px -18px rgba(20,30,60,0.26), 0 6px 16px -8px rgba(16,24,40,0.10);
  --shadow-xl: 0 44px 90px -28px rgba(20,30,60,0.34);
  --shadow-brand: 0 14px 34px -10px rgba(59,91,252,0.45);
  --ring-focus: 0 0 0 3px rgba(59,91,252,0.35);

  /* ---- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 480ms;

  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;
}