/* ============================================================================
   CYBERTOWN MALL — design tokens.

   Structure follows ../../../ct-theme-shared/tokens.css (surface ramp, 4px
   space scale, --text-* ladder, semantic state tokens) so anything written for
   one estate site reads correctly in the other.

   ---------------------------------------------------------------------------
   THE PALETTE IS MEASURED OFF THE MALL, NOT CHOSEN.

   Originally sampled from ~/Pictures/ct/upscaled/places/mall.png — Ryan's
   upscale of ctr/spa/assets/img/place/mall/shopping.jpg — which quantised to
   violet-black ground, lilac lit surfaces, indigo-violet architecture, a
   violet-blue glow and amber (#E0A641) on the FOOD COURT sign.

   RE-SAMPLED 2026-08-20 against the hero's replacement, docs/images/mall.png,
   an authentic screenshot of the Mall interior. Quantised to 12, dominant
   first, the new master gives:

       #2E1407  613025px   dark brown — empty world background above the room
       #A79FBC  425549px   lilac — lit structural surfaces
       #7B7193  418605px   lilac, shaded
       #575674  367362px   violet-grey — the tiled floor in shadow
       #2D015E  256139px   deep violet — the architecture
       #110035  248093px   violet-black — unlit ceiling, floor shadow

   The values below were NOT changed, because the re-sample vindicates them:
   violet-black ground, lilac lit surfaces and indigo-violet architecture are if
   anything stronger in the new master than the old one. Two notes on what did
   move, neither of which changes a token:

     * Amber keeps a referent, but a different one. The FOOD COURT sign is not
       in this frame; the Mall's orange architectural trim is, at a mean of
       #A65905 and a brightest lit plate of #FFC15B. --gold still points at
       something the room actually contains.

     * Green and cyan are NOT in this frame at all. They never depended on the
       hero: they come from the shop plates in
       ctr/spa/assets/worlds/shopping/images/, which ship a green idle plate and
       a cyan `_x` rollover plate and are staged unchanged by
       build/stage-assets.py. The signage colours therefore still have a live
       source in the Mall's own art.

   So the Mall's colour language is unchanged: violet-black ground,
   indigo-violet architecture, acid-green signage, cyan on rollover, amber for
   institutional signs. If the hero image is ever replaced again, re-sample
   rather than assuming these still hold.

   ---------------------------------------------------------------------------
   EACH COLOUR HAS ONE JOB. This is the discipline that separates a period
   palette from a neon costume, and it is inherited from the previous pass:

     gold      institutional identity — the seal, the masthead rule, nothing else
     lime      the Mall is live — Enter, in stock, active status
     cyan      navigation and interaction
     magenta   new or limited stock
     amber     historical / archive material
     indigo    atmosphere and district structure, never a text background

   Every foreground/background pair below is measured by
   mallsite/build/check-contrast.mjs, which fails under WCAG 2.2 AA. Adding a
   colour without adding it to that script is itself reported as an error.
   ============================================================================ */

