@use "sass:map";
@use "sass:list";
@use "sass:color"; // Ensure sass:color is imported for color.adjust

/* Variables & Theme Configuration */

/**
 * @name Breakpoint Variables
 * @group variables
 * @type Breakpoint
 * @description
 * Breakpoint values for responsive design.
 * @example scss
 *   @include retro-breakpoint(sm) { ... }
 */

/* Breakpoints */
$retro-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

/**
 * @name Color Variables
 * @group variables
 * @type Color
 * @description
 * Core color palette for RetroCSS. Use these variables for consistent theming.
 * 
 * To customize the color theme, you can override these variables in your own stylesheet:
 * ```scss
 * :root {
 *   --retro-primary: #1e88e5;    // Change primary color
 *   --retro-primary-rgb: 30, 136, 229;  // Also update RGB values
 *   --retro-success: #43a047;    // Change success color
 *   --retro-danger: #e53935;     // Change danger color
 *   --retro-body-bg: #d4d4d4;    // Change background color
 * }
 * ```
 * 
 * For dark mode customization, override the [data-theme="dark"] section:
 * ```scss
 * [data-theme="dark"] {
 *   --retro-body-bg: #121212;    // Dark mode background
 *   --retro-bg: #1e1e1e;         // Dark mode surface
 *   --retro-primary: #64b5f6;    // Dark mode primary color
 *   // ... other overrides
 * }
 * ```
 * 
 * @example scss
 *   color: $retro-primary;
 */

/* Colors */
$retro-body-bg: #c0c0c0; // Win95/98 light gray
$retro-body-bg-dark: #3a3a3a; // Win95/98 dark gray
$retro-bg: #ffffff;
$retro-primary: #000080; // Winblue
$retro-light: #f0f0f0; // Slightly lighter gray
$retro-white: #ffffff;
$retro-black: #000000;

// Win95/98 border colors
$retro-border-light: #ffffff;
$retro-border-medium: #808080;
$retro-border-dark: #000000;

// Legacy variable names (for backward compatibility)
$retro-shadow-light: $retro-border-light;

$retro-success: #008000; // Classic green
$retro-warning: #ffa500; // Dark orange - classic
$retro-danger: #cc0000; // Dark red, so white text clears AA on it
$retro-info: #00ffff; // Classic cyan blue
$retro-teal: #008080; // Classic teal
$retro-tan: #d2b48c; // Classic tan
$retro-pink: #ff69b4; // Classic hot pink
$retro-lime: #32cd32; // Classic lime green
$retro-cyan: #00e5ee;
$retro-orange: #ffb347;
$retro-brown: #8b5c2a;
$retro-violet: #7c3aed;
$retro-gray: #b0b0b0;
$retro-maroon: #800000;
$retro-gold: #ffd700;
$retro-navy: #001f4f;
$retro-olive: #808000;
$retro-silver: #c0c0c0;

// RGB values for alpha operations
$retro-primary-rgb: 0, 0, 128;
$retro-success-rgb: 0, 128, 0;
$retro-warning-rgb: 255, 165, 0;
$retro-danger-rgb: 204, 0, 0;
$retro-info-rgb: 0, 255, 255;
$retro-teal-rgb: 0, 128, 128;
$retro-tan-rgb: 210, 180, 140;
$retro-pink-rgb: 255, 105, 180;
$retro-lime-rgb: 50, 205, 50;
$retro-cyan-rgb: 0, 229, 238;
$retro-orange-rgb: 255, 179, 71;
$retro-brown-rgb: 139, 92, 42;
$retro-violet-rgb: 124, 58, 237;
$retro-gray-rgb: 176, 176, 176;
$retro-maroon-rgb: 128, 0, 0;
$retro-gold-rgb: 255, 215, 0;
$retro-navy-rgb: 0, 31, 79;
$retro-olive-rgb: 128, 128, 0;
$retro-silver-rgb: 192, 192, 192;
$retro-black-rgb: 0, 0, 0;
$retro-white-rgb: 255, 255, 255;
$retro-light-rgb: 240, 240, 240;

/**
 * @name Accessible Text Colors
 * @group variables
 * @type Color
 * @description
 * Companion ramp to the palette above. The palette values are tuned as *fills*
 * -- a filled badge or button with inverse text sitting on top. Used directly
 * as *text* on a page background many of them fail WCAG AA badly: $retro-info
 * (#00ffff) measures 1.25:1 on white, $retro-gold 1.40:1, $retro-warning 1.97:1.
 *
 * These `-text` values keep each colour's hue and saturation but clear 4.75:1
 * against both light surfaces (#ffffff and the #c0c0c0 body). Dark-theme
 * counterparts live in the [data-theme="dark"] block and clear 4.75:1 against
 * both #23242a (card) and #181818 (body).
 *
 * Use the palette value for a fill, the -text value for text on a surface.
 * @example scss
 *   background: var(--retro-info);       // fill
 *   color: var(--retro-info-text);       // text on a page background
 */
$retro-primary-text: #000080;
$retro-success-text: #005900;
$retro-danger-text: #9c0000;
$retro-warning-text: #694400;
$retro-info-text: #005454;
$retro-teal-text: #005454;
$retro-tan-text: #604726;
$retro-pink-text: #97004c;
$retro-lime-text: #155715;
$retro-cyan-text: #005458;
$retro-orange-text: #6e4100;
$retro-brown-text: #67441f;
$retro-violet-text: #5913d0;
$retro-gray-text: #4b4b4b;
$retro-maroon-text: #800000;
$retro-gold-text: #584a00;
$retro-navy-text: #001f4f;
$retro-olive-text: #4e4e00;
$retro-silver-text: #4b4b4b;

