/* ══════════════════════════════════════════════════════════════════
   4DEGREE — design tokens v2
   Palette: Void Ink / Paper / Hyper Violet / Go Lime / Mango Pop / Slate
   Type: DM Sans (display + body) / DM Mono (price, code, ETA) — one
   type family, two optical roles, so the whole app reads as a single
   considered voice instead of a stack of borrowed fonts.
   ══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;0,9..40,900;1,9..40,500&family=DM+Mono:ital,wght@0,400;0,500;1,400&display=swap');

:root {
  /* Color */
  --ink:        #101019;
  --ink-soft:   #1C1E2C;
  --ink-000:    #08080C;
  --paper:      #F4F5EF;
  --paper-dim:  #E8E9E1;
  --card:       #FFFFFF;
  --violet:     #6C3CE9;
  --violet-deep:#4620C4;
  --violet-tint:#EEE8FD;
  --lime:       #B6FF3F;
  --lime-deep:  #8FD91E;
  --mango:      #FF7A29;
  --mango-tint: #FFE9DA;
  --slate:      #5B6172;
  --slate-soft: #8A8FA0;
  --line:       #E4E2DC;
  --danger:     #E23D3D;
  --danger-tint:#FBE4E4;
  --success:    #1FA463;
  --success-tint:#DEF5E9;
  --ink-tint:   #E7E8ED;

  /* Glow / glass — the "advanced" depth layer. Colored, low-alpha washes
     used behind dark hero surfaces and around focal actions, instead of
     flat drop shadows. */
  --violet-glow: rgba(108,60,233,.38);
  --mango-glow:  rgba(255,122,41,.34);
  --lime-glow:   rgba(182,255,63,.28);
  --glass-hi:    rgba(255,255,255,.10);
  --glass-hi-2:  rgba(255,255,255,.05);
  --glass-line:  rgba(255,255,255,.14);
  --glass-line-soft: rgba(255,255,255,.08);

  /* Component aliases — every component class (buttons, badges, chips,
     tab bar, install banner, timeline…) is written against this
     "caramel / amber" naming so the whole app can be re-themed by
     changing only these four lines. Currently mapped onto the brand's
     violet (primary action) and mango (accent-on-dark) colors. */
  --caramel:      var(--violet);
  --caramel-deep: var(--violet-deep);
  --caramel-tint: var(--violet-tint);
  --amber:        var(--mango);
  --amber-deep:   #B8500F;
  --amber-tint:   var(--mango-tint);

  /* Motion */
  --ease:        cubic-bezier(.4, 0, .2, 1);
  --ease-spring: cubic-bezier(.24, 1.42, .48, 1);
  --ease-out:    cubic-bezier(0, 0, .2, 1);

  /* Typography — DM Sans throughout; DM Mono reserved for anything
     tabular (prices, order codes, ETAs, stat figures). */
  --font-display: 'DM Sans', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'DM Mono', ui-monospace, SFMono-Regular, monospace;

  /* Radius — one size up across the board for a softer, more premium feel */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 34px;
  --r-pill: 999px;

  /* Shadow — layered elevation (ambient + contact) instead of a single
     flat blur, plus tinted variants for colored "glow" elevation. */
  --shadow-xs:   0 1px 2px rgba(16,16,25,.05);
  --shadow-card: 0 1px 2px rgba(16,16,25,.05), 0 12px 26px -16px rgba(16,16,25,.18);
  --shadow-md:   0 4px 10px -4px rgba(16,16,25,.14), 0 16px 32px -20px rgba(16,16,25,.20);
  --shadow-pop:  0 4px 12px -4px rgba(70,32,196,.30), 0 18px 38px -14px var(--violet-glow);
  --shadow-glow-mango: 0 10px 28px -10px var(--mango-glow);
  --shadow-lift: 0 10px 20px -8px rgba(16,16,25,.16), 0 30px 54px -20px rgba(16,16,25,.30);
  --shadow-inset-hi: inset 0 1px 0 rgba(255,255,255,.22);

  /* Layout */
  --maxw: 480px;
  --tabbar-h: 72px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

@media (min-width: 720px) {
  :root { --maxw: 560px; }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: none;
}

/* Desktop/tablet chrome: the mobile shell floats as a considered app
   frame instead of stretching into a lonely centered column. Additive
   only — nothing below 720px changes. */
@media (min-width: 720px) {
  body { background: radial-gradient(120% 100% at 50% -10%, #E3E1F5 0%, var(--paper) 46%); }
}

h1, h2, h3, .display { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }

:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* Shared keyframes used across app.css / admin.css */
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes screen-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dash-flow { to { background-position: 56px 0; } }
@keyframes glow-pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--violet-glow); } 50% { box-shadow: 0 0 0 6px transparent; } }
@keyframes pop-in { 0% { transform: scale(.85); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }