/* ============================================================
   home. — Design tokens (v1.0)
   Single source of truth — exact values from brand guidelines.
   Import this stylesheet into ANY surface (web, app, email, marketing)
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Onest:wght@300;400;500;600;700;800;900&display=swap");

:root {
  /* ---------- Primary palette (8 pastels) ---------- */
  --c-pink:        #ffa1cf;   /* Signature */
  --c-purple:      #b0a3ff;   /* Accent */
  --c-blue:        #a2e4ff;   /* Trust */
  --c-lime:        #cbf7aa;   /* Growth */
  --c-mint:        #a9ffcc;   /* Positive */
  --c-yellow:      #deffa8;   /* Highlight */
  --c-coral:       #ffccbf;   /* Warmth */
  --c-teal:        #00ad73;   /* Action */

  /* ---------- Functional ---------- */
  --c-error:       #d93e39;
  --c-success:     #12801f;
  --c-warning:     #f59e0b;

  /* ---------- Neutrals ---------- */
  --c-black:       #171a20;
  --c-white:       #ffffff;
  --c-gray:        #c5c5c5;
  --c-light-1:     #f4f4f4;
  --c-light-2:     #f5f5f5;

  /* ---------- Semantic aliases ---------- */
  --ink:           #171a20;
  --ink-2:         #2b2b2b;
  --ink-3:         #5c5e62;
  --ink-4:         #8a8d94;   /* Meta, placeholders, captions */
  --ink-5:         #b8bbc2;   /* Disabled text, divider accents */
  --rule:          #ececec;
  --rule-2:        #e5e7eb;
  --rule-3:        #f0f0f0;
  --page:          #ffffff;
  --page-2:        #fafafa;   /* Section alternate */
  --page-3:        #f5f5f5;   /* Hover backgrounds, segmented track */
  --page-4:        #f4f4f4;   /* Stage / empty-state backdrop */
  --page-alt:      #f4f4f4;   /* legacy alias for page-4 */

  /* ---------- Functional fills ---------- */
  --error-bg:      #fde9e7;
  --success-bg:    #e9fbef;
  --warning-bg:    #fff5dc;

  /* ---------- Type ---------- */
  --font-sans: "Onest", "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Display ramp */
  /* sizes */
  --t-display:  88px; /* @kind font */
  --t-h1:       64px; /* @kind font */
  --t-h2:       48px; /* @kind font */
  --t-h3:       32px; /* @kind font */
  --t-h4:       24px; /* @kind font */
  --t-lead:     22px; /* @kind font */
  --t-body:     17px; /* @kind font */
  --t-small:    14px; /* @kind font */
  --t-meta:     12px; /* @kind font */
  --t-eyebrow:  14px; /* @kind font */
  /* line-heights (unitless) */
  --lh-display: 0.96; /* @kind font */
  --lh-h1:      1.02; /* @kind font */
  --lh-h2:      1.08; /* @kind font */
  --lh-h3:      1.15; /* @kind font */
  --lh-h4:      1.20; /* @kind font */
  --lh-lead:    1.50; /* @kind font */
  --lh-body:    1.55; /* @kind font */
  --lh-small:   1.50; /* @kind font */
  --lh-meta:    1.40; /* @kind font */
  --lh-eyebrow: 1.00; /* @kind font */
  /* letter-spacing / tracking */
  --tk-display: -0.042em; /* @kind font */
  --tk-h1:      -0.032em; /* @kind font */
  --tk-h2:      -0.026em; /* @kind font */
  --tk-h3:      -0.018em; /* @kind font */
  --tk-h4:      -0.012em; /* @kind font */
  --tk-lead:    -0.005em; /* @kind font */
  --tk-body:    -0.003em; /* @kind font */
  --tk-eyebrow:  0.14em;  /* @kind font */
  /* weights */
  --w-display: 900; /* @kind font */
  --w-h1:      800; /* @kind font */
  --w-h2:      800; /* @kind font */
  --w-h3:      700; /* @kind font */
  --w-h4:      700; /* @kind font */

  /* ---------- Spacing ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  48px;
  --sp-10: 64px;
  --sp-11: 80px;
  --sp-12: 96px;
  --sp-13: 120px;

  /* ---------- Radius ---------- */
  --r-xs:    6px;
  --r-sm:    10px;
  --r-md:    14px;
  --r-lg:    18px;
  --r-xl:    24px;
  --r-2xl:   32px;
  --r-pill:  9999px;

  /* ---------- Elevation ---------- */
  --sh-0:          none; /* @kind shadow */
  --sh-1:          0 1px 2px rgba(0,0,0,0.05);
  --sh-2:          0 4px 4px 0 #b0a3ff;                 /* signature purple */
  --sh-3:          0 4px 4px 0 #ffa1cf;                 /* signature pink */
  --sh-4:          0 10px 15px -12px rgba(0,0,0,0.10);  /* default card */
  --sh-5:          0 20px 40px -16px rgba(0,0,0,0.20);  /* modal / overlay */
  /* legacy aliases for older surfaces */
  --shadow-card:   var(--sh-4);
  --shadow-ui:     0 4px 20px 0 rgba(0,0,0,0.08);
  --shadow-pop:    0 2px 4px -2px rgba(0,0,0,0.10), 0 4px 6px -1px rgba(0,0,0,0.10);
  --shadow-lift-purple: var(--sh-2);
  --shadow-lift-pink:   var(--sh-3);
  --shadow-lift-blue:   0 4px 4px 0 #a2e4ff;
  --shadow-lift-mint:   0 4px 4px 0 #a9ffcc;

  /* ---------- Z-index ---------- */
  --z-base:        0;   /* @kind other */
  --z-raised:      10;  /* @kind other */
  --z-nav:         40;  /* @kind other */
  --z-overlay:     60;  /* @kind other */
  --z-modal:       80;  /* @kind other */
  --z-toast:      100;  /* @kind other */

  /* ---------- Motion ---------- */
  --ease-std: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);     /* @kind other */
  --ease-in:  cubic-bezier(0.55, 0, 0.45, 0.04); /* @kind other */
  --dur-1:    120ms; /* @kind other */
  --dur-2:    200ms; /* @kind other */
  --dur-3:    320ms; /* @kind other */
  --dur-4:    480ms; /* @kind other */
  /* legacy aliases */
  --dur-fast: var(--dur-1); /* @kind other */
  --dur-base: var(--dur-2); /* @kind other */
  --dur-slow: var(--dur-4); /* @kind other */
}

