/* =========================
   RBX ROOT — single source of truth
   (tokens + typography + spacing)
========================= */

:root{
  /* ---------- Readable brand tokens (optional) ---------- */
  --rbx-primary: #0d6efd;
  --rbx-primary-700: #0b5ed7;
  --rbx-accent: #ff3d7f;

  /* Surfaces / text (optional readable aliases) */
  --rbx-bg: #f7f8fa;
  --rbx-surface: #ffffff;
  --rbx-surface-2: rgba(255,255,255,.75);
  --rbx-text: #111827;
  --rbx-text-muted: rgba(17,24,39,.55);

  /* Layout */
  --rbx-radius: 14px;
  --rbx-radius-sm: 10px;
  --rbx-gap: 24px;
  --rbx-gap-sm: 12px;
  --rbx-focus-ring: 0 0 0 4px rgba(13,110,253,.16);

  /* ---------- Project palette (from roblox-home.css) ---------- */
  --rbx-c001: rgba(13, 110, 253, 0.08);
  --rbx-c002: rgba(13, 110, 253, 0.25);
  --rbx-c003: rgba(247, 248, 250, .75);
  --rbx-c004: rgba(17, 24, 39, 0.08);
  --rbx-c005: rgba(17, 24, 39, 0.14);
  --rbx-c006: rgba(17, 24, 39, 0.55);
  --rbx-c007: rgba(255,255,255,0.00);
  --rbx-c008: rgba(255,255,255,0.10);
  --rbx-c009: rgba(255,255,255,0.22);
  --rbx-c010: rgba(255,255,255,0.55);
  --rbx-c011: rgba(255,255,255,0.92);
  --rbx-c012: rgba(46, 125, 50, .12);
  --rbx-c013: rgba(46, 125, 50, .25);
  --rbx-c014: rgba(13,110,253,0.10);
  --rbx-c015: rgba(13,110,253,0.14);
  --rbx-c016: rgba(13,110,253,0.16);
  --rbx-c017: rgba(13,110,253,0.18);
  --rbx-c018: rgba(13,110,253,0.45);
  --rbx-c019: rgba(22,119,255,0.18);
  --rbx-c020: rgba(255,255,255,.14);
  --rbx-c021: rgba(255,255,255,.92);
  --rbx-c022: rgba(255,255,255,.98);
  --rbx-c023: rgba(255,255,255,0.6);
  --rbx-c024: rgba(13,110,253,.06);
  --rbx-c025: rgba(13,110,253,.10);
  --rbx-c026: rgba(13,110,253,.12);
  --rbx-c027: rgba(13,110,253,.14);
  --rbx-c028: rgba(13,110,253,.18);
  --rbx-c029: rgba(13,110,253,.22);
  --rbx-c030: rgba(13,110,253,.25);
  --rbx-c031: rgba(13,110,253,.35);
  --rbx-c032: rgba(13,110,253,.45);
  --rbx-c033: rgba(13,110,253,.55);
  --rbx-c034: rgba(255,255,255,.8);
  --rbx-c035: rgba(255,255,255,.9);
  --rbx-c036: rgba(31,111,255,.10);
  --rbx-c037: rgba(31,111,255,.12);
  --rbx-c038: rgba(31,111,255,.18);
  --rbx-c039: rgba(0, 0, 0, 0.06);
  --rbx-c040: rgba(0, 0, 0, 0.08);
  --rbx-c041: rgba(0, 0, 0, 0.75);
  --rbx-c042: rgba(17,24,39,0.08);
  --rbx-c043: rgba(0,0,0,0.04);
  --rbx-c044: rgba(0,0,0,0.06);
  --rbx-c045: rgba(0,0,0,0.08);
  --rbx-c046: rgba(0,0,0,0.10);
  --rbx-c047: rgba(0,0,0,0.18);
  --rbx-c048: rgba(0,0,0,0.22);
  --rbx-c049: rgba(0,0,0,0.25);
  --rbx-c050: rgba(0,0,0,0.30);
  --rbx-c051: rgba(0,0,0,0.35);
  --rbx-c052: rgba(0,0,0,0.55);
  --rbx-c053: rgba(0,0,0,0.65);
  --rbx-c054: rgba(0,0,0,.02);
  --rbx-c055: rgba(0,0,0,.03);
  --rbx-c056: rgba(0,0,0,.04);
  --rbx-c057: rgba(0,0,0,.05);
  --rbx-c058: rgba(0,0,0,.06);
  --rbx-c059: rgba(0,0,0,.07);
  --rbx-c060: rgba(0,0,0,.08);
  --rbx-c061: rgba(0,0,0,.10);
  --rbx-c062: rgba(0,0,0,.12);
  --rbx-c063: rgba(0,0,0,.14);
  --rbx-c064: rgba(0,0,0,.15);
  --rbx-c065: rgba(0,0,0,.18);
  --rbx-c066: rgba(0,0,0,.25);
  --rbx-c067: rgba(0,0,0,.35);
  --rbx-c068: rgba(0,0,0,.55);
  --rbx-c069: rgba(0,0,0,.65);
  --rbx-c070: rgba(0,0,0,.70);
  --rbx-c071: rgba(0,0,0,.75);
  --rbx-c072: rgba(0,0,0,.78);
  --rbx-c073: rgba(0,0,0,.82);
  --rbx-c074: rgba(0,0,0,.90);
  --rbx-c075: rgba(0,0,0,0.0);
  --rbx-c076: rgba(0,0,0,0.9);
  --rbx-c077: rgba(0,0,0,.2);
  --rbx-c078: transparent;
  --rbx-c079: #0b5ed7;
  --rbx-c080: #0d6efd;
  --rbx-c081: #111827;
  --rbx-c082: #1677ff;
  --rbx-c083: #1a73e8;
  --rbx-c084: #1e6fff;
  --rbx-c085: #1f2937;
  --rbx-c086: #1f6fff; /* IMPORTANT: keep consistent (stars etc.) */
  --rbx-c087: #22c55e;
  --rbx-c088: #2e7d32;
  --rbx-c089: #374151;
  --rbx-c090: #3b82f6;
  --rbx-c091: #3c4b52;
  --rbx-c092: #4b5563;
  --rbx-c093: #667085;
  --rbx-c094: #6b7280;
  --rbx-c095: #8a8f98;
  --rbx-c096: #8e9aaa;
  --rbx-c097: #a855f7;
  --rbx-c098: #c9d3dc;
  --rbx-c099: #d7dee3;
  --rbx-c100: #dbeafe;
  --rbx-c101: #e32f34;
  --rbx-c102: #e3e7ef;
  --rbx-c103: #e6e9ee;
  --rbx-c104: #e6ebf1;
  --rbx-c105: #e8edf5;
  --rbx-c106: #e8f0ff;
  --rbx-c107: #e9eaee;
  --rbx-c108: #eef1f5;
  --rbx-c109: #ef4444;
  --rbx-c110: #f2f3f5;
  --rbx-c111: #f2f6ff;
  --rbx-c112: #f3fbf5;
  --rbx-c113: #f4f6f9;
  --rbx-c114: #f5b301;
  --rbx-c115: #f5f7fb;
  --rbx-c116: #f6f7fb;
  --rbx-c117: #f7f9fc;
  --rbx-c118: #f8fafc;
  --rbx-c119: #ff3b3f;
  --rbx-c120: #ffffff;
  --rbx-c121: black;
  --rbx-c122: white;
  --rbx-c123: #111;
  --rbx-c124: #222;
  --rbx-c125: #444;
  --rbx-c126: #555;
  --rbx-c127: #acc;
  --rbx-c128: #fff;
  --rbx-c129: #f59e0b;
  --rbx-c130: #64748b;
  --rbx-c131: #800080;

  /* ---------- Typography (kept, single place) ---------- */
  --font-size-h1: 32px;
  --font-size-h2: 28px;
  --font-size-h3: 24px;
  --font-size-h4: 21px;
  --font-size-h5: 18px;
  --font-size-h6: 16px;
  --line-height-h: 1.2;
  --letter-spacing-h: 0;
  --font-size-p: 14px;
  --line-height-p: 1.35;
}