/**
 * @name On-Fill Text Colors
 * @group variables
 * @type Color
 * @description
 * Text/icon colour to place *on top of* the matching fill. Distinct from the
 * -text ramp, which is that hue used as text on a page surface.
 *
 * This is the framework's biggest dark-mode defect: components hardcode
 * `color: #fff` over `background: var(--retro-name)`, and the dark palette is
 * light, so 16 of 19 fills currently carry white text below 4.5:1 --
 * #fff on the dark --retro-success (#2ecc71) is 2.10:1. Each -fg value below
 * is whichever of black/white scores higher on its own fill.
 *
 * Each value is whichever of black/white scores higher on its own fill, and the
 * hover/active states below are clamped so that choice stays >=4.5:1 across all
 * three.
 *
 * Danger is the one hue where that rule was answered by changing the fill. On
 * pure #ff0000, white scores 4.00:1 and black 5.25:1, so the fill used to carry
 * black text -- which passes the arithmetic and still reads as a warning label
 * printed on a fire extinguisher. The fill is now #cc0000, where white scores
 * 5.89:1 and looks like the button it is. To go back:
 *   :root { --retro-danger: #ff0000; --retro-danger-fg: #000; }
 */
$retro-primary-fg: $retro-white;
$retro-success-fg: $retro-white;
$retro-danger-fg: $retro-white;
$retro-warning-fg: $retro-black;
$retro-info-fg: $retro-black;
$retro-teal-fg: $retro-white;
$retro-tan-fg: $retro-black;
$retro-pink-fg: $retro-black;
$retro-lime-fg: $retro-black;
$retro-cyan-fg: $retro-black;
$retro-orange-fg: $retro-black;
$retro-brown-fg: $retro-white;
$retro-violet-fg: $retro-white;
$retro-gray-fg: $retro-black;
$retro-maroon-fg: $retro-white;
$retro-gold-fg: $retro-black;
$retro-navy-fg: $retro-white;
$retro-olive-fg: $retro-black;
$retro-silver-fg: $retro-black;

/**
 * @name Semantic Text Colors
 * @group variables
 * @type Color
 * @description
 * Surface-aware text colours. Prefer these over $retro-black / $retro-white,
 * which invert between themes for backward compatibility and therefore read
 * confusingly at the call site.
 */
$retro-text: $retro-black;
$retro-text-muted: #4b4b4b;
$retro-text-inverse: $retro-white;


/**
 * @name Interaction State Colors
 * @group variables
 * @type Color
 * @description
 * Hover/active fills for every palette hue, as (hover, active) pairs.
 *
 * Nominally +/-10% lightness, but each state is clamped back toward its base
 * until it holds >=4.6:1 against that hue's -fg. Without the clamp a mid-
 * luminance fill drifts past whichever of black/white sits on it -- e.g. the
 * light teal at +10% carried its white text at only 2.59:1.
 *
 * Tokens rather than inline color.adjust() calls, because a compiled
 * color.adjust() is a fixed hex and cannot respond to [data-theme]. Written as
 * literals so Sass emits hex rather than rgb(46.257%...) notation.
 */
