/* ============================================================
   SmartVend — Design Tokens  ·  "Blue Metal Glass"
   Dark + glassmorphism + brushed blue metal + orange energy
   ============================================================ */
@import url('fonts.css');

:root{
  /* — Brand palette (from brand board) — */
  --primary:      #0A1E44;   /* main brand blue — trust & authority */
  --navy-deep:    #07132B;   /* depth & emphasis backgrounds */
  --accent:       #FF6A00;   /* key highlights, CTAs, energy */
  --accent-2:     #FF9A3D;   /* supporting accents, hover */
  --neutral:      #F5F6F8;   /* clean light surfaces */
  --support:      #1A1D21;   /* strong contrast text/icons */

  /* — Extended dark scale — */
  --bg:           #060B18;   /* page base (deepest) */
  --bg-1:         #08122A;   /* raised base */
  --steel-1:      #14284f;   /* brushed metal low */
  --steel-2:      #2c5aa8;   /* brushed metal mid */
  --steel-3:      #7ea6e6;   /* brushed metal highlight */
  --steel-4:      #cfe0ff;   /* metal spark */

  /* — Ink — */
  --ink:          #EAF0FF;   /* primary text */
  --ink-soft:     #A6B6D8;   /* secondary text */
  --ink-faint:    #6E7EA3;   /* tertiary / captions */
  --ink-onlight:  #0A1226;   /* text on light/orange surfaces */

  /* — Glass surfaces — */
  --glass:        rgba(255,255,255,.045);
  --glass-2:      rgba(255,255,255,.07);
  --glass-hi:     rgba(255,255,255,.12);
  --hair:         rgba(255,255,255,.10);
  --hair-soft:    rgba(255,255,255,.06);
  --blur:         blur(22px) saturate(150%);
  --blur-sm:      blur(12px) saturate(140%);

  /* — Gradients — */
  --grad-metal:   linear-gradient(150deg,#0f2247 0%,#2c5aa8 42%,#7ea6e6 66%,#cfe0ff 100%);
  --grad-metal-rim: linear-gradient(160deg,#8fb2ec,#20386a 55%,#0c1a38);
  --grad-accent:  linear-gradient(120deg,#FF8A2B 0%,#FF6A00 100%);
  --grad-accent-glow: radial-gradient(60% 60% at 50% 0%, rgba(255,106,0,.55), transparent 70%);
  --grad-ink:     linear-gradient(180deg,#ffffff, #b9c8ec);

  /* — Radii — */
  --r-xs: 8px;  --r-sm: 12px;  --r-md: 16px;  --r-lg: 22px;  --r-xl: 30px;  --r-pill: 999px;

  /* — Shadows — */
  --sh-card:  0 1px 0 rgba(255,255,255,.10) inset, 0 30px 70px -42px #000;
  --sh-soft:  0 24px 60px -40px rgba(0,0,0,.9);
  --sh-glow:  0 12px 40px -10px rgba(255,106,0,.55);
  --sh-metal: 0 1px 0 rgba(255,255,255,.22) inset, 0 -1px 0 rgba(0,0,0,.4) inset;

  /* — Type — */
  --font-head: 'Sora', system-ui, -apple-system, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  --font-body: 'Manrope', system-ui, -apple-system, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;

  /* — Layout — */
  --container: 1200px;
  --gutter: clamp(18px,5vw,44px);

  /* — Motion — */
  --ease:      cubic-bezier(.22,1,.36,1);
  --ease-expo: cubic-bezier(.16,1,.3,1);
  --dur-1: 120ms; --dur-2: 300ms; --dur-3: 520ms;
}