/* =============================================================================
   tokens.css — Empowering Creative Souls shared design tokens
   -----------------------------------------------------------------------------
   Single source of truth for color, type, spacing, and shape across the
   marketing site. Values are the official brand palette (see
   "Brand Colors - Hex Codes.JPG") plus the same teal/lavender/pink hues
   already sampled from the logo for /assessment, so the whole experience
   (site + assessment) reads as one continuous world.
============================================================================= */

:root {
  /* Brand hues */
  --ecs-teal: #5eead4;
  --ecs-teal-deep: #0d9488;
  --ecs-lavender: #a78bfa;
  --ecs-lavender-deep: #7b3fa0;
  --ecs-pink: #f7a7d4;
  --ecs-pink-deep: #ec4899;
  --ecs-purple-anchor: #4a1a6b;

  /* Deep-ink badge tone, sampled from the logo's circular background */
  --ecs-ink: #130a21;
  --ecs-ink-soft: #201a38;
  --ecs-midnight: #0d0a14;

  /* Soft washes — pale tints for backgrounds, dots, glows */
  --ecs-wash-teal: #e6f9f6;
  --ecs-wash-lavender: #f0eafc;
  --ecs-wash-pink: #fceaf5;

  /* Neutral surface + text */
  --ecs-paper: #ffffff;
  --ecs-paper-soft: #faf7ff;
  --ecs-text: #241f36;
  --ecs-text-soft: #6c6579;
  --ecs-text-faint: #746c86;

  /* Signature gradients */
  --ecs-gradient: linear-gradient(115deg, var(--ecs-teal) 0%, var(--ecs-lavender) 52%, var(--ecs-pink) 100%);
  --ecs-gradient-deep: linear-gradient(115deg, var(--ecs-teal-deep) 0%, var(--ecs-lavender-deep) 52%, var(--ecs-pink-deep) 100%);
  --ecs-gradient-ink: linear-gradient(160deg, var(--ecs-ink) 0%, var(--ecs-ink-soft) 100%);

  --shadow-soft: 0 10px 34px rgba(124, 99, 217, 0.12);
  --shadow-lift: 0 18px 44px rgba(124, 99, 217, 0.20);
  --shadow-badge: 0 14px 32px rgba(14, 11, 26, 0.28);

  /* Type */
  --font-display: 'Cormorant Garamond', 'Georgia', serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing */
  --space-3xs: 0.35rem;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 2.75rem;
  --space-xl: 4.5rem;
  --space-2xl: 7rem;

  /* Shape */
  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 14px;
  --radius-pill: 999px;

  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);

  /* Layout */
  --content-max: 1180px;
  --content-narrow: 760px;
  --header-height: 84px;
}