/* RustyScape design tokens - the Social Scape system. Linked by every site page
   AND by the admin panel (which never links style.css). Spec:
   docs/design/SOCIALSCAPE-DESIGN-SPEC.md, docs/design/reskin/RESKIN-SPEC.md. */

/* --- display face fallback ---------------------------------------------------
   Orbitron is a WIDE geometric face. Verdana is the widest face present on
   every platform, so the swap moves less than Arial would; size-adjust trims
   the rest. Verify by throttling the network in devtools: the store h1 must
   occupy the same number of lines at 1280px before and after the swap. ------ */
@font-face {
  font-family: "Orbitron Fallback";
  src: local("Verdana"), local("DejaVu Sans");
  font-weight: 700 900;
  size-adjust: 94%;
  ascent-override: 100%;
  descent-override: 25%;
  line-gap-override: 0%;
}

/* --- SINGLE COMMITTED THEME -----------------------------------------------
   Dark only, deliberately. This is a game server's shop front and it must look
   the same for every visitor. Every colour is painted explicitly so the page
   never borrows the host's ground. ------------------------------------------- */
:root {
  color-scheme: dark;

  /* ---- core semantic ------------------------------------------------------- */
  --background:             213 29% 6%;
  --foreground:             196 23% 93%;
  --card:                   205 27% 11%;
  --card-foreground:        196 23% 93%;
  --popover:                203 23% 15%;
  --popover-foreground:     196 23% 93%;
  --primary:                178 66% 53%;
  --primary-foreground:     192 39% 6%;     /* near-black on cyan. NEVER white. */
  --secondary:              204 22% 16%;
  --secondary-foreground:   196 23% 93%;
  --muted:                  204 20% 13%;    /* a SURFACE (inset strips, thead, chips) */
  --muted-foreground:       199 13% 53%;    /* 11px/800 labels ONLY - see --foreground-2 */
  --accent:                 189 28% 16%;    /* a SURFACE (hover rows, ghost-button hover) */
  --accent-foreground:      196 23% 93%;
  --destructive:            0 69% 60%;      /* fills, borders, 3px rules - never a sentence */
  --destructive-foreground: 192 39% 6%;     /* near-black: white on --destructive is 3.29:1 */
  --border:                 200 20% 22%;    /* the hairline. Decorative only (1.49:1 on card). */
  --input:                  200 13% 45%;    /* field / outline-button boundary at >=3:1 */
  --ring:                   178 66% 53%;
  --radius:                 0.625rem;

  /* ---- flair --------------------------------------------------------------- */
  --gold:                   47 62% 57%;     /* prices, rank, raid taper, hard rules */
  --cyber-blue:             200 70% 50%;    /* store: Shop Points section accent */

  /* ---- presence / status. Status only, never decoration. ------------------- */
  --online:                 143 53% 53%;
  --away:                   30 86% 59%;
  --busy:                   0 69% 60%;
  --offline:                207 7% 51%;

  /* ---- text tones ---------------------------------------------------------- */
  --foreground-2:           199 15% 64%;    /* readable secondary text: >=5.5:1 on every surface incl. popover */
  --destructive-text:       0 85% 74%;      /* error COPY: 6.92:1 on card */
  --discord:                235 86% 65%;    /* third-party mark. GLYPH FILL ONLY - never text, border or surface */

  /* ---- gradients, glass, motion -------------------------------------------- */
  --gradient-primary: linear-gradient(135deg, hsl(178 66% 53%), hsl(198 62% 44%));
  --gradient-cyber:   linear-gradient(90deg,  hsl(178 70% 55%), hsl(195 55% 42%));
  --gradient-neon:    linear-gradient(45deg,  hsl(178 66% 53%), hsl(190 55% 48%));
  --gradient-dark:    linear-gradient(180deg, hsl(213 29% 6%),  hsl(205 27% 9%));
  --glass-bg:         rgba(22, 30, 37, 0.72);
  --glass-border:     rgba(86, 110, 120, 0.32);
  --glass-shadow:     0 8px 32px rgba(0, 0, 0, 0.35);
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease:             cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:         150ms;
  --dur:              200ms;
  --dur-slow:         300ms;

  /* ---- radius scale: 6 / 8 / 10 / 14 --------------------------------------- */
  --r-xs: 4px;              /* tiny squares only: swatches, 22px avatars, item counts */
  --r-sm: 6px;              /* badges, buttons, inputs, chips, inset strips */
  --r-md: 8px;              /* the card primitive, table wrap, details      */
  --r-lg: var(--radius);    /* 10px: floating panels - cart, modals, funnels */
  --r-xl: 14px;             /* the hero frame only                          */
  /* 50% for step numerals and the product icon disc; 999px for the cart FAB ONLY. */

  /* ---- shadows, darkened for a 6% ground (a 5% shadow is invisible) -------- */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .25);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .45), 0 8px 10px -6px rgb(0 0 0 / .45);

  /* ---- type ---------------------------------------------------------------- */
  --f-display: "Orbitron", "Orbitron Fallback", Verdana, "DejaVu Sans", Geneva,
               ui-sans-serif, system-ui, sans-serif;
  --f-body:    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --f-mono:    ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo,
               Consolas, monospace;
}

/* Section label: 11px, heavy, wide-tracked, uppercase, muted. .label is the
   class the pages already carry. */
.label, .label-caps {
  font-family: var(--f-body); font-size: 11px; font-weight: 800; line-height: 1.3;
  letter-spacing: .14em; text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}

/* The standard interactive lift for list rows. Properties named, never `all`. */
.hover-lift {
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.hover-lift:hover {
  transform: translateY(-3px);
  border-color: hsl(var(--primary) / .5);
  background-color: hsl(var(--popover));
  box-shadow: 0 0 24px hsl(var(--primary) / .12);
}

/* Gradient text: the visible h1 on the secondary pages and NOWHERE else -
   never body text, never under 24px, never in a card. */
.text-gradient {
  background: var(--gradient-neon);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}