@font-face {
  font-family: 'Share Tech Mono';
  src: url('../fonts/ShareTechMono-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* ---- TYPE --------------------------------------------------------------
     Two faces. Share Tech Mono is the estate's vendored display/metadata face
     (ct-mall-archive, cybertown-wiki-skin and cybertown-news all use it), it is
     OFL, and uppercased + letterspaced + green it reads as Mall signage — which
     is where the period character comes from, not from a font whose licence
     nobody can prove. Body copy is the system sans stack: zero bytes, renders
     before any font request resolves. Monospace never carries long-form
     reading (CTR design principle 4). */
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, Helvetica, sans-serif;
  --font-mono: 'Share Tech Mono', ui-monospace, 'Courier New', monospace;

  /* The floor is 13px and it is a low-vision accommodation for Morning.star,
     not a style preference. Nothing in this stylesheet may go below --text-xs,
     and a fit problem is solved with layout, never with type size. */
  --text-xs: 0.8125rem;   /* 13px — the hard floor: badges, dense meta */
  --text-sm: 0.875rem;    /* 14px — controls, table cells */
  --text-base: 0.9375rem; /* 15px — body */
  --text-md: 1.0625rem;   /* 17px — lead paragraphs */
  --text-lg: 1.375rem;    /* 22px — card and section titles */
  --text-xl: 1.75rem;     /* 28px — page titles */
  --text-2xl: 2.25rem;    /* 36px — section leads */
  /* Clamped, not vw-scaled: the brief forbids typography that tracks viewport
     width directly, and the lower bound is what keeps the wordmark readable at
     360px. */
  --text-hero: clamp(2.5rem, 6vw, 4.5rem);

  --leading-tight: 1.12;
  --leading-normal: 1.6;
  --tracking-label: 0.14em;
  --tracking-sign: 0.22em;   /* signage: MALL DIRECTORY, section markers */

  /* ---- SPACE (4px base) --------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---- SURFACE RAMP -------------------------------------------------------
     Violet-black, not navy. The previous pass's #070a14 ramp read as a blue
     admin dashboard; these carry the hero image's own cast so the page and the
     photograph belong to the same room. */
  --surface-0: #08050D;      /* page */
  --surface-1: #0F0A1A;      /* panel, drawer */
  --surface-2: #17102A;      /* tile, card */
  --surface-3: #211838;      /* input, hover, header row */
  --surface-sunk: #050309;   /* footer, code */
  --surface-indigo: #1C1440; /* the measured architecture violet — atmosphere
                                and district fills. Body copy is allowed on it
                                and is measured, but it is never used for long
                                reading. */

  --fg: #EFEBF7;         /* 16.4:1 on --surface-0 */
  --fg-muted: #B6AECD;   /* carries real content, so it clears 4.5 everywhere */
  /* The floor, for placeholders and disabled text only. Measured on the input
     surface, not the page — that is where placeholders actually live, and it
     is the tighter of the two. */
  --fg-faint: #948CAE;
  --fg-on-gold: #14100A;
  --fg-on-cyan: #04121A;
  --fg-on-lime: #05140A;
  --fg-on-magenta: #1A0416;

  /* --border is a hairline between two surfaces and carries no information;
     WCAG sets no minimum for that, and lifting it turns every tile into a drawn
     box. --border-strong outlines controls, which must be perceivable, so it
     clears 3:1 on every surface it sits on. */
  --border: #2A1F4A;
  --border-strong: #6C60A8;

  /* ---- ROLE COLOURS ------------------------------------------------------- */
  --gold: #E3BD6B;          /* institutional identity */
  --gold-bright: #F5D98F;
  --gold-quiet: rgba(227, 189, 107, 0.12);

  --cyan: #6FD9F2;          /* navigation and interaction */
  --cyan-hover: #9AE8FA;
  --cyan-quiet: rgba(111, 217, 242, 0.13);

  --magenta: #F58AD8;       /* new / limited, nothing else */
  --magenta-quiet: rgba(245, 138, 216, 0.14);

  --lime: #5BE87A;          /* the Mall is live — Enter, in stock, active */
  --lime-quiet: rgba(91, 232, 122, 0.14);

  --amber: #E8B64F;         /* historical / archive material */
  --amber-quiet: rgba(232, 182, 79, 0.13);

  --neutral: #B6AECD;
  --neutral-quiet: rgba(182, 174, 205, 0.12);

  /* ---- RADIUS / SHADOW / FOCUS --------------------------------------------
     Radii stay small. A 1999 virtual place is built from flat plates and
     hairlines; 2.5rem pillow-corners would be a 2020s SaaS tell. */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.6);
  --shadow-2: 0 10px 34px rgba(0, 0, 0, 0.6);

  /* Two rings so focus stays visible on both dark and gold fills. */
  --focus-ring: 0 0 0 2px var(--surface-0), 0 0 0 4px var(--cyan);
  --focus-ring-on-light: 0 0 0 2px var(--fg-on-gold), 0 0 0 4px var(--surface-0);

  --measure: 68ch;         /* long-form line length */
  --page: 1280px;          /* content column */
  --page-wide: 1560px;     /* full-bleed sections that still need a bound */

  /* One duration for the three motions the design allows. */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 320ms;
  --dur-quick: 140ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur: 1ms;
    --dur-quick: 1ms;
  }
}