:root {
  /* Brand */
  --brand: #8c00ff;
  --brand-deep: #5500aa;
  --brand-hover: #9c25fd;
  --brand-hover-alt: #a64dff;
  --button: #5e00b3;

  /* Scroll Bar*/

  --brand-client: var(--blue-700);
  --brand-personal: var(--brand);
  --brand-demo: var(--mahogany-400);

  /* Lighter Variants (for hover / highlights / gradients) */
  --accent-light: #a94dff;
  --accent-lighter: #c699ff;
  --accent-tint: #e2ccff;
  --accent-glow: rgba(140, 0, 255, 0.25);

  /* Darker Variants (for shadows / active states / gradients) */
  --accent-dark: #6e00cc;
  --accent-darker: #4b0099;
  --accent-deep: #310066;
  --accent-shadow: rgba(75, 0, 153, 0.6);

  /* Gradient Pairs (ready for use) */
  --gradient-accent: linear-gradient(90deg, #8c00ff, #c699ff);
  --gradient-accent-dark: linear-gradient(90deg, #4b0099, #8c00ff);
  --gradient-accent-glow: linear-gradient(90deg, #8c00ff 0%, #e2ccff 100%);

  /* Accessibility-safe text combos */
  --text-on-accent: #ffffff;
  --text-on-accent-dark: #f5e6ff;
  --text-on-accent-light: #2b003d;

  /* Text & Neutrals */
  --text: #000;
  --bios-text-p: #eee;
  --text-invert: #fff;
  --text-off-gray: #333;
  --background-wallet: #333;
  --background-invert: #ffffff;
  --black: #000000;
  --offblack: #00000060;

  /* === Mahogany Palette === */
  --mahogany-50: #ffe9e0;
  --mahogany-100: #ffd2c2;
  --mahogany-200: #e6a18a;
  --mahogany-300: #cc7052;
  --mahogany-400: #b34f2b;
  --mahogany-classic: #a0522d;
  --mahogany-600: #8c4022;
  --mahogany-700: #73341c;
  --mahogany-800: #592816;
  --mahogany-900: #401d10;

  /* === Accent / Utility Shades === */
  --mahogany-warm: #c04000;
  --mahogany-rich: #7b3f00;
  --mahogany-muted: #824e3a;
  --mahogany-rose: #b76e5b;
  --mahogany-shadow: #2a0f08;

  /* Gray */
  --gray-900: #111;
  --gray-800: #1a1a1a;
  --gray-700: #2a2a2a;
  --gray-600: #2c2c2c;
  --gray-500: #4d4d4d;
  --gray-400: #525252;
  --gray-300: #777777;
  --gray-200: #939393;
  --gray-150: #ccc;
  --gray-100: #eee;

  /* Accents */
  --hyperlink: #4a90ff;
  --hyperlink-hover: #8c00ff;
  --hyperlink: #386299;
  --hyperlink-hover: #2d4e7a;
  --hyperlink-visited: #7b1fa2;
  --focus-ring: 2px solid rgba(0, 0, 0, 0.6);

  /* Accents */
  --blue-700: #0c00a6;
  --blue-400: #5ea4ff;
  --cyan: #0ff;
  --success: #228b22;
  --danger: #c20000;
  --very-dark-violet: #2a004f;
  --light-gray: #c5c5c5;
  --box-shadow: #000000;

  /* Decorative */
  --peach-50: #fef3e2;
  --lavender-50: #f5dcff;

  /* Extra neutrals & specials you use below */
  --gray-180: #d3d3d3;
  /* light grey bg */
  --offwhite: #faf9f6;
  /* off‑white */
  --white-33: #ffffff55;
  /* translucent white */
  --indigo-glow: #583ad2;
  /* hover glow accent */

  /* Shorthand alpha hex you used in gradients/cards */
  --white-a-53: #fff8;
  /* ≈53% white */
  --white-a-33: #fff5;
  /* ≈33% white */
  --eee-a-33: #eee5;
  /* ≈33% #eee */

  /* Optional: add if you want 1:1 matches for borders */
  --gray-220: #999;
  /* border grey seen in submenu */

  /* Transparency colors */
  --white-26: #ffffff26;
  --black-26: #00000026;

  /* Dark Mode */
  /* Background gradients */
  --dm-bg-start: #1a1a1a;
  --dm-bg-mid: #2c2c2c;
  --dm-bg-end: #343454;

  --dm-header-footer-start: #2a2a2a;
  --dm-header-footer-mid: #4d4d4d;
  --dm-header-footer-end: #777777;

  /* Text colors */
  --dm-text: #ffffff;
  --dm-heading-text: #eee;
  --dm-heading-shadow: #8a769a;

  /* Component backgrounds */
  --dm-scroll-box-bg: #939393;
  --dm-wallet-card-bg: #525252;
  --dm-grid-list-bg: #525252;

  /* Link and footer colors */
  --dm-link: #5aaeed;
  --dm-footer-text: #8c57d5;
  --dm-footer-shadow: var(--text);

  /* Spectra */
  --spectra-red: #ff0000;
  --spectra-orange: #ffa500;
  --spectra-yellow: #ffff00;
  --spectra-green: #008000;
  --spectra-blue: #0000ff;
  --spectra-indigo: #4b0082;
  --spectra-violet: #ee82ee;

  /* Demo Deck */
  --card: #161822;
  --card2: #0e0f15;
  --blurb: #0e0e12f2;
  --blurb2: #0e0e12bf;

  /* Carousel */
  --carousel-bg: #ffffff12;
  --carousel-border: #ffffff12;

  /* Typography */
  --font-primary: "Comic_Neue", sans-serif;

  /* Aspect Ratios */
  /* Square */
  --ratio-square: 1 / 1;

  /* Standard ratios */
  --ratio-4-3: 4 / 3;
  --ratio-3-2: 3 / 2;
  --ratio-16-9: 16 / 9;
  --ratio-21-9: 21 / 9;
  --ratio-32-9: 32 / 9;

  /* Portrait versions */
  --ratio-3-4: 3 / 4;
  --ratio-2-3: 2 / 3;
  --ratio-9-16: 9 / 16;
  --ratio-9-21: 9 / 21;

  /* Common square-ish */
  --ratio-5-4: 5 / 4;
  --ratio-4-5: 4 / 5;

  /* Cinematic / specialty */
  --ratio-2-1: 2 / 1;
  --ratio-1-2: 1 / 2;
  --ratio-1-85-1: 1.85 / 1; /* Cinema standard */
  --ratio-2-39-1: 2.39 / 1; /* Anamorphic widescreen */

  /* Display */
  --global-flex: flex;
  --global-inline-flex: inline-flex;
  --global-grid: grid;

  /* Common directions */
  --flex-row: row;
  --flex-col: column;

  /* Wrapping */
  --flex-wrap: wrap;
  --flex-nowrap: nowrap;

  /* Justify Content (horizontal alignment) */
  --flex-left: flex-start;
  --flex-right: flex-end;
  --flex-centre: center;
  --flex-between: space-between;
  --flex-even: space-evenly;
  --flex-around: space-around;

  /* Align Items (vertical alignment) */
  --flex-align-top: flex-start;
  --flex-align-bottom: flex-end;
  --flex-align-centre: center;
  --flex-align-stretch: stretch;

  /* Gap sizing */
  --flex-gap-sm: 0.5rem;
  --flex-gap-md: 1rem;
  --flex-gap-lg: 2rem;
}