/* ============================================================
   MadGrow — design system  (LIGHT)
   Matched to the reference board in the MADUP brief: bright, airy,
   blue-violet field, floating UI cards with soft ambient shadows.
   Differentiated by a WARM paper base instead of the usual cool white.
   Type: Geist / Geist Mono.
   ============================================================ */
@font-face{font-family:'Geist';src:url('fonts/geist/Geist-var.woff2')format('woff2-variations');
  font-weight:100 900;font-display:block}
@font-face{font-family:'Geist Mono';src:url('fonts/geist/GeistMono-var.woff2')format('woff2-variations');
  font-weight:100 900;font-display:block}

:root{
  /* --- canvas: warm paper, not cool white ---------------------------- */
  --paper:#FBFAF7;
  --paper-2:#FFFFFF;
  --paper-sunk:#F4F3F0;

  /* --- atmosphere ----------------------------------------------------- */
  --lav:#E8E4FF;
  --sky:#DAE8FF;
  --apricot:#FFE5CF;
  --mint:#D8F5E9;

  /* --- ink ------------------------------------------------------------ */
  --ink:#0D1120;
  --ink-2:#49516A;
  --ink-3:#6B7386;   /* AA: 4.55:1 tren nen giay */
  --ink-4:#B4BAC8;

  /* --- lines ---------------------------------------------------------- */
  --line:rgba(13,17,32,.075);
  --line-2:rgba(13,17,32,.125);
  --line-3:rgba(13,17,32,.20);

  /* --- brand: indigo -------------------------------------------------- */
  --indigo:#4A3FD4;
  --indigo-600:#5B4FE8;
  --indigo-500:#6F63F5;
  --indigo-300:#A79EFF;
  --indigo-50:#EEECFF;

  /* --- data states ----------------------------------------------------- */
  --pos:#0E9F6E;
  --pos-ink:#0B7C56;   /* dung khi lam CHU tren nen xanh nhat: 4.68:1 */
  --pos-bg:#E4F7EF;
  --neg:#E0484D;
  --warn:#E08A2B;

  /* --- ambient shadows: wide, diffused, blue-tinted -------------------- */
  --lift-1:0 1px 2px rgba(20,24,60,.05), 0 6px 16px -8px rgba(30,36,90,.14);
  --lift-2:0 2px 4px rgba(20,24,60,.05), 0 18px 40px -16px rgba(30,36,90,.22);
  --lift-3:0 4px 10px rgba(20,24,60,.05), 0 44px 96px -30px rgba(30,36,90,.30);
  --inner-light:inset 0 1px 0 rgba(255,255,255,.9);

  --spring:cubic-bezier(.32,.72,0,1);
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Geist',system-ui,sans-serif;
  font-weight:400;
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}

/* ---- typography ------------------------------------------------------- */
.d1{font-weight:600;letter-spacing:-.045em;line-height:1.03}
.d2{font-weight:600;letter-spacing:-.038em;line-height:1.07}
.d3{font-weight:600;letter-spacing:-.030em;line-height:1.15}
.mono{font-family:'Geist Mono',ui-monospace,monospace;font-feature-settings:'tnum' 1}
.tnum{font-variant-numeric:tabular-nums}

/* ---- eyebrow tag ------------------------------------------------------ */
.eyebrow{display:inline-flex;align-items:center;gap:9px;
  padding:7px 14px 7px 11px;border-radius:999px;
  background:var(--paper-2);border:1px solid var(--line-2);
  box-shadow:var(--lift-1);
  font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2)}
.eyebrow .spark{width:6px;height:6px;border-radius:99px;background:var(--indigo-600);
  box-shadow:0 0 0 3px rgba(91,79,232,.16)}

/* ---- double-bezel: outer tray + inner plate --------------------------- */
.bezel{padding:7px;border-radius:34px;background:rgba(255,255,255,.62);
  border:1px solid var(--line);box-shadow:var(--lift-3);backdrop-filter:blur(10px)}
.bezel > .plate{border-radius:27px;background:var(--paper-2);
  border:1px solid var(--line);box-shadow:var(--inner-light);overflow:hidden}

/* ---- island CTA: pill + nested icon circle ---------------------------- */
.cta{display:inline-flex;align-items:center;gap:16px;height:60px;
  padding:0 8px 0 28px;border-radius:999px;
  background:linear-gradient(180deg,var(--indigo-500),var(--indigo));
  color:#fff;font-weight:500;font-size:17px;letter-spacing:-.016em;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,
             0 12px 30px -10px rgba(74,63,212,.55), 0 2px 5px rgba(20,24,60,.18)}
.cta .knob{width:44px;height:44px;border-radius:999px;flex:none;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.24);
  display:flex;align-items:center;justify-content:center}

.cta-ghost{display:inline-flex;align-items:center;gap:16px;height:60px;
  padding:0 8px 0 28px;border-radius:999px;
  background:var(--paper-2);border:1px solid var(--line-2);
  box-shadow:var(--lift-1);
  color:var(--ink);font-weight:500;font-size:17px;letter-spacing:-.016em}
.cta-ghost .knob{width:44px;height:44px;border-radius:999px;flex:none;
  background:var(--paper-sunk);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center}

.hr{height:1px;background:var(--line)}