/* ========================================================= THUNDERING HOOVES: BLOODLINES CORE THEME TOKEN SYSTEM --------------------------------------------------------- THEMES: - storm = power / wild / competitive - iron = bloodline / hierarchy / legacy - range = exploration / lore / open country --------------------------------------------------------- USAGE: ========================================================= */ /* ========================================================= 1) GLOBAL STRUCTURE TOKENS These are semantic tokens used everywhere. Each theme overrides the color values below. ========================================================= */ :root { --guest-header-offset: 13rem; } :root { color-scheme: dark; /* ---------- typography ---------- */ --font-body: "Inter", "Segoe UI", sans-serif; --font-heading: "Cinzel", "Georgia", serif; --font-ui: "Inter", "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", "Consolas", monospace; /* ---------- sizing ---------- */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 24px; --radius-pill: 999px; --border-thin: 1px; --border-strong: 2px; --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --container-max: 1400px; --header-height: 76px; --sidebar-width: 280px; /* ---------- motion ---------- */ --transition-fast: 120ms ease; --transition-base: 220ms ease; --transition-slow: 400ms ease; /* ---------- shadows ---------- */ --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.12); --shadow-sm: 0 2px 6px rgb(0 0 0 / 0.18); --shadow-md: 0 6px 18px rgb(0 0 0 / 0.22); --shadow-lg: 0 14px 34px rgb(0 0 0 / 0.28); --shadow-xl: 0 24px 60px rgb(0 0 0 / 0.36); /* ---------- z-index ---------- */ --z-dropdown: 200; --z-sticky: 400; --z-overlay: 800; --z-modal: 1000; --z-toast: 1200; } /* ========================================================= 2) STORM THEME Competitive. Electric. Sky before impact. ========================================================= */ :root[data-theme="storm"] { color-scheme: dark; /* ---------- raw hue scale: neutrals ---------- */ --storm-0: #f7f8fa; --storm-50: #eef1f5; --storm-100:#d9e0e8; --storm-200:#b7c3cf; --storm-300:#8b9aaa; --storm-400:#667487; --storm-500:#465366; --storm-600:#334051; --storm-700:#273342; --storm-800:#1d2631; --storm-900:#141b24; --storm-950:#0d1117; /* ---------- accent scale: lightning violet ---------- */ --violet-50: #f1edff; --violet-100: #e2dbff; --violet-200: #c7b8ff; --violet-300: #a48eff; --violet-400: #8367ff; --violet-500: #6a5acd; --violet-600: #5948b8; --violet-700: #45378f; --violet-800: #332866; --violet-900: #221b42; /* ---------- accent scale: dust gold ---------- */ --gold-50: #fcf7ee; --gold-100: #f6ecd8; --gold-200: #ebd5ac; --gold-300: #ddb97c; --gold-400: #cfa15a; --gold-500: #c2a56d; --gold-600: #9d7f48; --gold-700: #785f34; --gold-800: #564223; --gold-900: #392b15; /* ---------- accent scale: leather ---------- */ --leather-50: #f6f0eb; --leather-100: #e7d8cd; --leather-200: #cfb29f; --leather-300: #b38c76; --leather-400: #916853; --leather-500: #6b4f3a; --leather-600: #573f2f; --leather-700: #432f24; --leather-800: #2f2019; --leather-900: #1e1410; /* ---------- background system ---------- */ --bg-app: var(--storm-950); --bg-page: var(--storm-900); --bg-canvas: var(--storm-800); --bg-elevated: #202b37; --bg-card: #1a2330; --bg-card-hover: #243041; --bg-panel: #16202a; --bg-panel-2: #1f2935; --bg-header: rgb(13 17 23 / 1); --bg-sidebar: rgb(20 27 36 / 0.95); --bg-footer: #10161d; --bg-input: #121922; --bg-input-hover: #18212d; --bg-input-focus: #1d2836; --bg-table-row: rgb(255 255 255 / 0.01); --bg-table-row-alt: rgb(255 255 255 / 0.03); --bg-table-row-hover: rgb(106 90 205 / 0.08); --bg-selection: rgb(131 103 255 / 0.28); /* ---------- text system ---------- */ --text-main: #e8edf5; --text-soft: #cad3de; --text-muted: #9eabbb; --text-faint: #738093; --text-heading: #f7f9fc; --text-inverse: #0d1117; --text-on-accent: #ffffff; --text-disabled: #5d6877; /* ---------- link system ---------- */ --link: #b8adff; --link-hover: #d3ccff; --link-active: #8d79ff; --link-visited: #c7b8ff; /* ---------- border system ---------- */ --border-subtle: rgb(217 224 232 / 0.08); --border-soft: rgb(217 224 232 / 0.14); --border-main: rgb(217 224 232 / 0.22); --border-strong: rgb(217 224 232 / 0.34); --border-accent: rgb(131 103 255 / 0.45); --border-gold: rgb(194 165 109 / 0.42); /* ---------- brand / accent ---------- */ --accent-main: var(--violet-500); --accent-hover: var(--violet-400); --accent-active: var(--violet-600); --accent-soft: rgb(106 90 205 / 0.16); --accent-faint: rgb(106 90 205 / 0.08); --secondary-main: var(--gold-500); --secondary-hover: var(--gold-400); --secondary-active: var(--gold-600); --secondary-soft: rgb(194 165 109 / 0.16); --secondary-faint: rgb(194 165 109 / 0.08); /* ---------- status ---------- */ --success: #70d49b; --success-soft: rgb(112 212 155 / 0.14); --warning: #e2b55f; --warning-soft: rgb(226 181 95 / 0.14); --danger: #df6b6b; --danger-soft: rgb(223 107 107 / 0.14); --info: #77b5ff; --info-soft: rgb(119 181 255 / 0.14); /* ---------- special surfaces ---------- */ --header-bg: linear-gradient( 180deg, rgb(20 27 36 / 0.96) 0%, rgb(13 17 23 / 0.92) 100% ); --sidebar-bg: linear-gradient( 180deg, rgb(29 38 49 / 0.98) 0%, rgb(13 17 23 / 0.98) 100% ); --hero-gradient: radial-gradient( circle at top center, rgb(131 103 255 / 0.16) 0%, transparent 38% ), linear-gradient( 180deg, #1d2631 0%, #141b24 45%, #0d1117 100% ); --card-gradient: linear-gradient( 180deg, rgb(255 255 255 / 0.03) 0%, rgb(255 255 255 / 0.01) 100% ); --accent-gradient: linear-gradient( 135deg, var(--violet-400) 0%, var(--violet-600) 100% ); --secondary-gradient: linear-gradient( 135deg, var(--gold-400) 0%, var(--gold-600) 100% ); --rare-gradient: linear-gradient( 135deg, #7b6cff 0%, #3e5f99 100% ); --legendary-gradient: linear-gradient( 135deg, #f0d58a 0%, #b88735 100% ); /* ---------- shadows/glow ---------- */ --shadow-color: rgb(0 0 0 / 0.4); --glow-accent: 0 0 0 1px rgb(131 103 255 / 0.25), 0 0 24px rgb(131 103 255 / 0.18); --glow-secondary: 0 0 0 1px rgb(194 165 109 / 0.22), 0 0 24px rgb(194 165 109 / 0.14); } /* ========================================================= 3) IRON THEME Legacy. Bloodline. Noble brutality. ========================================================= */ :root[data-theme="iron"] { color-scheme: dark; /* ---------- neutral scale ---------- */ --iron-0: #f7f5f5; --iron-50: #ede9e8; --iron-100:#d6cfcd; --iron-200:#b5aba8; --iron-300:#8f8480; --iron-400:#6f6461; --iron-500:#544b49; --iron-600:#433b39; --iron-700:#342d2b; --iron-800:#272120; --iron-900:#191414; --iron-950:#0f0f10; /* ---------- blood red scale ---------- */ --blood-50: #fff0f0; --blood-100: #ffd9d9; --blood-200: #ffb1b1; --blood-300: #f47f7f; --blood-400: #d95555; --blood-500: #7a1c1c; --blood-600: #641616; --blood-700: #4d1111; --blood-800: #350b0b; --blood-900: #220707; /* ---------- copper scale ---------- */ --copper-50: #fff5f0; --copper-100: #ffe1d0; --copper-200: #f8bfa2; --copper-300: #e99972; --copper-400: #cf6c44; --copper-500: #a44a2f; --copper-600: #863a24; --copper-700: #662b1b; --copper-800: #461c12; --copper-900: #2d110b; /* ---------- ash scale ---------- */ --ash-50: #f7f7f7; --ash-100: #ebebeb; --ash-200: #d6d6d6; --ash-300: #b8b8b8; --ash-400: #959595; --ash-500: #737373; --ash-600: #5a5a5a; --ash-700: #444444; --ash-800: #2e2e2e; --ash-900: #1a1a1a; /* ---------- backgrounds ---------- */ --bg-app: var(--iron-950); --bg-page: var(--iron-900); --bg-canvas: var(--iron-800); --bg-elevated: #231d1d; --bg-card: #171314; --bg-card-hover: #231b1d; --bg-panel: #120f10; --bg-panel-2: #1c1718; --bg-header: rgb(15 15 16 / 0.92); --bg-sidebar: rgb(25 20 20 / 0.95); --bg-footer: #0d0b0c; --bg-input: #120f10; --bg-input-hover: #1a1516; --bg-input-focus: #221b1d; --bg-table-row: rgb(255 255 255 / 0.01); --bg-table-row-alt: rgb(255 255 255 / 0.025); --bg-table-row-hover: rgb(122 28 28 / 0.09); --bg-selection: rgb(164 74 47 / 0.26); /* ---------- text ---------- */ --text-main: #f0ebea; --text-soft: #d8cccc; --text-muted: #b29f9f; --text-faint: #857373; --text-heading: #fff7f5; --text-inverse: #100d0d; --text-on-accent: #fff8f7; --text-disabled: #625252; /* ---------- links ---------- */ --link: #f2a58e; --link-hover: #ffc4b4; --link-active: #d97757; --link-visited: #e1a4c5; /* ---------- borders ---------- */ --border-subtle: rgb(255 240 240 / 0.08); --border-soft: rgb(255 240 240 / 0.14); --border-main: rgb(255 240 240 / 0.22); --border-strong: rgb(255 240 240 / 0.34); --border-accent: rgb(122 28 28 / 0.48); --border-copper: rgb(164 74 47 / 0.42); /* ---------- accent ---------- */ --accent-main: var(--blood-500); --accent-hover: var(--blood-400); --accent-active: var(--blood-600); --accent-soft: rgb(122 28 28 / 0.16); --accent-faint: rgb(122 28 28 / 0.08); --secondary-main: var(--copper-500); --secondary-hover: var(--copper-400); --secondary-active: var(--copper-600); --secondary-soft: rgb(164 74 47 / 0.16); --secondary-faint: rgb(164 74 47 / 0.08); /* ---------- status ---------- */ --success: #77c68f; --success-soft: rgb(119 198 143 / 0.14); --warning: #dba85a; --warning-soft: rgb(219 168 90 / 0.14); --danger: #e07373; --danger-soft: rgb(224 115 115 / 0.14); --info: #8cb5d9; --info-soft: rgb(140 181 217 / 0.14); /* ---------- surfaces ---------- */ --header-bg: linear-gradient( 180deg, rgb(25 20 20 / 0.96) 0%, rgb(15 15 16 / 0.94) 100% ); --sidebar-bg: linear-gradient( 180deg, rgb(39 33 32 / 0.98) 0%, rgb(15 15 16 / 0.98) 100% ); --hero-gradient: radial-gradient( circle at top center, rgb(164 74 47 / 0.14) 0%, transparent 40% ), radial-gradient( circle at top left, rgb(122 28 28 / 0.12) 0%, transparent 28% ), linear-gradient( 180deg, #272120 0%, #191414 46%, #0f0f10 100% ); --card-gradient: linear-gradient( 180deg, rgb(255 255 255 / 0.025) 0%, rgb(255 255 255 / 0.01) 100% ); --accent-gradient: linear-gradient( 135deg, #a02727 0%, #5f1414 100% ); --secondary-gradient: linear-gradient( 135deg, #c46f4f 0%, #7c341f 100% ); --rare-gradient: linear-gradient( 135deg, #c06d5a 0%, #7a1c1c 100% ); --legendary-gradient: linear-gradient( 135deg, #e2b26f 0%, #a44a2f 100% ); /* ---------- shadows/glow ---------- */ --shadow-color: rgb(0 0 0 / 0.45); --glow-accent: 0 0 0 1px rgb(122 28 28 / 0.28), 0 0 24px rgb(122 28 28 / 0.14); --glow-secondary: 0 0 0 1px rgb(164 74 47 / 0.24), 0 0 24px rgb(164 74 47 / 0.12); } /* ========================================================= 4) RANGE THEME Open country. Warm earth. Lighter, softer, more legible. ========================================================= */ :root[data-theme="range"] { color-scheme: light; /* ---------- warm neutral scale ---------- */ --range-0: #ffffff; --range-50: #fcfaf6; --range-100:#f5efe6; --range-200:#eadfce; --range-300:#d8c4aa; --range-400:#bda182; --range-500:#9f8368; --range-600:#7b6551; --range-700:#5c4d3f; --range-800:#42372f; --range-900:#2a241f; --range-950:#1a1613; /* ---------- prairie gold ---------- */ --prairie-50: #fff8e9; --prairie-100: #fdf0c9; --prairie-200: #f7de96; --prairie-300: #efca62; --prairie-400: #e2b141; --prairie-500: #d9b86c; --prairie-600: #b38f37; --prairie-700: #896c28; --prairie-800: #5f4a19; --prairie-900: #3d2f0f; /* ---------- sage ---------- */ --sage-50: #f2f7f2; --sage-100: #e1ece1; --sage-200: #bfd3c0; --sage-300: #9cb89e; --sage-400: #7a9d7d; --sage-500: #7a8f7b; --sage-600: #5f7360; --sage-700: #475647; --sage-800: #313a31; --sage-900: #1f251f; /* ---------- clay ---------- */ --clay-50: #fff4ee; --clay-100: #f9dfd0; --clay-200: #efb99e; --clay-300: #e0926d; --clay-400: #cf7247; --clay-500: #c68a5c; --clay-600: #9d6641; --clay-700: #774c2f; --clay-800: #52331e; --clay-900: #341f11; /* ---------- sky ---------- */ --sky-50: #f1f8ff; --sky-100: #dcecff; --sky-200: #bddaff; --sky-300: #93c1f0; --sky-400: #6da8da; --sky-500: #afc4d6; --sky-600: #6d8ea7; --sky-700: #4d6b81; --sky-800: #324656; --sky-900: #1f2e38; /* ---------- backgrounds ---------- */ --bg-app: var(--range-50); --bg-page: var(--range-100); --bg-canvas: #fffdfa; --bg-elevated: #ffffff; --bg-card: #fffdf9; --bg-card-hover: #fff8ef; --bg-panel: #f9f3ea; --bg-panel-2: #f2eadf; --bg-header: rgb(245 239 230 / 0.9); --bg-sidebar: rgb(252 250 246 / 0.96); --bg-footer: #efe6d9; --bg-input: #fffdfa; --bg-input-hover: #fff8f1; --bg-input-focus: #fff4e7; --bg-table-row: rgb(255 255 255 / 0.75); --bg-table-row-alt: rgb(242 234 223 / 0.4); --bg-table-row-hover: rgb(122 143 123 / 0.1); --bg-selection: rgb(175 196 214 / 0.3); /* ---------- text ---------- */ --text-main: #2f2722; --text-soft: #52463d; --text-muted: #756657; --text-faint: #9e8f80; --text-heading: #241d19; --text-inverse: #fffdf9; --text-on-accent: #ffffff; --text-disabled: #b1a292; /* ---------- links ---------- */ --link: #486a88; --link-hover: #2f5776; --link-active: #243f55; --link-visited: #6b5d93; /* ---------- borders ---------- */ --border-subtle: rgb(82 70 61 / 0.08); --border-soft: rgb(82 70 61 / 0.14); --border-main: rgb(82 70 61 / 0.2); --border-strong: rgb(82 70 61 / 0.3); --border-accent: rgb(122 143 123 / 0.45); --border-gold: rgb(217 184 108 / 0.42); /* ---------- accent ---------- */ --accent-main: var(--sage-500); --accent-hover: var(--sage-400); --accent-active: var(--sage-600); --accent-soft: rgb(122 143 123 / 0.16); --accent-faint: rgb(122 143 123 / 0.08); --secondary-main: var(--prairie-500); --secondary-hover: var(--prairie-400); --secondary-active: var(--prairie-600); --secondary-soft: rgb(217 184 108 / 0.18); --secondary-faint: rgb(217 184 108 / 0.09); /* ---------- status ---------- */ --success: #4e9d63; --success-soft: rgb(78 157 99 / 0.12); --warning: #bb8534; --warning-soft: rgb(187 133 52 / 0.14); --danger: #bb5e54; --danger-soft: rgb(187 94 84 / 0.13); --info: #5c89a8; --info-soft: rgb(92 137 168 / 0.14); /* ---------- surfaces ---------- */ --header-bg: linear-gradient( 180deg, rgb(252 250 246 / 0.96) 0%, rgb(245 239 230 / 0.94) 100% ); --sidebar-bg: linear-gradient( 180deg, rgb(255 253 249 / 0.98) 0%, rgb(242 234 223 / 0.98) 100% ); --hero-gradient: radial-gradient( circle at top center, rgb(175 196 214 / 0.18) 0%, transparent 40% ), radial-gradient( circle at top left, rgb(217 184 108 / 0.14) 0%, transparent 35% ), linear-gradient( 180deg, #fffdfa 0%, #f5efe6 48%, #efe6d9 100% ); --card-gradient: linear-gradient( 180deg, rgb(255 255 255 / 0.75) 0%, rgb(255 255 255 / 0.45) 100% ); --accent-gradient: linear-gradient( 135deg, #92a894 0%, #617963 100% ); --secondary-gradient: linear-gradient( 135deg, #f0cb74 0%, #b98c39 100% ); --rare-gradient: linear-gradient( 135deg, #90b6d1 0%, #6d8ea7 100% ); --legendary-gradient: linear-gradient( 135deg, #f2d48a 0%, #c68a5c 100% ); /* ---------- shadows/glow ---------- */ --shadow-color: rgb(58 43 31 / 0.16); --glow-accent: 0 0 0 1px rgb(122 143 123 / 0.16), 0 0 18px rgb(122 143 123 / 0.12); --glow-secondary: 0 0 0 1px rgb(217 184 108 / 0.16), 0 0 18px rgb(217 184 108 / 0.1); } /* ========================================================= 5) UNIVERSAL COMPONENT TOKENS These use semantic values above and work across all themes. ========================================================= */ :root, :root[data-theme="storm"], :root[data-theme="iron"], :root[data-theme="range"] { /* ---------- buttons ---------- */ --btn-primary-bg: var(--accent-gradient); --btn-primary-text: var(--text-on-accent); --btn-primary-border: var(--border-accent); --btn-primary-shadow: var(--glow-accent); --btn-secondary-bg: var(--secondary-gradient); --btn-secondary-text: var(--text-on-accent); --btn-secondary-border: var(--border-gold, var(--border-copper, var(--border-main))); --btn-secondary-shadow: var(--glow-secondary); --btn-ghost-bg: transparent; --btn-ghost-bg-hover: var(--accent-faint); --btn-ghost-text: var(--text-soft); --btn-ghost-border: var(--border-soft); --btn-danger-bg: linear-gradient(135deg, #d86a6a 0%, #aa3f3f 100%); --btn-danger-text: #ffffff; --btn-danger-border: rgb(216 106 106 / 0.4); /* ---------- nav ---------- */ --nav-link-text: var(--text-soft); --nav-link-hover-text: var(--text-heading); --nav-link-hover-bg: var(--accent-faint); --nav-link-active-text: var(--text-heading); --nav-link-active-bg: var(--accent-soft); --nav-link-active-border: var(--border-accent); /* ---------- cards ---------- */ --card-bg: var(--bg-card); --card-bg-hover: var(--bg-card-hover); --card-border: var(--border-soft); --card-border-hover: var(--border-main); --card-shadow: var(--shadow-md); --card-shadow-hover: var(--shadow-lg); /* ---------- inputs ---------- */ --input-bg: var(--bg-input); --input-text: var(--text-main); --input-placeholder: var(--text-faint); --input-border: var(--border-soft); --input-border-hover: var(--border-main); --input-border-focus: var(--border-accent); --input-ring: 0 0 0 4px var(--accent-faint); /* ---------- tables ---------- */ --table-head-bg: var(--bg-panel); --table-head-text: var(--text-heading); --table-border: var(--border-soft); --table-row-bg: var(--bg-table-row); --table-row-alt-bg: var(--bg-table-row-alt); --table-row-hover-bg: var(--bg-table-row-hover); /* ---------- badges ---------- */ --badge-bg: var(--accent-soft); --badge-text: var(--text-heading); --badge-border: var(--border-accent); --badge-muted-bg: var(--bg-panel-2); --badge-muted-text: var(--text-soft); --badge-muted-border: var(--border-soft); /* ---------- callouts ---------- */ --callout-info-bg: var(--info-soft); --callout-info-border: color-mix(in srgb, var(--info) 55%, transparent); --callout-info-text: var(--text-main); --callout-success-bg: var(--success-soft); --callout-success-border: color-mix(in srgb, var(--success) 55%, transparent); --callout-success-text: var(--text-main); --callout-warning-bg: var(--warning-soft); --callout-warning-border: color-mix(in srgb, var(--warning) 55%, transparent); --callout-warning-text: var(--text-main); --callout-danger-bg: var(--danger-soft); --callout-danger-border: color-mix(in srgb, var(--danger) 55%, transparent); --callout-danger-text: var(--text-main); /* ---------- overlays ---------- */ --overlay-backdrop: rgb(0 0 0 / 0.55); --overlay-scrim: linear-gradient( 180deg, rgb(0 0 0 / 0.1) 0%, rgb(0 0 0 / 0.4) 100% ); } /* ========================================================= 16) EXAMPLE RARITY TOKENS Optional but smart for bloodlines/items/etc. ========================================================= */ :root, :root[data-theme="storm"], :root[data-theme="iron"], :root[data-theme="range"] { --rarity-common-bg: var(--bg-panel-2); --rarity-common-text: var(--text-soft); --rarity-common-border: var(--border-soft); --rarity-uncommon-bg: color-mix(in srgb, var(--success) 16%, var(--bg-panel)); --rarity-uncommon-text: var(--text-heading); --rarity-uncommon-border: color-mix(in srgb, var(--success) 50%, transparent); --rarity-rare-bg: color-mix(in srgb, var(--info) 14%, var(--bg-panel)); --rarity-rare-text: var(--text-heading); --rarity-rare-border: color-mix(in srgb, var(--info) 50%, transparent); --rarity-epic-bg: color-mix(in srgb, var(--accent-main) 16%, var(--bg-panel)); --rarity-epic-text: var(--text-heading); --rarity-epic-border: color-mix(in srgb, var(--accent-main) 50%, transparent); --rarity-legendary-bg: color-mix(in srgb, var(--secondary-main) 18%, var(--bg-panel)); --rarity-legendary-text: var(--text-heading); --rarity-legendary-border: color-mix(in srgb, var(--secondary-main) 55%, transparent); --rarity-mythic-bg: color-mix(in srgb, var(--danger) 20%, var(--bg-panel)); --rarity-mythic-text: var(--text-heading); --rarity-mythic-border: color-mix(in srgb, var(--danger) 55%, transparent); }