/* ============================================================
   Base reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   Type classes — use these directly
   ============================================================ */
.t-display { font: var(--w-display) var(--t-display)/var(--lh-display) var(--font-sans); letter-spacing: var(--tk-display); color: var(--c-black); margin: 0; text-wrap: balance; }
.t-h1      { font: var(--w-h1) var(--t-h1)/var(--lh-h1) var(--font-sans); letter-spacing: var(--tk-h1); color: var(--c-black); margin: 0; text-wrap: balance; }
.t-h2      { font: var(--w-h2) var(--t-h2)/var(--lh-h2) var(--font-sans); letter-spacing: var(--tk-h2); color: var(--c-black); margin: 0; text-wrap: balance; }
.t-h3      { font: var(--w-h3) var(--t-h3)/var(--lh-h3) var(--font-sans); letter-spacing: var(--tk-h3); color: var(--c-black); margin: 0; text-wrap: balance; }
.t-h4      { font: var(--w-h4) var(--t-h4)/var(--lh-h4) var(--font-sans); letter-spacing: var(--tk-h4); color: var(--c-black); margin: 0; }
.t-lead    { font: 400 var(--t-lead)/var(--lh-lead) var(--font-sans); letter-spacing: var(--tk-lead); color: var(--ink-3); margin: 0; }
.t-body    { font: 400 var(--t-body)/var(--lh-body) var(--font-sans); letter-spacing: var(--tk-body); color: var(--ink); margin: 0; }
.t-small   { font: 500 var(--t-small)/var(--lh-small) var(--font-sans); color: var(--ink-3); margin: 0; }
.t-meta    { font: 500 var(--t-meta)/var(--lh-meta) var(--font-sans); color: var(--ink-4); margin: 0; }
.t-eyebrow { font: 700 var(--t-eyebrow)/var(--lh-eyebrow) var(--font-sans); letter-spacing: var(--tk-eyebrow); text-transform: uppercase; color: var(--c-purple); margin: 0; }

