/* GENERATED — do not edit. Vendored from ct-theme-shared@049a7f2 by scripts/sync-theme.sh.
   Edit the source in ct-theme-shared and re-run the script. */
/* ============================================================================
   CTR Design Tokens  —  the single source of truth for colour, type, space,
   surface, and state across Ryan's Cybertown / VRML sites.

   Two layers:
     1. RAW CYBERTOWN PALETTE (--ct-*)  — the historical colours, preserved
        verbatim so existing pages that reference them keep working.
     2. SEMANTIC SYSTEM (--surface-*, --fg-*, --space-*, --text-*, --state-*)
        — the modern, role-based tokens new work should use.

   Never hard-code a hex/px in a component; reference a token. See
   CTR_10_DESIGN_PRINCIPLES.md and DESIGN_REVIEW_CHECKLIST.md.
   ============================================================================ */

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

:root {
  /* ---- 1. RAW CYBERTOWN PALETTE (historical, do not repurpose) ------------ */
  --ct-bg: #000000;
  --ct-text: rgb(208, 219, 247);
  --ct-green: #00ff00;         /* phosphor green — accent + classic links */
  --ct-green-active: #ffffff;
  --ct-green-alt: #00df00;
  --ct-yellow: #ffff00;
  --ct-map-label: #ffcc00;     /* amber archive accent */
  --ct-map-link: #99ff33;
  --ct-clock: #0891b2;         /* cyan status accent */
  --ct-chat-bg: #004d00;
  --ct-chat-bg-alt: #009200;
  --ct-chat-border: #001f00;
  --ct-btn-bg: #001829;
  --ct-btn-border: #8f9bb6;
  --ct-btn-text: #d0dbf7;

  /* ---- 2a. TYPE ---------------------------------------------------------- */
  --ct-font-body: Arial, Helvetica, sans-serif;                     /* long-form reading */
  --ct-font-display: 'Share Tech Mono', 'Courier New', monospace;   /* headings, labels, chrome */
  --ct-font-mono: 'Share Tech Mono', ui-monospace, 'Courier New', monospace; /* code / data */

  --text-xs: 0.75rem;    /* 12px — meta, captions */
  --text-sm: 0.8125rem;  /* 13px — dense UI, table cells */
  --text-base: 0.9375rem;/* 15px — body */
  --text-md: 1.0625rem;  /* 17px */
  --text-lg: 1.25rem;    /* 20px — section titles */
  --text-xl: 1.5rem;     /* 24px — page title */
  --text-2xl: 2rem;      /* 32px — hero */
  --leading-tight: 1.2;
  --leading-normal: 1.55;
  --tracking-label: 0.08em; /* uppercase display labels */

  /* ---- 2b. SPACE (4px base, one scale everywhere) ------------------------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ---- 2c. SURFACE HIERARCHY (dark, purpose-built) ----------------------- */
  /* Deep charcoal foundations, not pure black behind text — pure black is
     reserved for the VRML canvas and decorative chrome. Each step ~one panel up. */
  --surface-0: #0c0d10;   /* app background */
  --surface-1: #16181c;   /* primary panel */
  --surface-2: #1f2229;   /* raised panel / card */
  --surface-3: #2a2e37;   /* input, hover, header row */
  --surface-canvas: #000000; /* the 3D viewport — genuinely black */

  --fg: #dde1e6;          /* primary text */
  --fg-muted: #8a9099;    /* secondary text, meta */
  --fg-faint: #6d7580;    /* disabled text, placeholders — lifted for a more legible floor.
                             NOT for essential secondary content: use --fg-muted (AA on surface-1). */
  --fg-on-accent: #06210a;/* text on a phosphor-green fill */

  --border: #2c3038;      /* hairline between surfaces */
  --border-strong: #3c424d;
  --border-focus: #66e08a;

  /* ---- 2d. SEMANTIC / STATE COLOURS -------------------------------------- */
  /* Green means SUCCESS/authentic, not "every control". Distinct museum hues so
     status reads at a glance without neon everywhere. */
  --accent: #63d08a;      /* primary interactive accent (calmer than raw phosphor) */
  --accent-hover: #7fe0a0;
  --accent-quiet: rgba(99, 208, 138, 0.14);

  --success: #4caf7d;  --success-bg: rgba(76, 175, 125, 0.15);
  --warning: #e0a83e;  --warning-bg: rgba(224, 168, 62, 0.15);
  --danger:  #e05b5b;  --danger-bg:  rgba(224, 91, 91, 0.15);
  --info:    #38b6c9;  --info-bg:    rgba(56, 182, 201, 0.15);   /* cyan lineage of --ct-clock */
  --neutral: #8a9099;  --neutral-bg: rgba(138, 144, 153, 0.15);

  /* ---- 2e. RADIUS / SHADOW / RING ---------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 7px;
  --radius-lg: 12px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 4px 14px rgba(0, 0, 0, 0.45);
  --shadow-pop: 0 12px 40px rgba(0, 0, 0, 0.6);
  --focus-ring: 0 0 0 2px var(--surface-0), 0 0 0 4px var(--border-focus);

  /* ---- 2e-bis. CONTROL / BUTTON SYSTEM ----------------------------------- */
  /* The classic Cybertown right-nav button, modernized: dark navy-charcoal face,
     thin pale outline, ~5px corners, a HARD black offset shadow (not a blurred
     card shadow), and a pressed state that sinks into the shadow. Green is an
     accent border/text — never a big solid fill (see CTR_10_DESIGN_PRINCIPLES). */
  --ctrl-face: #191d27;          /* dark navy-charcoal control face */
  --ctrl-face-hover: #232937;    /* brightened face on hover */
  --ctrl-outline: #6f7889;       /* pale neutral 1px outline */
  --ctrl-radius: 5px;            /* the historical rounded-corner treatment */
  --ctrl-shadow: 2px 2px 0 #000;        /* hard black offset drop shadow */
  --ctrl-shadow-active: 1px 1px 0 #000; /* reduced offset when pressed */

  /* ---- 2f. MOTION -------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast: 90ms;
  --dur: 160ms;

  /* ---- 2g. DECORATIVE ---------------------------------------------------- */
  /* Optional scanline. Applied ONLY via .ct-bg-lines on chrome/decor surfaces,
     never behind body copy or form controls (see principle 10). */
  --ct-scanline-bg: linear-gradient(#000000 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 0), #323232;
  --z-modal: 1000;
  --z-toast: 1100;
}

/* Honour OS "reduce motion" everywhere that uses the tokens above. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; }
}

/* ---- Base element defaults ---------------------------------------------- */
body, html {
  background-color: var(--surface-0);
  color: var(--fg);
  font-family: var(--ct-font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

.ct-display, h1, h2, h3, nav, .ct-btn-ui, .ct-btn-ui-inline {
  font-family: var(--ct-font-display);
}

/* Base link = long-form/prose default: accent colour + underline. Deliberately a SINGLE
   `a` selector (specificity 0,0,1) — NOT `a:link, a:visited` (0,1,1) — so that any component
   class (.ct-btn, .ct-link, .card-link … all 0,1,0) can reliably remove the underline / recolour
   without an !important. The old compound selector out-ranked every component and forced a global
   underline onto buttons, cards, and nav (see mall CTR_THEME_COMPLIANCE_AUDIT RC-2). */
a { color: var(--accent); text-decoration: underline; }
a:hover { color: var(--accent-hover); }
a:active { color: var(--ct-green-active); }

/* Visible keyboard focus on every interactive element (principle 9). */
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* ---- Historical utility classes (unchanged, still referenced by old pages) */
.ct-text-green { color: var(--ct-green-alt); }
.ct-text-yellow { color: var(--ct-yellow); }
.ct-text-clock { color: var(--ct-clock); }

.ct-bg-lines { background: var(--ct-scanline-bg); background-size: auto 2px; }

.ct-btn-ui, .ct-btn-ui-inline {
  font-size: x-small;
  color: var(--ct-btn-text) !important;
  border: 1px solid var(--ct-btn-border);
  border-radius: 5px;
  letter-spacing: 1px;
  background-color: var(--ct-btn-bg);
  text-align: center;
  text-decoration: none !important;
  text-transform: uppercase;
}
.ct-btn-ui { box-shadow: -2px 3px black; margin: 3px auto; width: 112px; display: block; }
.ct-btn-ui-inline { box-shadow: 0px 1px black; padding: 2px 4px; display: inline-block; }

.ct-citymap {
  display: inline-block; position: relative;
  background: url('assets/mapcity.jpg') top center no-repeat;
  width: 520px; height: 300px;
}
.ct-citymap span { position: absolute; color: var(--ct-map-label); }
.ct-citymap a:link { text-decoration: underline; color: var(--ct-map-link); }
.ct-citymap a:visited { color: var(--ct-green); }
.ct-citymap a:active { color: var(--ct-green-active); }

.ct-menu {
  width: 155px; height: 250px;
  background: url('assets/finalcontx.gif') top center no-repeat;
  display: block; position: relative;
}
/* Nav/control-panel scanline backing (the classic Cybertown right-panel texture). Uses the
   approved back.webp. Keep it on SHORT nav chrome, never a full scrolling page — a scanline
   tiled behind a scrolling viewport strobes. */
.ct-nav-bg { background: var(--ct-bg) url('assets/back.webp') repeat; }