/* =========================================================================
   FunLida Design Tokens — Stage 1
   Loaded BEFORE funlida-design.css. Single source of truth for colour,
   type, spacing, radius, elevation and motion.

   STEP 1 (this file, as shipped): every token resolves to the EXACT value
   already live on the site. Tokenising is therefore a provable no-op.
   The deliberate ground change is isolated in funlida-ground.css so it can
   be reverted independently.
   ========================================================================= */

:root {

  /* --- Primary ramp (from #E4487A) ------------------------------------ */
  --fl-primary-50:  #FFF5F8;
  --fl-primary-100: #FDE7EE;
  --fl-primary-150: #FBE3EC;
  --fl-primary-200: #F9C9D9;
  --fl-primary-250: #F6C6DA;
  --fl-primary-300: #F2B2CF;
  --fl-primary-350: #E9A9C6;
  --fl-primary-400: #EC7FA4;
  --fl-primary-500: #E4487A;   /* brand base */
  --fl-primary-600: #C93A68;
  --fl-primary-700: #B0396A;
  --fl-primary-750: #B05078;   /* kit "secondary" */
  --fl-primary-800: #8E2A50;
  --fl-primary-900: #6B1E3B;

  /* --- Violet ramp (from #B098D8) ------------------------------------- */
  --fl-violet-50:  #F1EAFB;
  --fl-violet-100: #D9C7EE;
  --fl-violet-200: #C4B0E4;
  --fl-violet-300: #B098D8;    /* kit "accent" */
  --fl-violet-500: #7C5FB3;
  --fl-violet-700: #6A4E9C;
  --fl-violet-900: #541CB8;

  /* --- Warm neutral / ink -------------------------------------------- */
  --fl-ink-950: #222;
  --fl-ink-900: #2B2B2B;       /* body text */
  --fl-ink-850: #333;
  --fl-ink-700: #4A4A4A;
  --fl-ink-650: #5B5560;
  --fl-ink-600: #6B5560;       /* muted body */
  --fl-ink-550: #6B6B6B;
  --fl-ink-500: #8A7A80;
  --fl-ink-300: #B9B4C0;
  --fl-ink-200: #CFC7CC;

  /* --- Surfaces ------------------------------------------------------- */
  --fl-surface-card:  #FFFFFF;
  --fl-surface-page:  #FDF1F4;  /* STEP 1: unchanged. Overridden in funlida-ground.css */
  --fl-surface-alt:   #F7F4F5;
  --fl-tint-50:       #FDF1F4;
  --fl-tint-75:       #FDE7EE;
  --fl-tint-100:      #FCE4EC;
  --fl-tint-150:      #FBE0EA;
  --fl-tint-200:      #F7E3EA;
  --fl-tint-250:      #F2E0E7;
  --fl-tint-300:      #FADCE7;

  /* --- Borders -------------------------------------------------------- */
  --fl-border-soft:   #F3D9E1;
  --fl-border:        #E7C9D3;
  --fl-border-strong: var(--fl-primary-200);

  /* --- Semantic ------------------------------------------------------- */
  --fl-success: #1F8A5B;
  --fl-error:   #C0392B;
  --fl-star:    #FFD84D;

  /* --- Alpha primitives (elevation + glass) --------------------------- */
  --fl-a-primary-06: rgba(228,72,122,.06);
  --fl-a-primary-08: rgba(228,72,122,.08);
  --fl-a-primary-10: rgba(228,72,122,.10);
  --fl-a-primary-12: rgba(228,72,122,.12);
  --fl-a-primary-15: rgba(228,72,122,.15);
  --fl-a-primary-16: rgba(228,72,122,.16);
  --fl-a-primary-18: rgba(228,72,122,.18);
  --fl-a-primary-20: rgba(228,72,122,.20);
  --fl-a-primary-22: rgba(228,72,122,.22);
  --fl-a-violet-22:  rgba(176,152,216,.22);
  --fl-a-white-16:   rgba(255,255,255,.16);
  --fl-a-white-30:   rgba(255,255,255,.30);
  --fl-a-white-55:   rgba(255,255,255,.55);

  /* --- Elevation: 5 steps, tinted, each with a hover partner ---------- */
  --fl-shadow-1:       0 2px 8px   var(--fl-a-primary-06);
  --fl-shadow-1-hover: 0 6px 16px  var(--fl-a-primary-10);
  --fl-shadow-2:       0 8px 24px  var(--fl-a-primary-08);
  --fl-shadow-2-hover: 0 14px 32px var(--fl-a-primary-15);
  --fl-shadow-3:       0 10px 30px var(--fl-a-primary-12);
  --fl-shadow-3-hover: 0 18px 42px var(--fl-a-primary-18);
  --fl-shadow-4:       0 12px 34px var(--fl-a-primary-18);
  --fl-shadow-4-hover: 0 22px 52px var(--fl-a-primary-22);
  --fl-shadow-5:       0 18px 46px var(--fl-a-primary-22);
  --fl-shadow-5-hover: 0 26px 60px rgba(228,72,122,.28);
  --fl-shadow-violet:  0 10px 26px var(--fl-a-violet-22);

  /* --- Radius: 3 tokens ----------------------------------------------- */
  --fl-radius-control: 12px;
  --fl-radius-card:    20px;
  --fl-radius-pill:    999px;
  --fl-radius-circle:  50%;

  /* --- Type: Poppins display / Figtree body --------------------------- */
  --fl-font-display: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fl-font-body:    "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* 1.25 modular scale from 16px */
  --fl-text-xs:   0.75rem;   /* 12 */
  --fl-text-sm:   0.875rem;  /* 14 — meta/caption */
  --fl-text-base: 1rem;      /* 16 — body */
  --fl-text-lg:   1.25rem;   /* 20 — lead */
  --fl-text-xl:   1.5625rem; /* 25 */
  --fl-text-2xl:  1.9375rem; /* 31 */
  --fl-text-3xl:  2.4375rem; /* 39 — section H2 */
  --fl-text-4xl:  3.0625rem; /* 49 — H1 */
  --fl-text-5xl:  3.8125rem; /* 61 */

  --fl-weight-body:    400;
  --fl-weight-medium:  600;
  --fl-weight-bold:    700;
  --fl-weight-display: 800;

  --fl-leading-display: 1.1;
  --fl-leading-tight:   1.15;
  --fl-leading-body:    1.6;

  --fl-tracking-display: -0.02em;  /* H1 / H2 */
  --fl-tracking-heading: -0.01em;  /* H3 */
  --fl-tracking-body:    0;

  --fl-measure: 65ch;

  /* --- Spacing: 4px base ---------------------------------------------- */
  --fl-space-1:  4px;
  --fl-space-2:  8px;
  --fl-space-3:  12px;
  --fl-space-4:  16px;
  --fl-space-5:  20px;
  --fl-space-6:  24px;
  --fl-space-8:  32px;
  --fl-space-10: 40px;
  --fl-space-12: 48px;
  --fl-space-16: 64px;
  --fl-space-20: 80px;
  --fl-space-24: 96px;
  --fl-space-30: 120px;

  --fl-space-section-y: 96px;   /* desktop — tuned from measured 72px base */
  --fl-gutter: var(--fl-space-6);

  /* --- Motion ---------------------------------------------------------- */
  --fl-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --fl-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --fl-ease-inout:  cubic-bezier(0.4, 0, 0.2, 1);
  --fl-dur-fast:   150ms;
  --fl-dur-base:   250ms;
  --fl-dur-slow:   400ms;

  --fl-reveal-y: 16px;
  --fl-stagger:  60ms;

  --fl-focus-ring: 2px solid var(--fl-primary-500);
  --fl-focus-offset: 2px;
}

/* Tablet / mobile section rhythm */
@media (max-width: 1024px) {
  :root { --fl-space-section-y: 72px; }
}
@media (max-width: 767px) {
  :root { --fl-space-section-y: 56px; --fl-gutter: var(--fl-space-4); }
}

/* Global motion kill-switch — honoured by every later stage. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --fl-dur-fast: 0.01ms;
    --fl-dur-base: 0.01ms;
    --fl-dur-slow: 0.01ms;
    --fl-reveal-y: 0px;
    --fl-stagger:  0ms;
  }
}