/* ============================================================
   PROMPTBITE — Marketing site redesign · design tokens
   Mirrors PromptBite_Website_Design_Handoff §1.
   DISCIPLINE: green = money saved · tri-color = the agent/AI ·
   everything else is black, white or glass.
   ============================================================ */

@font-face { font-family:"Inter"; font-weight:400; font-display:swap; src:url("../assets/fonts/Inter-Regular.ttf") format("truetype"); }
@font-face { font-family:"Inter"; font-weight:500; font-display:swap; src:url("../assets/fonts/Inter-Medium.ttf") format("truetype"); }
@font-face { font-family:"Inter"; font-weight:600; font-display:swap; src:url("../assets/fonts/Inter-SemiBold.ttf") format("truetype"); }
@font-face { font-family:"Inter"; font-weight:700; font-display:swap; src:url("../assets/fonts/Inter-Bold.ttf") format("truetype"); }
@font-face { font-family:"Inter"; font-weight:800; font-display:swap; src:url("../assets/fonts/Inter-ExtraBold.ttf") format("truetype"); }
@font-face { font-family:"Inter"; font-weight:900; font-display:swap; src:url("../assets/fonts/Inter-Black.ttf") format("truetype"); }

:root{
  /* surfaces & ink */
  --bg:#000000;            /* true black — marketing canvas */
  --app-canvas:#050505;    /* in-phone app canvas */
  --ink-0:#FFFFFF;
  --ink-60:rgba(255,255,255,.62);   /* body gray on black */
  --ink-40:rgba(255,255,255,.40);   /* captions */
  --ink-20:rgba(255,255,255,.20);
  --glass-fill:rgba(255,255,255,.08);
  --glass-fill-2:rgba(255,255,255,.10);
  --glass-border:rgba(255,255,255,.14);
  --glass-border-strong:rgba(255,255,255,.18);

  /* GREEN = money saved (the wedge) */
  --savings:#0EA371;
  --savings-bright:#6EE3B8;   /* brand green on dark — wordmark period, savings eyebrow */

  /* TRI-COLOR = the agent / intelligence (the Playground gradient) */
  --ai-red:#DC2626;
  --ai-gold:#E6C078;
  --ai-green:#0EA371;

  /* semantic */
  --warn:#D97706;
  --streak-gold:#FFD985;

  /* radius */
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;

  /* layout */
  --maxw:1240px; --edge:28px;

  /* iOS easing */
  --ease-ios:cubic-bezier(.32,.72,0,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* tri-color orb gradient — the AI surface, reused everywhere */
.tri-orb{
  background:
    radial-gradient(circle at 30% 28%, var(--ai-red) 0%, transparent 55%),
    radial-gradient(circle at 72% 30%, var(--ai-gold) 0%, transparent 52%),
    radial-gradient(circle at 50% 78%, var(--ai-green) 0%, transparent 58%),
    var(--ai-red);
}

/* greeting 4-stop gradient (pink → tan → white → green) */
.greeting-grad{
  background:linear-gradient(120deg,#F5A6A6 0%, #F0CFA6 32%, #FFFFFF 60%, #A6E0C7 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}