@font-face {
  font-family: 'CC Emoji';
  src: local('Apple Color Emoji'), local('Segoe UI Emoji'), local('Noto Color Emoji');
  unicode-range: U+200D, U+20E3, U+231A-231B, U+23E9-23FA, U+24C2, U+25B6, U+25C0, U+25FB-25FE, U+2600-27BF, U+2B05-2B07, U+2B1B-2B1C, U+2B50, U+2B55, U+3030, U+303D, U+3297, U+3299, U+FE0F, U+1F000-1FAFF;
  size-adjust: 72%;
}
@font-face {
  font-family: 'RuneScape UF';
  src: url('/static/fonts/runescape_uf.woff2?v=2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'RuneScape Plain 11';
  src: url('/static/fonts/runescape_plain_11.woff2?v=2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Akira Expanded';
  src: url('/static/fonts/akira_expanded.woff2?v=2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Alagard';
  src: url('/static/fonts/alagard.woff2?v=2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Inter';
  src: url('/static/fonts/inter-400.woff2?v=2') format('woff2');
  font-weight: 100 500;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Inter';
  src: url('/static/fonts/inter-600.woff2?v=2') format('woff2');
  font-weight: 600 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/static/fonts/jetbrains-mono-400.woff2?v=2') format('woff2');
  font-weight: 100 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/static/fonts/jetbrains-mono-500.woff2?v=2') format('woff2');
  font-weight: 500 900;
  font-style: normal;
  font-display: block;
}

:root {
  --bg: #0b0c13;
  --surface: #141622;
  --surface-2: #1c1f2b;
  --surface-3: #252939;
  --border: #262b3a;
  --border-strong: #363c4f;

  --text: #eceef4;
  --text-dim: #b8bbca;
  --text-muted: #a3a6b8;

  --accent: #6478ff;
  --accent-hover: #8090ff;
  --accent-dim: #4a5ad4;
  --accent-alt: #b8b8c8;

  --ok: #4ade80;
  --warning: #fbbf24;
  --danger: #f87171;

  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 5px;

  --well: linear-gradient(180deg, #0a0c15 0%, #0e1119 100%);
  --well-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    inset 0 8px 16px -10px rgba(0, 0, 0, 0.75),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5);
  --well-focus:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 8px 16px -10px rgba(0, 0, 0, 0.55),
    0 0 0 3px rgba(100, 120, 255, 0.18),
    0 2px 10px -2px rgba(100, 120, 255, 0.25);

  --carved: linear-gradient(180deg, #24252f 0%, #1d1e27 100%);
  --carved-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.6),
    inset 0 1px 2px rgba(0, 0, 0, 0.55),
    0 1px 0 rgba(255, 255, 255, 0.06);
  --carved-text: 1px 1px 0 #000, 0 2px 6px rgba(0, 0, 0, 0.8);

  --raised: linear-gradient(180deg, #363846 0%, #2a2c38 100%);
  --raised-hover: linear-gradient(180deg, #3e404f 0%, #30323f 100%);
  --raised-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 4px 10px -4px rgba(0, 0, 0, 0.8);
  --raised-primary: linear-gradient(180deg, #6170e6 0%, #4552c4 100%);
  --raised-primary-hover: linear-gradient(180deg, #6e7cf0 0%, #5160d6 100%);
  --raised-primary-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15),
    0 6px 14px -6px rgba(40, 50, 160, 0.9);
  --raised-text: 1px 1px 0 #000;
  --pressed-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.45);

  --panel-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(0, 0, 0, 0.3),
    0 4px 14px -6px rgba(0, 0, 0, 0.55),
    0 32px 80px -28px rgba(0, 0, 0, 0.85);
  --card-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(0, 0, 0, 0.42),
    0 2px 3px rgba(0, 0, 0, 0.5),
    0 6px 14px -6px rgba(0, 0, 0, 0.7),
    0 18px 40px -22px rgba(0, 0, 0, 0.95);
  --card-shadow-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(0, 0, 0, 0.45),
    0 3px 5px rgba(0, 0, 0, 0.5),
    0 10px 20px -8px rgba(0, 0, 0, 0.7),
    0 28px 54px -22px rgba(0, 0, 0, 0.95);

  --sidebar-w: 52px;
  --mobilebar-h: 60px;

  --font-display: 'Akira Expanded', 'Inter', sans-serif;
  --font-ui: 'CC Emoji', 'RuneScape UF', 'Inter', sans-serif;
  --font-read: 'CC Emoji', 'RuneScape Plain 11', 'RuneScape UF', 'Inter', sans-serif;
  --font-game: 'CC Emoji', 'RuneScape Plain 11', 'RuneScape UF', 'Inter', sans-serif;
  --font-field: 'RuneScape Plain 11', 'Inter', sans-serif;
  --font-data: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-pixel: 'Alagard', 'RuneScape UF', 'Inter', sans-serif;


  --btn-sm-font: 0.85rem;
  --btn-sm-pad: 7px 14px;
  --btn-md-font: 1rem;
  --btn-md-pad: 10px 20px;
  --btn-lg-font: 1.1rem;
  --btn-lg-pad: 14px 28px;
}