/* ==========================================================================
   Idle Junkyard Empire 3D — "Hazard Yard" design tokens (R16).
   Single source of truth for colour, type, shape, motion, z-layers and safe
   areas. Components live in hazard.css; world-anchored bits in overlay.css.
   Fonts are plain .woff2 files (latin subsets, ~40 KB total, OFL).
   ========================================================================== */
@font-face {
  font-family: 'Lilita One'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../../assets/fonts/LilitaOne-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Fredoka'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('../../assets/fonts/Fredoka-latin.woff2') format('woff2');
}

:root {
  /* --- Brand / hazard ---------------------------------------------------- */
  --hz-yellow: #FFC21A;   --hz-yellow-lt: #FFE07A;  --hz-yellow-dk: #C98A00;
  --hz-orange: #FF8A1F;   --hz-orange-dk: #C2560A;
  --rust:      #B9542B;   --rust-dk: #7A3418;
  --hz-black:  #1A1D22;
  --stripe: repeating-linear-gradient(-45deg, var(--hz-yellow) 0 12px, var(--hz-black) 12px 24px);

  /* --- Steel (HUD chrome, headers) -------------------------------------- */
  --steel-950: #12171D; --steel-900: #1E2630; --steel-800: #2A3441;
  --steel-700: #3A4655; --steel-500: #6B7A8C; --steel-300: #B8C3CF; --steel-100: #E7ECF1;

  /* --- Paper (panel bodies) --------------------------------------------- */
  --paper: #FFF4DC; --paper-2: #F8E7C0; --paper-line: #E2C48C; --card: #FFFFFF;

  /* --- Ink ---------------------------------------------------------------- */
  --ink: #2B2118; --ink-2: #6E5B45; --ink-inv: #FFFFFF; --outline: #12171D;

  /* --- Semantics (NEVER reuse for something else) ------------------------- */
  --buy: #3CC74E;   --buy-dk: #1F8A2E;   --buy-lt: #8CF55B;   /* buy / affordable / confirm / income */
  --idle: #A9B4BF;  --idle-dk: #6F7B87;                        /* not yet affordable / disabled */
  --danger: #EC4136; --danger-dk: #9E1F1B;                     /* destructive only, always behind a confirm */
  --info: #2F8FE8;  --info-dk: #1A5FA6;                        /* neutral navigation, selected tab */
  --gold: #FFD23F;  --gold-dk: #B7791F;                        /* money, stars, rewards */
  --badge: #FF3B30;                                            /* notification dot */
  --warn: #FF8A1F;                                             /* timer low, warnings */

  /* --- Type --------------------------------------------------------------- */
  --font-display: 'Lilita One', 'Fredoka', 'Arial Rounded MT Bold', 'Trebuchet MS', system-ui, sans-serif;
  --font-body: 'Fredoka', 'Nunito', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --fs-xs: 13px; --fs-sm: 15px; --fs-md: 17px; --fs-lg: 21px; --fs-xl: 28px; --fs-xxl: 40px; --fs-hero: 56px;
  /* outlined display text (white with dark outline, game-style) */
  --txt-outline: 0 2px 0 var(--outline), 2px 0 0 var(--outline), -2px 0 0 var(--outline), 0 -2px 0 var(--outline),
                 1.5px 1.5px 0 var(--outline), -1.5px 1.5px 0 var(--outline), 1.5px -1.5px 0 var(--outline), -1.5px -1.5px 0 var(--outline),
                 0 4px 0 var(--outline);

  /* --- Shape -------------------------------------------------------------- */
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-pill: 999px;
  --bw: 3px;                         /* outline width for "physical" pieces */
  --lift: 5px;                       /* bottom-shadow depth of 3D buttons   */
  --tap: 48px;                       /* minimum touch target                 */

  /* --- Motion ------------------------------------------------------------- */
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in: cubic-bezier(.55, 0, .75, .4);
  --t-press: 80ms; --t-open: 380ms; --t-close: 200ms;

  /* --- Z layers (single source of truth) ---------------------------------- */
  --z-world: 0;        /* 3D canvas / screenshot                             */
  --z-world-ui: 10;    /* in-world signs, floating $ numbers, worker bubbles */
  --z-hud: 20;         /* money, day, rail, upgrades button                  */
  --z-notify: 30;      /* notification column: order slot + toasts           */
  --z-coach: 40;       /* first-time hints (hand + bubble)                   */
  --z-scrim: 50;       /* dim behind menus                                   */
  --z-menu: 60;        /* panels / bottom sheets                             */
  --z-dialog: 70;      /* confirm dialogs (above menus)                      */
  --z-fx: 80;          /* coin fly, confetti                                 */
  --z-system: 90;      /* "Saved" chip, connection / portal overlays         */

  /* --- Safe areas (env() on device; --sim-* set by the mockup frame) ---- */
  --sa-t: max(env(safe-area-inset-top, 0px), var(--sim-sa-t, 0px));
  --sa-r: max(env(safe-area-inset-right, 0px), var(--sim-sa-r, 0px));
  --sa-b: max(env(safe-area-inset-bottom, 0px), var(--sim-sa-b, 0px));
  --sa-l: max(env(safe-area-inset-left, 0px), var(--sim-sa-l, 0px));
  --edge: 12px;        /* HUD margin from safe edge */
}

/* --- Legacy glass (dev-only surfaces: cheat panel, ?fps=1 overlay). Scoped
   so the light "--ink" of the old theme never leaks into the paper UI. --- */
.glass {
  --ink: #EAF2F8; --ink-dim: #BDC3C7; --good: #2ECC71; --bad: #E74C3C; --accent: #3498DB;
  background: rgba(18, 29, 43, 0.86);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  border: 1.5px solid rgba(127, 179, 213, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 5px 14px rgba(0, 0, 0, 0.30);
  color: #EAF2F8;
}
:root { --spring-open: var(--spring); }