/* =========================================================
   variables.css — design tokens
   ========================================================= */

/*
 * Metropolis (optional premium upgrade)
 * To use it: download the .woff2 files from
 *   https://github.com/chrismsimpson/Metropolis/releases
 * drop them into /assets/fonts/, then uncomment the @font-face
 * blocks below and remove 'Inter' from --font-display.
 *
 * @font-face { font-family:'Metropolis'; src:url('../assets/fonts/Metropolis-Regular.woff2')   format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
 * @font-face { font-family:'Metropolis'; src:url('../assets/fonts/Metropolis-Medium.woff2')    format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
 * @font-face { font-family:'Metropolis'; src:url('../assets/fonts/Metropolis-SemiBold.woff2')  format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
 * @font-face { font-family:'Metropolis'; src:url('../assets/fonts/Metropolis-Bold.woff2')      format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
 * @font-face { font-family:'Metropolis'; src:url('../assets/fonts/Metropolis-ExtraBold.woff2') format('woff2'); font-weight:800; font-style:normal; font-display:swap; }
 * @font-face { font-family:'Metropolis'; src:url('../assets/fonts/Metropolis-Black.woff2')     format('woff2'); font-weight:900; font-style:normal; font-display:swap; }
 */

:root {
  /* ----- COLORS ----- */
  --bg-primary:   #0a0a0a;
  --bg-secondary: #111111;
  --bg-deeper:    #050505;
  --bg-card:      #161616;
  --bg-card-hover:#1c1c1c;
  --bg-device:    #131313;
  --bg-device-screen: #0c0c0c;
  --border:       #222222;
  --border-light: #2a2a2a;

  --accent:       #f5b921;
  --accent-soft:  #ffd34f;
  --accent-glow:  rgba(245, 185, 33, 0.35);

  --color-error:   #f87171;
  --color-success: #4ade80;

  --text-primary:   #ffffff;
  --text-secondary: #b8b8b8;
  --text-muted:     #8a8a8a;
  --text-dim:       #797979; /* raised from #5a5a5a (~2.9:1) → ~4.55:1 on --bg-primary, passes WCAG AA */

  /* ----- TYPOGRAPHY ----- */
  --font-display: 'Metropolis', 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  /* ^ Metropolis loads from /assets/fonts/ if present; falls through to Inter otherwise */
  --font-body:    'Inter', 'Helvetica Neue', system-ui, sans-serif;

  /* ----- EASING ----- */
  --ease-out-expo:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart:    cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);

  /* ----- LAYOUT ----- */
  --container: 1320rem;
  --gutter:    clamp(20rem, 4vw, 60rem);

  /* ----- RADII ----- */
  --r-sm:   8rem;
  --r-md:  14rem;
  --r-lg:  22rem;
  --r-pill: 999rem;

  /* ----- Z-INDEXES ----- */
  --z-cursor:    9999;
  --z-preloader: 9998;
  --z-overlay:    900;
  --z-header:     800;
}