/* ==========================================================================
myAi Design System — Design Tokens
Source of truth for every color, size, and effect on the site.
Brand: indigo #272a68 · purple #5e3a8d · Playfair Display · spark ✦
========================================================================== */
:root {
/* --------------------------------------------------------------------
COLOR · Indigo scale (brand primary #272a68 = 800)
-------------------------------------------------------------------- */
--indigo-950: #131535;
--indigo-900: #1d1f53;
--indigo-800: #272a68; /* brand */
--indigo-700: #343879;
--indigo-600: #43478d;
--indigo-500: #575ba2;
--indigo-400: #7c80bc;
--indigo-300: #a4a7d3;
--indigo-200: #c8cae6;
--indigo-100: #e3e4f3;
--indigo-50: #f2f3fa;
/* --------------------------------------------------------------------
COLOR · Purple scale (brand accent #5e3a8d = 700)
-------------------------------------------------------------------- */
--purple-950: #271840;
--purple-900: #3a2459;
--purple-800: #4d2f75;
--purple-700: #5e3a8d; /* brand */
--purple-600: #6f4a9f;
--purple-500: #8360b1;
--purple-400: #9d7fc4;
--purple-300: #b9a3d6;
--purple-200: #d5c7e8;
--purple-100: #ebe4f4;
--purple-50: #f7f4fb;
/* --------------------------------------------------------------------
COLOR · Neutrals (subtle violet cast to sit with the brand)
-------------------------------------------------------------------- */
--gray-950: #17151d;
--gray-900: #24222c;
--gray-800: #3a3743;
--gray-700: #4f4c5a;
--gray-600: #676372;
--gray-500: #817d8c;
--gray-400: #a09da9;
--gray-300: #c2c0c9;
--gray-200: #dedce4;
--gray-100: #eeedf2;
--gray-50: #f8f7fa;
--white: #ffffff;
/* --------------------------------------------------------------------
COLOR · Semantic
-------------------------------------------------------------------- */
--color-bg: var(--white);
--color-bg-soft: var(--gray-50); /* alternating sections */
--color-bg-tint: var(--indigo-50); /* branded tint sections */
--color-bg-deep: var(--indigo-950); /* dark bands: stats, footer */
--color-surface: var(--white); /* cards */
--color-ink: var(--gray-900); /* headings */
--color-body: var(--gray-700); /* body copy */
--color-muted: var(--gray-500); /* captions, meta */
--color-primary: var(--indigo-800);
--color-accent: var(--purple-700);
--color-line: #e6e4ec; /* borders, rules */
--color-line-dark: rgba(255, 255, 255, .14);
/* On dark bands */
--color-ink-inverse: var(--white);
--color-body-inverse: var(--indigo-200);
/* Feedback (forms) */
--color-success: #1e7f4f;
--color-error: #b3261e;
/* Brand gradient — the signature. Use sparingly: CTAs, stat numerals,
one em per headline. */
--grad-brand: linear-gradient(120deg, var(--indigo-800) 0%, var(--purple-700) 100%);
--grad-brand-deep: linear-gradient(135deg, var(--indigo-950) 0%, var(--indigo-900) 55%, var(--purple-900) 100%);
--grad-bright: linear-gradient(120deg, var(--purple-300) 0%, var(--purple-200) 45%, var(--white) 100%); /* emphasis text on dark bands */
/* --------------------------------------------------------------------
TYPE
-------------------------------------------------------------------- */
--font-display: "Playfair Display", Georgia, "Times New Roman", serif;
--font-body: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
/* Fluid scale — display serif carries the brand voice */
--text-display: clamp(2.75rem, 1.9rem + 3.6vw, 4.75rem); /* hero */
--text-h1: clamp(2.25rem, 1.75rem + 2vw, 3.375rem);
--text-h2: clamp(1.75rem, 1.5rem + 1.1vw, 2.375rem);
--text-h3: clamp(1.375rem, 1.28rem + .45vw, 1.625rem);
--text-h4: 1.125rem;
--text-lead: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);
--text-base: 1rem;
--text-sm: .875rem;
--text-xs: .8125rem;
--leading-display: 1.06;
--leading-heading: 1.18;
--leading-body: 1.65;
--tracking-eyebrow: .14em;
/* --------------------------------------------------------------------
SPACE (4px base)
-------------------------------------------------------------------- */
--space-1: .25rem;
--space-2: .5rem;
--space-3: .75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;
--space-7: 3rem;
--space-8: 4rem;
--space-9: 6rem;
--section-y: clamp(4rem, 2.75rem + 4vw, 7rem); /* vertical rhythm of page sections */
/* --------------------------------------------------------------------
LAYOUT
-------------------------------------------------------------------- */
--container: 72rem; /* default page width */
--container-narrow: 46rem; /* long-form text */
--container-wide: 80rem; /* hero / footer */
--gutter: clamp(1.25rem, 4vw, 2.5rem);
/* Breakpoints (reference — used literally in media queries):
sm 40rem / 640px · md 48rem / 768px · lg 64rem / 1024px · xl 80rem / 1280px */
/* --------------------------------------------------------------------
SHAPE & ELEVATION
-------------------------------------------------------------------- */
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-pill: 999px;
--shadow-sm: 0 1px 2px rgba(29, 31, 83, .07);
--shadow-md: 0 6px 24px -8px rgba(29, 31, 83, .16);
--shadow-lg: 0 24px 60px -20px rgba(29, 31, 83, .28);
--focus-ring: 0 0 0 3px var(--purple-200);
/* --------------------------------------------------------------------
MOTION
-------------------------------------------------------------------- */
--ease: cubic-bezier(.22, .61, .36, 1);
--dur-fast: 150ms;
--dur: 250ms;
/* --------------------------------------------------------------------
BRAND MARK · the spark ✦ as a data-URI (purple / white variants)
-------------------------------------------------------------------- */
--spark: url('data:image/svg+xml,');
--spark-white: url('data:image/svg+xml,');
}