/* ============================================================
   CYBER RANGE — DESIGN PALETTE  (v1)
   ------------------------------------------------------------
   The single source of truth for colors, spacing, radius, and
   type across the LMS AND every future training module.

   HOW TO USE IN A NEW MODULE:
     <link rel="stylesheet" href="/assets/palette.css">
   then style with the variables, e.g.:
     background: var(--bg);
     color: var(--ink);
     border: 1px solid var(--line);
     accent: var(--accent);

   Keeping every module on these tokens means the whole range
   looks like one product. Change a value here -> it updates
   everywhere at once.
   ============================================================ */

:root {
  /* ---- CORE SURFACES (near-black, layered greys) ---- */
  --bg:          #0c0d0f;   /* app background (deepest) */
  --bg-elev:     #101216;   /* slightly raised background */
  --surface:     #16181c;   /* cards, panels */
  --surface-2:   #1d2025;   /* nested / hover surface */
  --surface-3:   #24272d;   /* highest raised surface */

  /* ---- LINES / BORDERS ---- */
  --line:        #25282e;   /* default border */
  --line-soft:   #1e2126;   /* subtle inner divider */
  --line-strong: #33373f;   /* emphasized border */

  /* ---- TEXT / INK ---- */
  --ink:         #e7e9ee;   /* primary text */
  --ink-dim:     #a7adb8;   /* secondary text */
  --ink-faint:   #6b7280;   /* muted labels, captions */
  --ink-ghost:   #4b515c;   /* disabled / placeholder */

  /* ---- SIGNAL ACCENT (restrained lime) ---- */
  --accent:       #c8ff3d;  /* primary action, active, highlight */
  --accent-dim:   #a4d92f;  /* gradient partner / pressed */
  --accent-ghost: rgba(200,255,61,.12);  /* tint bg behind accent */
  --on-accent:    #0f1400;  /* text/icons ON an accent fill */

  /* ---- STATUS COLORS ---- */
  --info:        #8ab4ff;   --info-ghost:   rgba(138,180,255,.14);
  --warn:        #e6b34a;   --warn-ghost:   rgba(230,179,74,.15);
  --danger:      #f0553f;   --danger-ghost: rgba(240,85,63,.13);
  --success:     #c8ff3d;   --success-ghost:rgba(200,255,61,.12);

  /* ---- TYPOGRAPHY ---- */
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;

  /* ---- RADIUS ---- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* ---- SPACING SCALE ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;

  /* ---- ELEVATION / SHADOW ---- */
  --shadow-sm: 0 4px 14px rgba(0,0,0,.30);
  --shadow-md: 0 12px 30px rgba(0,0,0,.40);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.55);

  /* ---- MOTION ---- */
  --ease: cubic-bezier(.2,.8,.2,1);
  --dur:  .18s;
}

/* ------------------------------------------------------------
   OPTIONAL BASE RESET — include if you want sane defaults.
   Modules that already have their own reset can ignore this.
   ------------------------------------------------------------ */
.cr-base, .cr-base * { box-sizing: border-box; }
.cr-base {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------
   REUSABLE PRIMITIVES — handy classes shared across modules.
   ------------------------------------------------------------ */
.cr-btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--sans); font-size: 14px; font-weight: 650;
  padding: 11px 18px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); cursor: pointer; transition: var(--dur) var(--ease);
}
.cr-btn:hover { border-color: var(--line-strong); }
.cr-btn--primary { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.cr-btn--primary:hover { filter: brightness(1.08); }
.cr-btn--ghost { background: transparent; }

.cr-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--s-5);
}

.cr-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .03em;
  padding: 4px 9px; border-radius: var(--r-sm); font-weight: 600;
}
.cr-chip--info   { background: var(--info-ghost);   color: var(--info); }
.cr-chip--warn   { background: var(--warn-ghost);   color: var(--warn); }
.cr-chip--danger { background: var(--danger-ghost); color: var(--danger); }
.cr-chip--muted  { background: var(--surface-2);    color: var(--ink-dim); }

.cr-input {
  width: 100%; background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 11px 14px;
  color: var(--ink); font-size: 14px; font-family: var(--sans);
}
.cr-input:focus { outline: none; border-color: var(--accent); }

/* accent link */
.cr-link { color: var(--accent); text-decoration: none; }
.cr-link:hover { text-decoration: underline; }