/* ---------- Spacing scale (responsive) ---------- */
@media (max-width: 992px){
  :root{
    --space-1: 3px;
    --space-2x: 6px;
    --space-4x: 12px;
    --space-8x: 24px;
    --space-1-: -3px;
    --space-2x-: -6px;
    --space-4x-: -12px;
    --space-8x-: -24px;
  }
}

@media (min-width: 993px) and (max-width: 1500px){
  :root{
    --space-1: 4px;
    --space-2x: 8px;
    --space-4x: 16px;
    --space-8x: 32px;
    --space-1-: -4px;
    --space-2x-: -8px;
    --space-4x-: -16px;
    --space-8x-: -32px;
  }
}

@media (min-width: 1501px){
  :root{
    --space-1: 7px;
    --space-2x: 14px;
    --space-4x: 28px;
    --space-8x: 56px;
    --space-16x: 112px;
    --space-1-: -7px;
    --space-2x-: -14px;
    --space-4x-: -28px;
    --space-8x-: -56px;
    --space-16x-: -112px;

    --font-size-h1: 40px;
    --font-size-h2: 36px;
    --font-size-h3: 32px;
    --font-size-h4: 28px;
    --font-size-h5: 24px;
    --font-size-h6: 20px;
    --font-size-p: 16px;
  }
}