/* ==========================================================================
   Design tokens
   Every colour here is sampled from (or built around) the Super Inu artwork:
   night-sky blues from the background, suit blue, cape red, emblem yellow,
   Shiba fur orange and cream.
   ========================================================================== */

:root {
  /* Night sky (artwork background) */
  --night-950: #050b22;
  --night-900: #081536;
  --night-800: #0d2153;
  --night-700: #142b60;
  --night-600: #1c3677;
  --dusk-500: #3b4382;

  /* Suit */
  --suit-400: #3f7cf0;
  --suit-500: #2160d8;
  --suit-600: #1447b0;
  --suit-700: #0c3286;

  /* Cape */
  --cape-400: #ff3b45;
  --cape-500: #e0232e;
  --cape-600: #b3141d;
  --cape-700: #6d0410;

  /* Emblem energy ("volt") */
  --volt-200: #fff3b0;
  --volt-300: #ffe27a;
  --volt-400: #ffd23f;
  --volt-500: #ffc21a;
  --volt-600: #f29a0e;

  /* Shiba */
  --fur-400: #eaa35f;
  --fur-500: #c9803f;
  --cream-50: #fffaf0;
  --cream-100: #fff4e0;
  --cream-200: #f6e6c8;

  /* Ink (comic outlines) */
  --ink: #060b22;
  --ink-soft: rgba(6, 11, 34, 0.72);

  /* Type */
  --font-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Layout */
  --container: 1320px;
  --gutter: clamp(1.1rem, 4vw, 2.5rem);
  --nav-h: 72px;
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;

  /* Comic hard shadows */
  --pop-sm: 3px 3px 0 var(--ink);
  --pop: 5px 5px 0 var(--ink);
  --pop-lg: 8px 8px 0 var(--ink);

  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (max-width: 720px) {
  :root {
    --nav-h: 62px;
    --pop: 4px 4px 0 var(--ink);
    --pop-lg: 6px 6px 0 var(--ink);
  }
}

/* Registered so tier metal colours can animate smoothly inside the Crate SVG. */
@property --metal-hi { syntax: "<color>"; inherits: true; initial-value: #9fb0d6; }
@property --metal-mid { syntax: "<color>"; inherits: true; initial-value: #5b6d9e; }
@property --metal-lo { syntax: "<color>"; inherits: true; initial-value: #2a3563; }