$retro-states-light: (
  "primary": (#0000b3, #00004d),
  "success": (#008500, #004d00),
  "danger": (#e60000, #990000),
  "warning": (#ffb733, #cc8400),
  "info": (#33ffff, #00cccc),
  "teal": (#008080, #004d4d),
  "tan": (#e0ccb1, #c49c67),
  "pink": (#ff9cce, #ff369b),
  "lime": (#5bd75b, #28a428),
  "cyan": (#22f7ff, #00b4bb),
  "orange": (#ffc87a, #ff9e14),
  "brown": (#9f6930, #64421e),
  "violet": (#8c51ef, #5f14e0),
  "gray": (#cacaca, #979797),
  "maroon": (#b30000, #4d0000),
  "gold": (#ffdf33, #ccac00),
  "navy": (#003382, #000b1c),
  "olive": (#b3b300, #7b7b00),
  "silver": (#dadada, #a7a7a7),
);

$retro-states-dark: (
  "primary": (#76abe9, #2378db),
  "success": (#54d98c, #25a25a),
  "danger": (#ed7669, #e32f1c),
  "warning": (#f5b043, #c87f0a),
  "info": (#5faee3, #217dbb),
  "teal": (#28e1bd, #148f77),
  "tan": (#e1cba9, #c79d5d),
  "pink": (#ee70ad, #e21c7c),
  "lime": (#00ebbd, #008a6f),
  "cyan": (#02fff9, #009b97),
  "orange": (#eb9950, #bf6516),
  "brown": (#b99672, #956f4a),
  "violet": (#9b59b6, #804399),
  "gray": (#b1bdbd, #798d8f),
  "maroon": (#d14233, #962d22),
  "gold": (#f4d03f, #c29d0b),
  "navy": (#3e5771, #1a242f),
  "olive": (#9aa4a5, #6d7a7b),
  "silver": (#d9dcde, #a1aab0),
);

/* Darker primary, used for open/active dropdown chrome */
$retro-primary-darker: list.nth(map.get($retro-states-light, primary), 2);
/* Neutral surface tint, used for subtle hover backgrounds */
$retro-gray-100: $retro-light;

/**
 * @name Typography Variables
 * @group variables
 * @type Font
 * @description
 * Font family, size, and line height for RetroCSS.
 * @example scss
 *   font-family: $retro-font;
 */

/* Typography */
$retro-font: 'MS Sans Serif', 'Microsoft Sans Serif', Arial, sans-serif;
// Headings share the body stack. Segoe UI (the previous heading font) reads
// well but undercuts the Win9x premise; override --retro-font-heading to
// restore a two-font system.
$retro-font-heading: $retro-font;
$retro-font-mono: 'Courier New', Courier, monospace;

// Scale is expressed in rem against the browser root, so sizes compose rather
// than compound and honour the reader's own font-size setting.
//
// The base moved from 14px to 16px in 3.0. 14px is the authentic Win9x metric,
// but this framework is read on modern displays and 14px was consistently the
// thing that made pages feel cramped. The whole ladder shifted with it so the
// relationships between steps are unchanged. To go back, one line:
//   :root { --retro-font-size: 0.875rem; }
$retro-font-size-base: 1rem;      // 16px
$retro-font-size: $retro-font-size-base;
$retro-font-size-xs: 0.75rem;     // 12px
$retro-font-size-sm: 0.875rem;    // 14px
$retro-font-size-lg: 1.125rem;    // 18px
$retro-font-size-xl: 1.25rem;     // 20px
$retro-font-size-2xl: 1.5rem;     // 24px
$retro-font-size-3xl: 1.875rem;   // 30px

$retro-line-height: 1.5;         // body copy
$retro-line-height-tight: 1.25;  // headings, buttons, badges

$retro-font-weight-normal: 400;
$retro-font-weight-medium: 600;
$retro-font-weight-bold: 700;

// Prose measure -- caps line length on long-form text blocks.
$retro-measure: 70ch;

/**
 * @name Spacing Variables
 * @group variables
 * @type Spacing
 * @description
 * Spacing scale for margins and paddings.
 * @example scss
 *   margin-bottom: $retro-spacing-md;
 */

/* Spacing */
$retro-spacing-xxs: 2px;
$retro-spacing-xs: 4px;
$retro-spacing-sm: 8px;
$retro-spacing-md: 16px;
$retro-spacing-lg: 24px;
$retro-spacing-xl: 32px;
$retro-spacing-xxl: 48px;

$retro-spacing: (
  xxs: $retro-spacing-xxs,
  xs: $retro-spacing-xs,
  sm: $retro-spacing-sm,
  md: $retro-spacing-md,
  lg: $retro-spacing-lg,
  xl: $retro-spacing-xl,
  xxl: $retro-spacing-xxl
);

/**
 * @name Border Variables
 * @group variables
 * @type Border
 * @description
 * Border width, style, radius for RetroCSS components.
 * @example scss
 *   border-radius: $retro-border-radius;
 */

/* Borders */
$retro-border-width: 1px;
$retro-border-width-thick: 2px;
$retro-border-style: solid;
$retro-border-radius: 0;
$retro-border-radius-sm: 0;
$retro-border-radius-lg: 0;

/**
 * @name Shadow Variables
 * @group variables
 * @type Shadow
 * @description
 * Shadow styles for raised and sunken effects.
 * @example scss
 *   box-shadow: $retro-border-raised;
 */

/* Shadows */
$retro-border-raised: 
  inset -1px -1px 0 $retro-border-dark,
  inset 1px 1px 0 $retro-border-light;

$retro-border-sunken: 
  inset -1px -1px 0 $retro-border-light,
  inset 1px 1px 0 $retro-border-dark;

$retro-box-shadow-subtle:
  0 1px 2px rgba(0, 0, 0, 0.1);

$retro-box-shadow-medium:
  0 2px 4px rgba(0, 0, 0, 0.15);

/**
 * @name Z-index Variables
 * @group variables
 * @type Z-index
 * @description
 * Z-index values for layering elements.
 * @example scss
 *   z-index: $retro-z-index-dropdown;
 */

/* Z-index */
$retro-z-index-base: 1;
$retro-z-index-dropdown: 1000;
$retro-z-index-sticky: 1020;
$retro-z-index-fixed: 1030;
$retro-z-index-modal-backdrop: 1040;
$retro-z-index-modal: 1050;
$retro-z-index-popover: 1060;
$retro-z-index-tooltip: 1070;

/**
 * @name Transition Variables
 * @group variables
 * @type Transition
 * @description
 * Transition timing values for animations.
 * @example scss
 *   transition: all $retro-transition-duration $retro-transition-timing-function;
 */

/* Transitions */
$retro-transition-duration: 0.1s;
$retro-transition-duration-slow: 0.3s;
$retro-transition-duration-fast: 0.05s;
$retro-transition-timing-function: ease;
$retro-transition-timing-function-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);

/**
 * @name Screen Size Variables
 * @group variables
 * @type Screen
 * @description
 * Screen size values for viewports.
 * @example scss
 *   @media (min-width: $retro-screen-sm) { ... }
 */

/* Screen Sizes (Viewport) */
$retro-screen-xs: map.get($retro-breakpoints, xs);
$retro-screen-sm: map.get($retro-breakpoints, sm);
$retro-screen-md: map.get($retro-breakpoints, md);
$retro-screen-lg: map.get($retro-breakpoints, lg);
$retro-screen-xl: map.get($retro-breakpoints, xl);
$retro-screen-xxl: map.get($retro-breakpoints, xxl);

/**
 * @name Container Variables
 * @group variables
 * @type Container
 * @description
 * Container width values for layouts.
 * @example scss
 *   max-width: $retro-container-lg;
 */

/* Container Sizes */
$retro-container-sm: 540px;
$retro-container-md: 720px;
$retro-container-lg: 960px;
$retro-container-xl: 1140px;
$retro-container-xxl: 1320px;
$retro-container-fluid: 100%;

/* CSS Custom Properties */
:root {
  // Tells the browser which scheme native widgets (scrollbars, date pickers,
  // default form controls) should paint in. Without it they render light-on-
  // light inside a dark theme.
  color-scheme: light;

  // Colors
  --retro-body-bg: #{$retro-body-bg}; /* Fallback for IE11 */
  --retro-body-bg-dark: #{$retro-body-bg-dark}; /* Fallback for IE11 */
  --retro-bg: #{$retro-bg}; /* Fallback for IE11 */
  --retro-primary: #{$retro-primary}; /* Fallback for IE11 */
  --retro-primary-rgb: #{$retro-primary-rgb}; /* Fallback for IE11 */
  --retro-light: #{$retro-light}; /* Fallback for IE11 */
  --retro-white: #{$retro-white}; /* Fallback for IE11 */
  --retro-black: #{$retro-black}; /* Fallback for IE11 */
  
  // Text Utilities Colors.
  // Aliased to the accessible -text ramp, not the raw palette: these are
  // consumed as text (.retro-text-*, form feedback) where the fill values
  // fail contrast. Defined once here, so they follow the theme automatically.
  --retro-color-primary: var(--retro-primary-text);
  --retro-color-success: var(--retro-success-text);
  --retro-color-danger: var(--retro-danger-text);
  --retro-color-warning: var(--retro-warning-text);
  --retro-color-info: var(--retro-info-text);
  --retro-color-teal: var(--retro-teal-text);
  --retro-color-pink: var(--retro-pink-text);
  --retro-color-lime: var(--retro-lime-text);
  --retro-color-success-rgb: #{$retro-success-rgb};
  --retro-color-danger-rgb: #{$retro-danger-rgb};
  
  // Semantic border names
  --retro-border-light: #{$retro-border-light}; /* Fallback for IE11 */
  --retro-border-medium: #{$retro-border-medium}; /* Fallback for IE11 */
  --retro-border-dark: #{$retro-border-dark}; /* Fallback for IE11 */
  
  --retro-success: #{$retro-success}; /* Fallback for IE11 */
  --retro-success-rgb: #{$retro-success-rgb}; /* Fallback for IE11 */
  --retro-warning: #{$retro-warning}; /* Fallback for IE11 */
  --retro-warning-rgb: #{$retro-warning-rgb}; /* Fallback for IE11 */
  --retro-danger: #{$retro-danger}; /* Fallback for IE11 */
  --retro-danger-rgb: #{$retro-danger-rgb}; /* Fallback for IE11 */
  --retro-info: #{$retro-info}; /* Fallback for IE11 */
  --retro-info-rgb: #{$retro-info-rgb}; /* Fallback for IE11 */
  --retro-teal: #{$retro-teal}; /* Fallback for IE11 */
  --retro-teal-rgb: #{$retro-teal-rgb}; /* Fallback for IE11 */
  --retro-tan: #{$retro-tan}; /* Fallback for IE11 */
  --retro-tan-rgb: #{$retro-tan-rgb};
  --retro-pink: #{$retro-pink}; /* Fallback for IE11 */
  --retro-pink-rgb: #{$retro-pink-rgb}; /* Fallback for IE11 */
  --retro-lime: #{$retro-lime}; /* Fallback for IE11 */
  --retro-lime-rgb: #{$retro-lime-rgb}; /* Fallback for IE11 */
  --retro-cyan: #{$retro-cyan}; /* Fallback for IE11 */
  --retro-cyan-rgb: #{$retro-cyan-rgb}; /* Fallback for IE11 */
  --retro-orange: #{$retro-orange}; /* Fallback for IE11 */
  --retro-orange-rgb: #{$retro-orange-rgb}; /* Fallback for IE11 */
  --retro-brown: #{$retro-brown}; /* Fallback for IE11 */
  --retro-brown-rgb: #{$retro-brown-rgb}; /* Fallback for IE11 */
  --retro-violet: #{$retro-violet}; /* Fallback for IE11 */
  --retro-violet-rgb: #{$retro-violet-rgb}; /* Fallback for IE11 */
  --retro-gray: #{$retro-gray}; /* Fallback for IE11 */
  --retro-gray-rgb: #{$retro-gray-rgb}; /* Fallback for IE11 */
  --retro-maroon: #{$retro-maroon}; /* Fallback for IE11 */
  --retro-maroon-rgb: #{$retro-maroon-rgb}; /* Fallback for IE11 */
  --retro-gold: #{$retro-gold}; /* Fallback for IE11 */
  --retro-gold-rgb: #{$retro-gold-rgb}; /* Fallback for IE11 */
  --retro-navy: #{$retro-navy}; /* Fallback for IE11 */
  --retro-navy-rgb: #{$retro-navy-rgb}; /* Fallback for IE11 */
  --retro-olive: #{$retro-olive}; /* Fallback for IE11 */
  --retro-olive-rgb: #{$retro-olive-rgb}; /* Fallback for IE11 */
  --retro-silver: #{$retro-silver}; /* Fallback for IE11 */
  --retro-silver-rgb: #{$retro-silver-rgb}; /* Fallback for IE11 */
  --retro-black-rgb: #{$retro-black-rgb}; /* Fallback for IE11 */
  --retro-white-rgb: #{$retro-white-rgb}; /* Fallback for IE11 */
  --retro-light-rgb: #{$retro-light-rgb}; /* Fallback for IE11 */

  // Accessible text ramp (>=4.75:1 on both #ffffff and the #c0c0c0 body)
  --retro-primary-text: #{$retro-primary-text};
  --retro-success-text: #{$retro-success-text};
  --retro-danger-text: #{$retro-danger-text};
  --retro-warning-text: #{$retro-warning-text};
  --retro-info-text: #{$retro-info-text};
  --retro-teal-text: #{$retro-teal-text};
  --retro-tan-text: #{$retro-tan-text};
  --retro-pink-text: #{$retro-pink-text};
  --retro-lime-text: #{$retro-lime-text};
  --retro-cyan-text: #{$retro-cyan-text};
  --retro-orange-text: #{$retro-orange-text};
  --retro-brown-text: #{$retro-brown-text};
  --retro-violet-text: #{$retro-violet-text};
  --retro-gray-text: #{$retro-gray-text};
  --retro-maroon-text: #{$retro-maroon-text};
  --retro-gold-text: #{$retro-gold-text};
  --retro-navy-text: #{$retro-navy-text};
  --retro-olive-text: #{$retro-olive-text};
  --retro-silver-text: #{$retro-silver-text};

  // On-fill text (text placed ON the matching fill)
  --retro-primary-fg: #{$retro-primary-fg};
  --retro-success-fg: #{$retro-success-fg};
  --retro-danger-fg: #{$retro-danger-fg};
  --retro-warning-fg: #{$retro-warning-fg};
  --retro-info-fg: #{$retro-info-fg};
  --retro-teal-fg: #{$retro-teal-fg};
  --retro-tan-fg: #{$retro-tan-fg};
  --retro-pink-fg: #{$retro-pink-fg};
  --retro-lime-fg: #{$retro-lime-fg};
  --retro-cyan-fg: #{$retro-cyan-fg};
  --retro-orange-fg: #{$retro-orange-fg};
  --retro-brown-fg: #{$retro-brown-fg};
  --retro-violet-fg: #{$retro-violet-fg};
  --retro-gray-fg: #{$retro-gray-fg};
  --retro-maroon-fg: #{$retro-maroon-fg};
  --retro-gold-fg: #{$retro-gold-fg};
  --retro-navy-fg: #{$retro-navy-fg};
  --retro-olive-fg: #{$retro-olive-fg};
  --retro-silver-fg: #{$retro-silver-fg};

  // Semantic text colours
  --retro-text: #{$retro-text};
  --retro-text-muted: #{$retro-text-muted};
  --retro-text-inverse: #{$retro-text-inverse};

  // Interaction states, one pair per hue
  @each $name, $pair in $retro-states-light {
    --retro-#{$name}-hover: #{list.nth($pair, 1)};
    --retro-#{$name}-active: #{list.nth($pair, 2)};
  }
  --retro-primary-dark: #{$retro-primary-darker};
  --retro-gray-100: #{$retro-gray-100};

  // Typography
  --retro-font: #{$retro-font};
  --retro-font-heading: #{$retro-font-heading};
  --retro-font-mono: #{$retro-font-mono};
  --retro-font-size: #{$retro-font-size};
  --retro-font-size-xs: #{$retro-font-size-xs};
  --retro-font-size-sm: #{$retro-font-size-sm};
  --retro-font-size-lg: #{$retro-font-size-lg};
  --retro-font-size-xl: #{$retro-font-size-xl};
  --retro-font-size-2xl: #{$retro-font-size-2xl};
  --retro-font-size-3xl: #{$retro-font-size-3xl};
  --retro-line-height: #{$retro-line-height};
  --retro-line-height-tight: #{$retro-line-height-tight};
  --retro-font-weight-normal: #{$retro-font-weight-normal};
  --retro-font-weight-medium: #{$retro-font-weight-medium};
  --retro-font-weight-bold: #{$retro-font-weight-bold};
  --retro-measure: #{$retro-measure};

  // Spacing
  --retro-spacing-xxs: #{$retro-spacing-xxs}; /* Fallback for IE11 */
  --retro-spacing-xs: #{$retro-spacing-xs}; /* Fallback for IE11 */
  --retro-spacing-sm: #{$retro-spacing-sm}; /* Fallback for IE11 */
  --retro-spacing-md: #{$retro-spacing-md}; /* Fallback for IE11 */
  --retro-spacing-lg: #{$retro-spacing-lg}; /* Fallback for IE11 */
  --retro-spacing-xl: #{$retro-spacing-xl}; /* Fallback for IE11 */
  --retro-spacing-xxl: #{$retro-spacing-xxl}; /* Fallback for IE11 */

  // Borders
  --retro-border-width: #{$retro-border-width}; /* Fallback for IE11 */
  --retro-border-width-thick: #{$retro-border-width-thick}; /* Fallback for IE11 */
  --retro-border-style: #{$retro-border-style}; /* Fallback for IE11 */
  --retro-border-radius: #{$retro-border-radius}; /* Fallback for IE11 */
  --retro-border-radius-sm: #{$retro-border-radius-sm}; /* Fallback for IE11 */
  --retro-border-radius-lg: #{$retro-border-radius-lg}; /* Fallback for IE11 */
  --retro-border-raised: #{$retro-border-raised}; /* Fallback for IE11 */
  --retro-border-sunken: #{$retro-border-sunken}; /* Fallback for IE11 */
  --retro-box-shadow-subtle: #{$retro-box-shadow-subtle}; /* Fallback for IE11 */
  --retro-box-shadow-medium: #{$retro-box-shadow-medium}; /* Fallback for IE11 */
  // Legacy alias: the highlight edge of a Win9x bevel.
  --retro-shadow-light: #{$retro-border-light};
  --retro-box-shadow-outset-button: #{$retro-border-raised};
  // Lighting effects must not follow the theme. --retro-black-rgb and
  // --retro-white-rgb invert (black <-> white, white -> #3a3a3a), which is
  // right for text and surfaces and wrong for anything modelling a light
  // source: a drop shadow becomes a glow, a backdrop becomes a spotlight, a
  // gloss becomes a smudge. These three are fixed in both themes.
  --retro-shadow-rgb: 0, 0, 0;
  // Modal and drawer backdrops. Separate from the shadow token so a consumer
  // can tint the scrim without touching every shadow in the framework.
  --retro-scrim-rgb: 0, 0, 0;
  // Top-edge gloss on raised fills.
  --retro-sheen-rgb: 255, 255, 255;
  --retro-box-shadow-inset: #{$retro-border-sunken};
  
  // Z-index
  --retro-z-index-base: #{$retro-z-index-base};
  --retro-z-index-dropdown: #{$retro-z-index-dropdown};
  --retro-z-index-sticky: #{$retro-z-index-sticky};
  --retro-z-index-fixed: #{$retro-z-index-fixed};
  --retro-z-index-modal-backdrop: #{$retro-z-index-modal-backdrop};
  --retro-z-index-modal: #{$retro-z-index-modal};
  --retro-z-index-popover: #{$retro-z-index-popover};
  --retro-z-index-tooltip: #{$retro-z-index-tooltip};
  
  // Transitions
  --retro-transition-duration: #{$retro-transition-duration};
  --retro-transition-duration-slow: #{$retro-transition-duration-slow};
  --retro-transition-duration-fast: #{$retro-transition-duration-fast};
  --retro-transition-timing-function: #{$retro-transition-timing-function};
  --retro-transition-timing-function-bounce: #{$retro-transition-timing-function-bounce};
  --retro-transition-base: #{$retro-transition-duration} #{$retro-transition-timing-function};
  
  // Container Sizes
  --retro-container-sm: #{$retro-container-sm};
  --retro-container-md: #{$retro-container-md};
  --retro-container-lg: #{$retro-container-lg};
  --retro-container-xl: #{$retro-container-xl};
  --retro-container-xxl: #{$retro-container-xxl};
  --retro-container-fluid: #{$retro-container-fluid};

  // Card Variables
  --retro-card-bg: #{$retro-light};
  --retro-card-header-bg: #{$retro-primary};
  --retro-card-header-text: #{$retro-white};
  --retro-card-content-bg: #{$retro-white};
  --retro-card-content-text: #{$retro-black};
  --retro-card-footer-bg: #{$retro-light};
  --retro-card-footer-text: #{$retro-black};
  --retro-modal-bg: #{$retro-light};
  --retro-modal-header-bg: #{$retro-primary};
  --retro-modal-header-text: #{$retro-white};
  --retro-table-bg: #{$retro-white};
  --retro-table-header-bg: #{$retro-light};
  --retro-table-header-text: #{$retro-black};
  --retro-table-striped-bg: #{$retro-light};
  --retro-input-bg: #{$retro-white};
  --retro-input-text: #{$retro-black};
  --retro-sidebar-bg: #{$retro-light};
  --retro-sidebar-text: #{$retro-black};
  --retro-dropdown-bg: #{$retro-white};
  --retro-dropdown-text: #{$retro-black};
  --retro-list-bg: #{$retro-white};
  --retro-list-text: #{$retro-black};
  --retro-progress-bg: #{$retro-light};
  --retro-progress-bar-bg: #{$retro-primary};
  --retro-alert-bg: #{$retro-light};
  --retro-alert-text: #{$retro-black};
  --retro-badge-bg: #{$retro-body-bg-dark};
  --retro-badge-text: #{$retro-white};
  --retro-toast-bg: #ffffcc;
  --retro-toast-text: #{$retro-black};

  // Syntax highlighting (.retro-code). Light values all clear 4.5:1 on #ffffff;
  // the previous .comment/.number/.attribute values sat at 3.95-4.00.
  --retro-syntax-keyword: #000080;
  --retro-syntax-string: #006e00;
  --retro-syntax-comment: #5f6b5f;
  --retro-syntax-function: #800080;
  --retro-syntax-number: #b00000;
  --retro-syntax-operator: #0000cc;
  --retro-syntax-variable: #800000;
  --retro-syntax-class: #006464;
  --retro-syntax-property: #0000cc;
  --retro-syntax-tag: #800000;
  --retro-syntax-attribute: #a03000;
}

/// Every dark-theme token, in one place so it can be emitted twice: once for
/// an explicit `[data-theme="dark"]`, and once under prefers-color-scheme so
/// a dark-OS visitor gets the right palette on the very first paint.
///
/// Without the media-query copy the theme could only be applied by script,
/// which meant a dark-OS visitor was shown a fully light page until the
/// bundle had parsed and run -- a flash no consuming site could avoid without
/// hand-writing its own blocking <head> script.
@mixin retro-dark-tokens {
  // Win9x grey chassis rather than a flat modern near-black: a dark desktop
  // grey, a lighter window face, and bevels with real depth. The highlight
  // edge carries the perceivable boundary here — no dark colour can reach
  // 3:1 against a #3a3a3a face (pure black manages only 1.85), so the light
  // edge does that work and the dark edges provide depth.
  //
  // The -text ramp below is retuned for the lighter ground: every value clears
  // 4.75:1 against all four surfaces (#2b2b2b body, #3a3a3a face, #454545
  // panel, #2e2e2e sunken). Lifting the chassis costs saturation — danger and
  // maroon in particular land noticeably paler than on the old near-black.
  color-scheme: dark;

  --retro-body-bg: #2b2b2b;
  --retro-bg: #3a3a3a;
  --retro-primary: #4a90e2;
  --retro-primary-rgb: 74, 144, 226;
  --retro-light: #454545;
  --retro-white: #3a3a3a;
  --retro-black: #fff;
  --retro-white-rgb: 58, 58, 58;
  --retro-black-rgb: 255, 255, 255;
  --retro-light-rgb: 69, 69, 69;

  --retro-border-light: #909090;
  --retro-border-medium: #262626;
  --retro-border-dark: #151515;

  --retro-success: #2ecc71;
  --retro-success-rgb: 46, 204, 113;
  --retro-warning: #f39c12;
  --retro-warning-rgb: 243, 156, 18;
  --retro-danger: #e74c3c;
  --retro-danger-rgb: 231, 76, 60;
  --retro-info: #3498db;
  --retro-info-rgb: 52, 152, 219;
  --retro-teal: #1abc9c;
  --retro-teal-rgb: 26, 188, 156;
  --retro-tan: #d4b483;
  --retro-tan-rgb: 212, 180, 131;
  --retro-pink: #e84393;
  --retro-pink-rgb: 232, 67, 147;
  --retro-lime: #00b894;
  --retro-lime-rgb: 0, 184, 148;
  --retro-cyan: #00cec9;
  --retro-cyan-rgb: 0, 206, 201;
  --retro-orange: #e67e22;
  --retro-orange-rgb: 230, 126, 34;
  --retro-brown: #a67c52;
  --retro-brown-rgb: 166, 124, 82;
  --retro-violet: #9b59b6;
  --retro-violet-rgb: 155, 89, 182;
  --retro-gray: #95a5a6;
  --retro-gray-rgb: 149, 165, 166;
  --retro-maroon: #c0392b;
  --retro-maroon-rgb: 192, 57, 43;
  --retro-gold: #f1c40f;
  --retro-gold-rgb: 241, 196, 15;
  --retro-navy: #2c3e50;
  --retro-navy-rgb: 44, 62, 80;
  --retro-olive: #7f8c8d;
  --retro-olive-rgb: 127, 140, 141;
  --retro-silver: #bdc3c7;
  --retro-silver-rgb: 189, 195, 199;

  --retro-box-shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.3);
  --retro-box-shadow-medium: 0 2px 4px rgba(0, 0, 0, 0.4);

  // Card Variables
  --retro-card-bg: #3a3a3a;
  // The header of a card is a title bar, and every other title bar in the dark
  // theme is --retro-primary: the sidebar's, the one over a code block. This
  // was a hardcoded #1a237e — the light theme's navy, carried into a palette
  // that had moved on — so a card header was the one piece of chrome that did
  // not follow the accent, and a site that re-themed the accent got a stray
  // navy bar on every card.
  --retro-card-header-bg: var(--retro-primary);
  --retro-card-header-text: var(--retro-primary-fg);
  --retro-card-content-bg: #333333;
  --retro-card-content-text: #f2f2f2;
  --retro-card-footer-bg: #3a3a3a;
  --retro-card-footer-text: #f2f2f2;
  --retro-modal-bg: #3a3a3a;
  --retro-modal-header-bg: var(--retro-primary);
  --retro-modal-header-text: var(--retro-primary-fg);
  --retro-table-bg: #333333;
  --retro-table-header-bg: #3a3a3a;
  --retro-table-header-text: #f2f2f2;
  --retro-table-striped-bg: #3f3f3f;
  --retro-input-bg: #2e2e2e;
  --retro-input-text: #f2f2f2;
  --retro-sidebar-bg: #333333;
  --retro-sidebar-text: #f2f2f2;
  --retro-dropdown-bg: #3a3a3a;
  --retro-dropdown-text: #f2f2f2;
  --retro-list-bg: #333333;
  --retro-list-text: #f2f2f2;
  --retro-progress-bg: #2e2e2e;
  --retro-progress-bar-bg: #4a90e2;
  --retro-alert-bg: #3a3a3a;
  --retro-alert-text: #f2f2f2;
  --retro-badge-bg: #4a4a4a;
  --retro-badge-text: #fff;
  --retro-toast-bg: #3a3a3a;
  --retro-toast-text: #f2f2f2;

  // Accessible text ramp (>=4.75:1 on both #23242a card and #181818 body).
  // Twelve of these match the fill above -- the dark palette is already light
  // enough to read on a dark surface; the seven that differ did not.
  --retro-primary-text: #8fbaed;
  --retro-success-text: #31d074;
  --retro-danger-text: #f3a29a;
  --retro-warning-text: #f4a72b;
  --retro-info-text: #7ebee8;
  --retro-teal-text: #1cceab;
  --retro-tan-text: #d4b483;
  --retro-pink-text: #f39dc6;
  --retro-lime-text: #00cfa6;
  --retro-cyan-text: #00cec9;
  --retro-orange-text: #eea869;
  --retro-brown-text: #ccb399;
  --retro-violet-text: #ccabda;
  --retro-gray-text: #adb9ba;
  --retro-maroon-text: #e9a69f;
  --retro-gold-text: #f1c40f;
  --retro-navy-text: #a5b9cd;   /* fill is 1.41:1 as text -- worst case in the framework */
  --retro-olive-text: #b1b9b9;
  --retro-silver-text: #bdc3c7;

  // On-fill text. The dark palette is light, so nearly every fill wants BLACK
  // on top -- the opposite of light mode, and the reason hardcoded `color:#fff`
  // fails across the board here.
  --retro-primary-fg: #000000;
  --retro-success-fg: #000000;
  --retro-danger-fg: #000000;
  --retro-warning-fg: #000000;
  --retro-info-fg: #000000;
  --retro-teal-fg: #000000;
  --retro-tan-fg: #000000;
  --retro-pink-fg: #000000;
  --retro-lime-fg: #000000;
  --retro-cyan-fg: #000000;
  --retro-orange-fg: #000000;
  --retro-brown-fg: #000000;
  --retro-violet-fg: #ffffff;
  --retro-gray-fg: #000000;
  --retro-maroon-fg: #ffffff;
  --retro-gold-fg: #000000;
  --retro-navy-fg: #ffffff;
  --retro-olive-fg: #000000;
  --retro-silver-fg: #000000;

  // Semantic text colours
  --retro-text: #f2f2f2;
  --retro-text-muted: #b8b8b8;
  --retro-text-inverse: #1a1a1a;

  // Interaction states, one pair per hue
  @each $name, $pair in $retro-states-dark {
    --retro-#{$name}-hover: #{list.nth($pair, 1)};
    --retro-#{$name}-active: #{list.nth($pair, 2)};
  }
  --retro-primary-dark: #{list.nth(map.get($retro-states-dark, primary), 2)};
  --retro-gray-100: #454545;

  // Bevel highlight edge
  --retro-shadow-light: #909090;

  // Syntax highlighting. The light values are catastrophic here -- .keyword
  // (#000080) on the #232323 code surface measures 1.02:1, i.e. invisible.
  --retro-syntax-keyword: #6ba9db;
  --retro-syntax-string: #d0967e;
  --retro-syntax-comment: #8cad6f;
  --retro-syntax-function: #dcdcaa;
  --retro-syntax-number: #b5cea8;
  --retro-syntax-operator: #9cdcfe;
  --retro-syntax-variable: #d4d4d4;
  --retro-syntax-class: #4ec9b0;
  --retro-syntax-property: #9cdcfe;
  --retro-syntax-tag: #6ba9db;
  --retro-syntax-attribute: #c8a2e0;
}

// An explicit choice, stored by the theme toggle. Highest precedence.
[data-theme="dark"] {
  @include retro-dark-tokens;
}

// No explicit choice: follow the operating system. The :not() guard is what
// lets a visitor who deliberately picked light stay light on a dark OS --
// applyTheme() writes data-theme="light" rather than removing the attribute,
// precisely so this rule can be opted out of.
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    @include retro-dark-tokens;
  }
}

/* Layout Specific Variables */
$retro-sidebar-width: 220px !default;

/* Component Specific Variables */

// Card Variables
$retro-card-bg: $retro-light !default;
$retro-card-header-bg: $retro-primary !default;
$retro-card-header-text: $retro-white !default;
$retro-card-header-border: color.adjust($retro-card-header-bg, $blackness: 20%) !default;
$retro-card-content-bg: $retro-white !default;
$retro-card-content-text: $retro-black !default;
$retro-card-content-border: $retro-gray !default;
$retro-card-footer-bg: $retro-light !default;
$retro-card-footer-text: $retro-black !default;
$retro-card-footer-border: $retro-border-medium !default;
$retro-card-image-border: $retro-border-medium !default;
$retro-card-image-max-height: 140px !default;

// Toast styling now lives entirely in components/_alert.scss, driven by
// --retro-toast-bg / --retro-toast-text. The $retro-toast-* SCSS variables
// that used to sit here were consumed only by the duplicate .retro-toast rule
// in _base.scss, which has been removed.