/* ==========================================================================
   Collsta Design System — tokens
   Copied verbatim from `Collsta Design System/tokens/*.css`.
   Do not invent new brand values here. Site-level layout/motion variables
   live in base.css instead.
   ========================================================================== */

:root{
  /* ---- Brand — navy ---- */
  --navy:#0D0F3C;         /* primary navy — wordmark, headings */
  --navy-deep:#06144F;    /* deep navy — dark surfaces */
  --navy-900:#000521;     /* near-black navy — dark app icon base */

  /* ---- Brand — purple ---- */
  --purple:#665EE6;       /* primary purple */
  --purple-bright:#735CFF;/* bright purple — play mark, primary CTAs */
  --lavender:#B8ABF2;     /* soft lavender */
  --lavender-pale:#EDE8FF;/* pale lavender — tints, icon-card fills */

  /* ---- Brand — coral ---- */
  --coral:#E16D7B;        /* coral */
  --coral-soft:#FF7A85;   /* soft coral — accent, highlights */

  /* ---- Neutrals / surfaces ---- */
  --bg-white:#FAFAFD;     /* background white */
  --bg-soft:#F5F3FA;      /* soft background */
  --surface:#FFFFFF;      /* card surface */
  --border:#E5E7F3;       /* border / divider */
  --text-muted:#7E819C;   /* muted text */

  /* ---- Semantic aliases ---- */
  --text-heading:var(--navy);
  --text-body:#3A3D5C;
  --text-subtle:var(--text-muted);
  --text-on-dark:#FFFFFF;
  --surface-page:var(--bg-white);
  --surface-soft:var(--bg-soft);
  --surface-card:var(--surface);
  --surface-dark:var(--navy);
  --accent:var(--purple-bright);
  --accent-soft:var(--coral-soft);
  --divider:var(--border);
  --focus-ring:var(--purple-bright);

  /* ---- Gradients ---- */
  --grad-lavender:linear-gradient(135deg,#EDE8FF 0%,#F5F3FA 100%);
  --grad-blob-purple:radial-gradient(circle at 30% 30%,#C9BEF7 0%,#B8ABF2 55%,rgba(184,171,242,0) 75%);
  --grad-blob-coral:radial-gradient(circle at 60% 40%,#FFB3B9 0%,#FF9AA3 55%,rgba(255,122,133,0) 75%);
  --grad-text:linear-gradient(90deg,#735CFF 0%,#FF7A85 100%);
  --grad-underline:linear-gradient(90deg,#735CFF 0%,#B8ABF2 50%,#FF7A85 100%);

  /* ---- Type families ----
     Font files are loaded via <link> in the document head (not @import)
     so they do not block first paint. Families themselves are unchanged. */
  --font-display:'Plus Jakarta Sans',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',monospace;

  /* ---- Type scale ---- */
  --fs-hero:clamp(48px,7vw,88px);
  --fs-h1:clamp(38px,5vw,60px);
  --fs-h2:clamp(30px,3.5vw,42px);
  --fs-h3:24px;
  --fs-body-lg:19px;
  --fs-body:16px;
  --fs-small:14px;
  --fs-caption:12px;
  --fs-button:16px;
  --fs-overline:12px;

  --lh-tight:1.05;
  --lh-heading:1.15;
  --lh-body:1.6;

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

  --ls-tight:-0.03em;
  --ls-normal:0;
  --ls-wide:0.06em;
  --ls-overline:0.22em;

  /* ---- Spacing (8px system) ---- */
  --space-0:0;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;
  --space-10:128px;

  --container-max:1200px;
  --gutter:24px;

  /* ---- Radius ---- */
  --radius-sm:8px;
  --radius-md:16px;
  --radius-lg:28px;
  --radius-xl:40px;
  --radius-pill:999px;

  /* ---- Shadows ---- */
  --shadow-sm:0 1px 3px rgba(13,15,60,0.06),0 1px 2px rgba(13,15,60,0.04);
  --shadow-md:0 12px 28px -8px rgba(13,15,60,0.14),0 4px 10px -4px rgba(13,15,60,0.08);
  --shadow-lg:0 40px 80px -24px rgba(13,15,60,0.28),0 12px 28px -12px rgba(13,15,60,0.16);
  --glow-purple:0 24px 60px -12px rgba(115,92,255,0.45);
  --glow-coral:0 24px 60px -12px rgba(255,122,133,0.40);
}

/* ==========================================================================
   Site additions — accessibility only
   `--text-muted` (#7E819C) measures ~3.7:1 on the white/near-white surfaces
   and fails WCAG AA for the small meta text used inside product cards.
   `--text-meta` sits on the same neutral ramp at ~6:1 and is used wherever
   muted text is below 18px. No new hue is introduced.
   ========================================================================== */
:root{
  --text-meta:#5F6280;
}

/* ==========================================================================
   Collsta reusable visual elements — from `tokens/effects.css`
   ========================================================================== */

/* Soft organic gradient blobs */
.collsta-blob{position:absolute;border-radius:50%;filter:blur(8px);pointer-events:none;z-index:0}
.collsta-blob--purple{background:var(--grad-blob-purple)}
.collsta-blob--coral{background:var(--grad-blob-coral)}

/* Dotted grid pattern */
.collsta-dots{background-image:radial-gradient(var(--lavender) 1.6px,transparent 1.6px);background-size:22px 22px;opacity:.6}

/* Soft glow halo behind hero elements */
.collsta-glow-purple{box-shadow:var(--glow-purple)}
.collsta-glow-coral{box-shadow:var(--glow-coral)}

/* Gradient underline accent */
.collsta-underline{position:relative;display:inline-block}
.collsta-underline::after{content:"";position:absolute;left:0;right:0;bottom:-.14em;height:.14em;border-radius:999px;background:var(--grad-underline)}

/* Gradient text */
.collsta-grad-text{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Rounded translucent pill label */
.collsta-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:var(--radius-pill);font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-overline);letter-spacing:var(--ls-overline);text-transform:uppercase}
.collsta-pill--lavender{background:var(--lavender-pale);color:var(--purple-bright)}
.collsta-pill--coral{background:#FFE7E9;color:var(--coral)}

/* Sparkle accent */
.collsta-sparkle{display:inline-block;width:16px;height:16px;background:var(--coral-soft);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.6 6 5.4 10.8 12 12-6.6 1.2-11.4 6-12 12-.6-6-5.4-10.8-12-12C6.6 10.8 11.4 6 12 0z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.6 6 5.4 10.8 12 12-6.6 1.2-11.4 6-12 12-.6-6-5.4-10.8-12-12C6.6 10.8 11.4 6 12 0z'/%3E%3C/svg%3E") center/contain no-repeat}