.accent-pink { color: var(--c-pink); font-style: normal; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 22px;
  border-radius: var(--r-pill);
  font: 700 16px/1 var(--font-sans);
  letter-spacing: -0.005em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: filter var(--dur-base) var(--ease-std), background var(--dur-base) var(--ease-std), transform var(--dur-fast) var(--ease-std);
  text-decoration: none;
  white-space: nowrap;
}
.btn--primary { background: var(--c-black); color: #fff; }
.btn--primary:hover { filter: brightness(1.15); }
.btn--primary:active { transform: scale(0.98); }

.btn--outline { background: #fff; color: var(--c-black); border-color: var(--c-black); }
.btn--outline:hover { background: #f7f7f7; }

.btn--ghost { background: transparent; color: var(--c-black); }
.btn--ghost:hover { background: rgba(23,26,32,0.06); }

.btn--pink { background: var(--c-pink); color: var(--c-black); }
.btn--pink:hover { filter: brightness(1.04); }

.btn--inverse { background: #fff; color: var(--c-black); }
.btn--sm { height: 40px; padding: 0 16px; font-size: 14px; }
.btn--lg { height: 56px; padding: 0 28px; font-size: 17px; }

/* ============================================================
   Cards & surfaces
   ============================================================ */
.card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r-xl);
  padding: 32px;
  box-shadow: var(--shadow-lift-purple);
}
.card--pink { box-shadow: var(--shadow-lift-pink); }
.card--blue { box-shadow: var(--shadow-lift-blue); }
.card--mint { box-shadow: var(--shadow-lift-mint); }
.card--flat { box-shadow: var(--shadow-card); }
.card--dark { background: var(--c-black); color: #fff; border-color: transparent; box-shadow: none; }

/* ============================================================
   Icon tiles
   ============================================================ */
.tile {
  width: 56px; height: 56px;
  border-radius: 16px;
  display: grid; place-items: center;
  flex: none;
}
.tile svg { width: 26px; height: 26px; color: var(--c-black); stroke-width: 1.8; }
.tile--sm { width: 40px; height: 40px; border-radius: 12px; }
.tile--sm svg { width: 18px; height: 18px; }
.tile--pink   { background: var(--c-pink); }
.tile--purple { background: var(--c-purple); }
.tile--blue   { background: var(--c-blue); }
.tile--lime   { background: var(--c-lime); }
.tile--mint   { background: var(--c-mint); }
.tile--yellow { background: var(--c-yellow); }
.tile--coral  { background: var(--c-coral); }
.tile--ink    { background: var(--c-black); }
.tile--ink svg { color: #fff; }

/* ============================================================
   Chips & badges
   ============================================================ */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  font: 700 12px/1 var(--font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.chip .dot { width: 6px; height: 6px; border-radius: 9999px; }
.chip--coming  { background: var(--c-yellow); color: var(--c-black); }
.chip--live    { background: var(--c-mint); color: #0e5c36; }
.chip--new     { background: var(--c-pink); color: var(--c-black); }
.chip--neutral { background: var(--c-light-1); color: var(--ink-3); }
.chip--ink     { background: var(--c-black); color: #fff; }
.chip--outline { background: #fff; color: var(--c-black); border: 1px solid var(--rule); }

/* ============================================================
   Eyebrows
   ============================================================ */
.eyebrow {
  font: 700 var(--t-eyebrow)/1 var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-purple);
  display: inline-block;
}
.eyebrow--lime  { color: #5b8a1f; }
.eyebrow--pink  { color: #c43782; }
.eyebrow--ink   { color: var(--ink-3); }

/* ============================================================
   Layout helpers
   ============================================================ */
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.wrap--wide { max-width: 1440px; }
.wrap--narrow { max-width: 960px; }

.section { padding: 120px 0; }
.section--alt { background: var(--c-light-1); }
.section--ink { background: var(--c-black); color: #fff; }

/* ============================================================
   Hero washes
   ============================================================ */
.wash-hero {
  background:
    radial-gradient(60% 80% at 85% 10%, rgba(255,161,207,0.20), transparent 70%),
    radial-gradient(50% 70% at 10% 90%, rgba(162,228,255,0.20), transparent 70%),
    radial-gradient(40% 60% at 30% 20%, rgba(176,163,255,0.16), transparent 70%);
}
.wash-aurora {
  background: linear-gradient(100deg, rgba(222,255,168,0.35) 0%, rgba(162,228,255,0.30) 50%, rgba(176,163,255,0.35) 100%);
}
.wash-lavender { background: #f7f6ff; }
.wash-sand     { background: #f4f3ef; }