/* ------------------------------------------------------------------
   Design tokens — shared with the app onboarding prototype.
   Stripe-inspired. Marketing page adds a bold gradient hero.
   ------------------------------------------------------------------ */
:root {
  --ink:            #0a2540;
  --ink-secondary:  #425466;
  --ink-tertiary:   #697386;
  --ink-inverse:    #ffffff;

  /* Brand: cyan mark on deep navy (agenticcommerce.com). Interactive fills use a
     slightly deeper cyan so white button text clears contrast; the bright cyan is
     reserved for the mark and accents. */
  --accent:         #0089c7;
  --accent-hover:   #0074ab;
  --accent-active:  #00618f;
  --accent-tint:    #e7f5fc;
  --accent-ring:    rgba(0, 159, 227, 0.35);

  --brand-cyan:     #009fe3;
  --brand-cyan-bright: #00b4f0;
  --brand-navy:     #020822;
  --brand-navy-2:   #063b5c;

  --bg:             #ffffff;
  --surface:        #ffffff;
  --surface-tint:   #f6f9fc;
  --surface-tint-2: #eef3f8;

  --border:         #e6ebf1;
  --border-strong:  #d5dee7;

  --success:        #0e9f6e;
  --success-tint:   #e6f6ef;
  --warning:        #b45309;
  --warning-tint:   #fdf3e7;
  --danger:         #df1b41;
  --danger-tint:    #fdecef;

  --shadow-sm: 0 1px 2px rgba(10,37,64,0.06), 0 1px 3px rgba(10,37,64,0.08);
  --shadow-md: 0 2px 5px rgba(10,37,64,0.06), 0 7px 14px rgba(10,37,64,0.08);
  --shadow-lg: 0 15px 35px rgba(10,37,64,0.10), 0 5px 15px rgba(10,37,64,0.07);
  --shadow-xl: 0 30px 60px rgba(10,37,64,0.16), 0 12px 24px rgba(10,37,64,0.10);

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'SF Mono', ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur:  0.28s;

  --maxw: 1080px;
}