/* ─────────────────────────────────────────────────────────────────────
   Tailwind @theme tokens (non-color)
   Color utility classes (text-*, bg-*, border-*, fg-*) now live in
   color-utilities.css, named to match Figma. The bg-canvas / text-fg pattern
   shown below is historical (pre-rename) and is no longer used in code.

   Pattern: bg-canvas      → var(--bg-primary)       → Colors/Background/bg-primary
            text-fg         → var(--text-primary)      → Colors/Text/text-primary
            border-border   → var(--border-secondary)  → Colors/Border/border-secondary
───────────────────────────────────────────────────────────────────── */
@theme inline {
  /* Semantic color classes (text-*, bg-*, border-*, fg-*, outline-*) are
     defined as @utility rules in color-utilities.css — named to match Figma.
     Only the badge "utility-*" palette remains in @theme below. */

  /* Badge utility palette */
  --color-utility-brand-50:    var(--utility-brand-50);
  --color-utility-brand-200:   var(--utility-brand-200);
  --color-utility-brand-700:   var(--utility-brand-700);
  --color-utility-error-50:    var(--utility-error-50);
  --color-utility-error-200:   var(--utility-error-200);
  --color-utility-error-700:   var(--utility-error-700);
  --color-utility-warning-50:  var(--utility-warning-50);
  --color-utility-warning-200: var(--utility-warning-200);
  --color-utility-warning-700: var(--utility-warning-700);
  --color-utility-success-50:  var(--utility-success-50);
  --color-utility-success-200: var(--utility-success-200);
  --color-utility-success-700: var(--utility-success-700);
  --color-utility-info-50:     var(--utility-info-50);
  --color-utility-info-200:    var(--utility-info-200);
  --color-utility-info-700:    var(--utility-info-700);
  --color-utility-gray-50:     var(--utility-gray-50);
  --color-utility-gray-200:    var(--utility-gray-200);
  --color-utility-gray-700:    var(--utility-gray-700);

  /* Shape */
  --radius-button: var(--radius-md);
  --radius-input:  var(--radius-md);
  --radius-card:   var(--radius-xl);
  --radius-badge:  var(--radius-full);
  --radius-tag:    var(--radius-sm);

  /* Font families */
  --font-display:  var(--font-family-display);
  --font-body:     var(--font-family-body);
  --font-heading:  var(--font-family-heading);
  --font-mono:     var(--font-family-mono);

  /* Font sizes */
  --text-xs:    var(--font-size-text-xs);
  --text-sm:    var(--font-size-text-sm);
  --text-base:  var(--font-size-text-md);
  --text-lg:    var(--font-size-text-lg);
  --text-xl:    var(--font-size-text-xl);
  --text-2xl:   var(--font-size-display-xs);
  --text-3xl:   var(--font-size-display-sm);
  --text-4xl:   var(--font-size-display-md);
  --text-5xl:   var(--font-size-display-lg);
  --text-6xl:   var(--font-size-display-xl);
  --text-7xl:   var(--font-size-display-2xl);

  /* Line heights */
  --leading-xs:   var(--line-height-text-xs);
  --leading-sm:   var(--line-height-text-sm);
  --leading-base: var(--line-height-text-md);
  --leading-lg:   var(--line-height-text-lg);
  --leading-xl:   var(--line-height-text-xl);
  --leading-2xl:  var(--line-height-display-xs);
  --leading-3xl:  var(--line-height-display-sm);
  --leading-4xl:  var(--line-height-display-md);
  --leading-5xl:  var(--line-height-display-lg);
  --leading-6xl:  var(--line-height-display-xl);
  --leading-7xl:  var(--line-height-display-2xl);
}

/* ─────────────────────────────────────────────────────────────────────
   Monochrome Light
   CSS variable names match Figma: --[category]-[figma-name]
───────────────────────────────────────────────────────────────────── */
:root,
[data-theme="default"] {
  /* Colors/Text */
  --text-primary:                #1c1917; /* gray-900 */
  --text-primary_on-brand:       #ffffff; /* white */
  --text-secondary:              #44403c; /* gray-700 */
  --text-secondary_hover:        #292524; /* gray-800 */
  --text-secondary_on-brand:     #eceae9; /* gray-warm-200 */
  --text-tertiary:               #57534e; /* gray-600 */
  --text-tertiary_hover:         #44403c; /* gray-700 */
  --text-tertiary_on-brand:      #eceae9; /* gray-warm-200 */
  --text-quaternary:             #79716b; /* gray-500 */
  --text-quaternary_on-brand:    #d7d3d0; /* gray-300 */
  --text-white:                  #ffffff;
  --text-disabled:               #79716b; /* gray-500 */
  --text-placeholder:            #79716b; /* gray-500 */
  --text-placeholder_subtle:     #d7d3d0; /* gray-300 */
  --text-brand-primary:          #1c1917; /* gray-900 */
  --text-brand-secondary:        #44403c; /* gray-700 */
  --text-brand-secondary_hover:  #292524; /* gray-800 */
  --text-brand-tertiary:         #57534e; /* gray-600 */
  --text-brand-tertiary_alt:     #57534e; /* gray-600 */
  --text-link:                   #7956ae; /* brand-700 */
  --text-link_hover:             #5f3c8b; /* brand-800 */
  --text-error-primary:          #d92d20; /* error-600 */
  --text-error-primary_hover:    #b42318; /* error-700 */
  --text-warning-primary:        #dc6803; /* warning-600 */
  --text-success-primary:        #079455; /* success-600 */

  /* Colors/Background */
  --bg-canvas:                #ffffff;  /* white */
  --bg-primary:               #ffffff;  /* white */
  --bg-primary_alt:           #ffffff;  /* white */
  --bg-primary_hover:         #fafaf9;  /* gray-50 */
  --bg-primary-solid:         #171412;  /* gray-950 */
  --bg-secondary:             #fafaf9;  /* gray-50 */
  --bg-secondary_alt:         #fafaf9;  /* gray-50 */
  --bg-secondary_hover:       #f5f5f4;  /* gray-100 */
  --bg-secondary_subtle:      #fdfdfc;  /* gray-25 */
  --bg-secondary-solid:       #57534e;  /* gray-600 */
  --bg-tertiary:              #f5f5f4;  /* gray-100 */
  --bg-quaternary:            #eceae9;  /* gray-warm-200 */
  --bg-active:                #fafaf9;  /* gray-50 */
  --bg-disabled:              #f5f5f4;  /* gray-100 */
  --bg-disabled_subtle:       #fafaf9;  /* gray-50 */
  --bg-overlay:               #171412;  /* gray-950 */
  --bg-brand-primary:         #fafaf9;  /* gray-50 */
  --bg-brand-primary_alt:     #fafaf9;  /* gray-50 */
  --bg-brand-secondary:       #f5f5f4;  /* gray-100 */
  --bg-brand-solid:           #292524;  /* gray-800 */
  --bg-brand-solid_hover:     #1c1917;  /* gray-900 */
  --bg-brand-section:         #292524;  /* gray-800 */
  --bg-brand-section_subtle:  #44403c;  /* gray-700 */
  --bg-error-primary:         #fef3f2;  /* error-50 */
  --bg-error-secondary:       #fee4e2;  /* error-100 */
  --bg-error-solid:           #d92d20;  /* error-600 */
  --bg-error-solid_hover:     #b42318;  /* error-700 */
  --bg-warning-primary:       #fffaeb;  /* warning-50 */
  --bg-warning-secondary:     #fef0c7;  /* warning-100 */
  --bg-warning-solid:         #dc6803;  /* warning-600 */
  --bg-success-primary:       #ecfdf3;  /* success-50 */
  --bg-success-secondary:     #dcfae6;  /* success-100 */
  --bg-success-solid:         #079455;  /* success-600 */
  --cell-retry-bg:            #292524;  /* gray-800 — Figma: Components/Table/cell-retry-bg; render-queue mobile swipe Retry panel (mode-safe; stays dark in light) */

  /* Colors/Border */
  --border-primary:           #d7d3d0; /* gray-300 */
  --border-secondary:         #eceae9; /* gray-warm-200 */
  --border-secondary_alt:     rgba(0,0,0,0.08); /* #000000 8% — for floating menus */
  --border-tertiary:          #f5f5f4; /* gray-100 */
  --border-disabled:          #d7d3d0; /* gray-300 */
  --border-disabled_subtle:   #eceae9; /* gray-warm-200 */
  --border-brand:             #79716b; /* gray-500 */
  --border-brand_alt:         #57534e; /* gray-600 */
  --border-error:             #f04438; /* error-500 */
  --border-error_subtle:      #fda29b; /* error-300 */

  /* Colors/Foreground */
  --fg-primary:               #1c1917; /* gray-900 */
  --fg-secondary:             #44403c; /* gray-700 */
  --fg-secondary_hover:       #292524; /* gray-800 */
  --fg-tertiary:              #57534e; /* gray-600 */
  --fg-tertiary_hover:        #44403c; /* gray-700 */
  --fg-quaternary:            #a9a29d; /* gray-400 */
  --fg-quaternary_hover:      #79716b; /* gray-500 */
  --fg-white:                 #ffffff;
  --fg-inverse:               #ffffff;
  --fg-disabled:              #a9a29d; /* gray-400 */
  --fg-disabled_subtle:       #d7d3d0; /* gray-300 */
  --fg-brand-primary:         #57534e;                  /* gray-600 */
  --fg-brand-primary_alt:     var(--fg-brand-primary);  /* → fg-brand-primary */
  --fg-brand-secondary:       #a186df;                  /* brand-500 */
  --fg-brand-secondary_alt:   var(--fg-brand-secondary); /* → fg-brand-secondary */
  --fg-brand-secondary_hover: #8867c1; /* brand-600 */
  --fg-error-primary:         #d92d20; /* error-600 */
  --fg-error-secondary:       #f04438; /* error-500 */
  --fg-warning-primary:       #dc6803; /* warning-600 */
  --fg-warning-secondary:     #f79009; /* warning-500 */
  --fg-success-primary:       #079455; /* success-600 */
  --fg-success-secondary:     #17b26a; /* success-500 */

  /* Colors/Focus ring */
  --focus-ring:               #292524; /* gray-800 */
  --focus-ring-error:         #f04438; /* error-500 */

  /* Colors/Effects/Shadows — individual layer colors */
  --shadow-color-xs:                    rgba(10, 13, 18, 0.05);
  --shadow-color-sm-01:                 rgba(10, 13, 18, 0.10);
  --shadow-color-sm-02:                 rgba(10, 13, 18, 0.10);
  --shadow-color-md-01:                 rgba(10, 13, 18, 0.10);
  --shadow-color-md-02:                 rgba(10, 13, 18, 0.06);
  --shadow-color-lg-01:                 rgba(10, 13, 18, 0.08);
  --shadow-color-lg-02:                 rgba(10, 13, 18, 0.03);
  --shadow-color-lg-03:                 rgba(10, 13, 18, 0.04);
  --shadow-color-xl-01:                 rgba(10, 13, 18, 0.08);
  --shadow-color-xl-02:                 rgba(10, 13, 18, 0.03);
  --shadow-color-xl-03:                 rgba(10, 13, 18, 0.04);
  --shadow-color-2xl-01:                rgba(10, 13, 18, 0.18);
  --shadow-color-2xl-02:                rgba(10, 13, 18, 0.04);
  --shadow-color-3xl-01:                rgba(10, 13, 18, 0.14);
  --shadow-color-3xl-02:                rgba(10, 13, 18, 0.04);
  --shadow-color-skeuomorphic-inset-01: rgba(10, 13, 18, 0.05);
  --shadow-color-skeuomorphic-inset-02: rgba(10, 13, 18, 0.18);

  /* Colors/Buttons */
  --button-primary-icon:                    #d7d3d0; /* gray-300 */
  --button-primary-icon_hover:              #eceae9; /* gray-warm-200 */
  --button-destructive-primary-icon:        #fda29b; /* error-300 */
  --button-destructive-primary-icon_hover:  #fecdca; /* error-200 */

  /* Colors/Checkbox */
  --checkbox-border:               #a9a29d; /* gray-400 */
  --checkbox-bg_disabled:          #f5f5f4; /* gray-100 */
  --checkbox-bg-checked:           #292524; /* gray-800 */
  --checkbox-bg-checked_hover:     #1c1917; /* gray-900 */
  --checkbox-bg-checked_disabled:  #a9a29d; /* gray-400 */

  /* Colors/Icons */
  --icon-fg-brand:                    #57534e; /* gray-600 */
  --icon-fg-brand_on-brand:           #eceae9; /* gray-warm-200 */
  --featured-icon-light-fg-brand:     #57534e; /* gray-600 */
  --featured-icon-light-fg-gray:      #79716b; /* gray-500 */
  --featured-icon-light-fg-error:     #d92d20; /* error-600 */
  --featured-icon-light-fg-warning:   #dc6803; /* warning-600 */
  --featured-icon-light-fg-success:   #079455; /* success-600 */

  /* Colors/Sliders */
  --slider-handle-bg:     #ffffff;  /* white */
  --slider-handle-border: #57534e;  /* gray-600 */

  /* Colors/Alpha */
  --alpha-white-10:   rgba(255,255,255,0.10);
  --alpha-white-20:   rgba(255,255,255,0.20);
  --alpha-white-30:   rgba(255,255,255,0.30);
  --alpha-white-40:   rgba(255,255,255,0.40);
  --alpha-white-50:   rgba(255,255,255,0.50);
  --alpha-white-60:   rgba(255,255,255,0.60);
  --alpha-white-70:   rgba(255,255,255,0.70);
  --alpha-white-80:   rgba(255,255,255,0.80);
  --alpha-white-90:   rgba(255,255,255,0.90);
  --alpha-white-100:  rgba(255,255,255,1.00);
  --alpha-black-10:   rgba(0,0,0,0.10);
  --alpha-black-20:   rgba(0,0,0,0.20);
  --alpha-black-30:   rgba(0,0,0,0.30);
  --alpha-black-40:   rgba(0,0,0,0.40);
  --alpha-black-50:   rgba(0,0,0,0.50);
  --alpha-black-60:   rgba(0,0,0,0.60);
  --alpha-black-70:   rgba(0,0,0,0.70);
  --alpha-black-80:   rgba(0,0,0,0.80);
  --alpha-black-90:   rgba(0,0,0,0.90);
  --alpha-black-100:  rgba(0,0,0,1.00);

  /* Colors/Tooltips */
  --tooltip-supporting-text: #d7d3d0; /* gray-300 */

  /* Colors/Toggles */
  --toggle-bg:                        #a9a29d;                  /* gray-400 */
  --toggle-bg-checked:                #292524;                  /* gray-800 */
  --toggle-bg-checked_disabled:       #d7d3d0;                  /* gray-300 */
  --toggle-button-fg_disabled:        #fafaf9;                  /* gray-50 */
  --toggle-border:                    #d7d3d0;                  /* gray-300 */
  --toggle-slim-border_pressed:       var(--bg-brand-solid);    /* → bg-brand-solid */
  --toggle-slim-border_pressed_hover: var(--bg-brand-solid_hover); /* → bg-brand-solid_hover */

  /* Component colors / Components */
  --app-store-badge-border:           #a6a6a6;  /* fixed neutral */
  --avatar-styles-bg-neutral:         #e0e0e0;  /* fixed neutral */
  --footer-button-fg:                 #eceae9;  /* gray-warm-200 */
  --footer-button-fg_hover:           #ffffff;  /* white */
  --screen-mockup-border:             #1c1917;  /* gray-900 */
  --text-editor-icon-fg:              #a9a29d;  /* gray-400 */
  --text-editor-icon-fg_active:       #79716b;  /* gray-500 */

  /* Colors/Utility */
  --utility-gray-50:         #fafaf9; --utility-gray-100:        #f5f5f4; --utility-gray-200:        #eceae9;
  --utility-gray-300:        #d7d3d0; --utility-gray-400:        #a9a29d; --utility-gray-500:        #79716b;
  --utility-gray-600:        #57534e; --utility-gray-700:        #44403c; --utility-gray-800:        #292524;
  --utility-gray-900:        #1c1917;
  --utility-brand-50:        #f8f5ff; --utility-brand-100:       #eee5ff; --utility-brand-200:       #dccdff;
  --utility-brand-300:       #cdb7fa; --utility-brand-400:       #b69dec; --utility-brand-500:       #a186df;
  --utility-brand-600:       #8867c1; --utility-brand-700:       #7956ae; --utility-brand-800:       #5f3c8b;
  --utility-brand-900:       #492a6a;
  --utility-brand-50_alt:    #f8f5ff; --utility-brand-100_alt:   #eee5ff; --utility-brand-200_alt:   #dccdff;
  --utility-brand-300_alt:   #cdb7fa; --utility-brand-400_alt:   #b69dec; --utility-brand-500_alt:   #a186df;
  --utility-brand-600_alt:   #8867c1; --utility-brand-700_alt:   #7956ae; --utility-brand-800_alt:   #5f3c8b;
  --utility-brand-900_alt:   #492a6a;
  --utility-error-50:        #fef3f2; --utility-error-100:       #fee4e2; --utility-error-200:       #fecdca;
  --utility-error-300:       #fda29b; --utility-error-400:       #f97066; --utility-error-500:       #f04438;
  --utility-error-600:       #d92d20; --utility-error-700:       #b42318;
  --utility-warning-50:      #fffaeb; --utility-warning-100:     #fef0c7; --utility-warning-200:     #fedf89;
  --utility-warning-300:     #fec84b; --utility-warning-400:     #fdb022; --utility-warning-500:     #f79009;
  --utility-warning-600:     #dc6803; --utility-warning-700:     #b54708;
  --utility-success-50:      #ecfdf3; --utility-success-100:     #dcfae6; --utility-success-200:     #abefc6;
  --utility-success-300:     #75e0a7; --utility-success-400:     #47cd89; --utility-success-500:     #17b26a;
  --utility-success-600:     #079455; --utility-success-700:     #067647;
  --utility-gray-blue-50:    #f8f9fc; --utility-gray-blue-100:   #eaecf5; --utility-gray-blue-200:   #d5d9eb;
  --utility-gray-blue-300:   #b3b8db; --utility-gray-blue-400:   #717bbc; --utility-gray-blue-500:   #4e5ba6;
  --utility-gray-blue-600:   #3e4784; --utility-gray-blue-700:   #363f72;
  --utility-blue-light-50:   #f0f9ff; --utility-blue-light-100:  #e0f2fe; --utility-blue-light-200:  #b9e6fe;
  --utility-blue-light-300:  #7cd4fd; --utility-blue-light-400:  #36bffa; --utility-blue-light-500:  #0ba5ec;
  --utility-blue-light-600:  #0086c9; --utility-blue-light-700:  #026aa2;
  --utility-info-50:         #eff8ff; --utility-info-100:        #d1e9ff; --utility-info-200:        #b2ddff;
  --utility-info-300:        #84caff; --utility-info-400:        #53b1fd; --utility-info-500:        #2e90fa;
  --utility-info-600:        #1570ef; --utility-info-700:        #175cd3;
  --utility-blue-dark-50:    #eff4ff; --utility-blue-dark-100:   #d1e0ff; --utility-blue-dark-200:   #b2ccff;
  --utility-blue-dark-300:   #84adff; --utility-blue-dark-400:   #528bff; --utility-blue-dark-500:   #2970ff;
  --utility-blue-dark-600:   #155eef; --utility-blue-dark-700:   #004eeb;
  --utility-indigo-50:       #eef4ff; --utility-indigo-100:      #e0eaff; --utility-indigo-200:      #c7d7fe;
  --utility-indigo-300:      #a4bcfd; --utility-indigo-400:      #8098f9; --utility-indigo-500:      #6172f3;
  --utility-indigo-600:      #444ce7; --utility-indigo-700:      #3538cd;
  --utility-purple-50:       #f4f3ff; --utility-purple-100:      #ebe9fe; --utility-purple-200:      #d9d6fe;
  --utility-purple-300:      #bdb4fe; --utility-purple-400:      #9b8afb; --utility-purple-500:      #7a5af8;
  --utility-purple-600:      #6938ef; --utility-purple-700:      #5925dc;
  --utility-fuchsia-50:      #fdf4ff; --utility-fuchsia-100:     #fbe8ff; --utility-fuchsia-200:     #f6d0fe;
  --utility-fuchsia-300:     #eeaafd; --utility-fuchsia-400:     #e478fa; --utility-fuchsia-500:     #d444f1;
  --utility-fuchsia-600:     #ba24d5; --utility-fuchsia-700:     #9f1ab1;
  --utility-pink-50:         #fdf2fa; --utility-pink-100:        #fce7f6; --utility-pink-200:        #fcceee;
  --utility-pink-300:        #faa7e0; --utility-pink-400:        #f670c7; --utility-pink-500:        #ee46bc;
  --utility-pink-600:        #dd2590; --utility-pink-700:        #c11574;
  --utility-orange-dark-50:  #fff4ed; --utility-orange-dark-100: #ffe6d5; --utility-orange-dark-200: #ffd6ae;
  --utility-orange-dark-300: #ff9c66; --utility-orange-dark-400: #ff692e; --utility-orange-dark-500: #ff4405;
  --utility-orange-dark-600: #e62e05; --utility-orange-dark-700: #bc1b06;
  --utility-orange-50:       #fef6ee; --utility-orange-100:      #fdead7; --utility-orange-200:      #f9dbaf;
  --utility-orange-300:      #f7b27a; --utility-orange-400:      #f38744; --utility-orange-500:      #ef6820;
  --utility-orange-600:      #e04f16; --utility-orange-700:      #b93815;
  --utility-green-50:        #edfcf2; --utility-green-100:       #d3f8df; --utility-green-200:       #aaf0c4;
  --utility-green-300:       #73e2a3; --utility-green-400:       #3ccb7f; --utility-green-500:       #16b364;
  --utility-green-600:       #099250; --utility-green-700:       #087443;
  --utility-yellow-50:       #fefbe8; --utility-yellow-100:      #fef7c3; --utility-yellow-200:      #feee95;
  --utility-yellow-300:      #fde272; --utility-yellow-400:      #fac515; --utility-yellow-500:      #eaaa08;
  --utility-yellow-600:      #ca8504; --utility-yellow-700:      #a15c07;
}

/* ─────────────────────────────────────────────────────────────────────
   Monochrome Dark
───────────────────────────────────────────────────────────────────── */
:root.dark,
[data-theme="default"].dark {
  /* Colors/Text */
  --text-primary:                #f8f8f7; /* gray-dark-50 */
  --text-primary_on-brand:       #191615; /* gray-dark-900 */
  --text-secondary:              #d5d1cd; /* gray-dark-300 */
  --text-secondary_hover:        #eeedec; /* gray-dark-200 */
  --text-secondary_on-brand:     #d5d1cd; /* gray-dark-300 */
  --text-tertiary:               #9e958f; /* gray-dark-400 */
  --text-tertiary_hover:         #d5d1cd; /* gray-dark-300 */
  --text-tertiary_on-brand:      #9e958f; /* gray-dark-400 */
  --text-quaternary:             #9e958f; /* gray-dark-400 */
  --text-quaternary_on-brand:    #9e958f; /* gray-dark-400 */
  --text-white:                  #ffffff;
  --text-disabled:               #918983; /* gray-dark-500 */
  --text-placeholder:            #918983; /* gray-dark-400 */
  --text-placeholder_subtle:     #413d3a; /* gray-dark-700 */
  --text-brand-primary:          #f8f8f7; /* gray-dark-50 */
  --text-brand-secondary:        #d5d1cd; /* gray-dark-300 */
  --text-brand-secondary_hover:  #eeedec; /* gray-dark-200 */
  --text-brand-tertiary:         #9e958f; /* gray-dark-400 */
  --text-brand-tertiary_alt:     #f8f8f7; /* gray-dark-50 */
  --text-link:                   #d5d1cd; /* gray-dark-300 */
  --text-link_hover:             #eeedec; /* gray-dark-200 */
  --text-error-primary:          #f97066; /* error-400 */
  --text-error-primary_hover:    #fda29b; /* error-400 */
  --text-warning-primary:        #fdb022; /* warning-400 */
  --text-success-primary:        #47cd89; /* success-400 */

  /* Colors/Background */
  --bg-canvas:                #110f0d;           /* gray-dark-950 */
  --bg-primary:               #110f0d;           /* gray-dark-950 */
  --bg-primary_alt:           var(--bg-secondary); /* → bg-secondary */
  --bg-primary_hover:         #2b2726;           /* gray-dark-800 */
  --bg-primary-solid:         var(--bg-secondary); /* → bg-secondary */
  --bg-secondary:             #191615;           /* gray-dark-900 */
  --bg-secondary_alt:         var(--bg-primary); /* → bg-primary */
  --bg-secondary_hover:       #2b2726;           /* gray-dark-800 */
  --bg-secondary_subtle:      #191615;           /* gray-dark-900 */
  --bg-secondary-solid:       #6b6761;           /* gray-dark-600 */
  --bg-tertiary:              #2b2726;           /* gray-dark-800 */
  --bg-quaternary:            #413d3a;           /* gray-dark-700 */
  --bg-active:                #2b2726;           /* gray-dark-800 */
  --bg-disabled:              #2b2726;           /* gray-dark-800 */
  --bg-disabled_subtle:       #191615;           /* gray-dark-900 */
  --bg-overlay:               #2b2726;           /* gray-dark-800 */
  --bg-brand-primary:         #a186df;           /* brand-500 */
  --bg-brand-primary_alt:     var(--bg-secondary); /* → bg-secondary */
  --bg-brand-secondary:       #8867c1;           /* brand-600 */
  --bg-brand-solid:           #fbfbf9;           /* gray-dark-25 */
  --bg-brand-solid_hover:     #ffffff;           /* white */
  --bg-brand-section:         var(--bg-secondary); /* → bg-secondary */
  --bg-brand-section_subtle:  var(--bg-primary); /* → bg-primary */
  --bg-error-primary:         #55160c;           /* error-950 */
  --bg-error-secondary:       #d92d20;           /* error-600 */
  --bg-error-solid:           #d92d20;           /* error-600 */
  --bg-error-solid_hover:     #f04438;           /* error-500 */
  --bg-warning-primary:       #4e1d09;           /* warning-950 */
  --bg-warning-secondary:     #dc6803;           /* warning-600 */
  --bg-warning-solid:         #dc6803;           /* warning-600 */
  --bg-success-primary:       #053321;           /* success-950 */
  --bg-success-secondary:     #079455;           /* success-600 */
  --bg-success-solid:         #079455;           /* success-600 */
  --cell-retry-bg:            #413d3a;           /* gray-dark-700 — neutral mid/dark grey, visible on the dark page */

  /* Colors/Border */
  --border-primary:           #413d3a; /* gray-dark-700 */
  --border-secondary:         #2b2726; /* gray-dark-800 */
  --border-secondary_alt:     #2b2726; /* gray-dark-800 */
  --border-tertiary:          #2b2726; /* gray-dark-800 */
  --border-disabled:          #413d3a; /* gray-dark-700 */
  --border-disabled_subtle:   #2b2726; /* gray-dark-800 */
  --border-brand:             #b69dec; /* brand-400 */
  --border-brand_alt:         #413d3a; /* gray-dark-700 */
  --border-error:             #f97066; /* error-400 */
  --border-error_subtle:      #f04438; /* error-500 */

  /* Colors/Foreground */
  --fg-primary:               #ffffff; /* white */
  --fg-secondary:             #d5d1cd; /* gray-dark-300 */
  --fg-secondary_hover:       #eeedec; /* gray-dark-200 */
  --fg-tertiary:              #9e958f; /* gray-dark-400 */
  --fg-tertiary_hover:        #d5d1cd; /* gray-dark-300 */
  --fg-quaternary:            #6b6761; /* gray-dark-600 */
  --fg-quaternary_hover:      #918983; /* gray-dark-500 */
  --fg-white:                 #ffffff;
  --fg-inverse:               #1c1917; /* gray-900 */
  --fg-disabled:              #918983; /* gray-dark-500 */
  --fg-disabled_subtle:       #6b6761; /* gray-dark-600 */
  --fg-brand-primary:         #a186df; /* brand-500 */
  --fg-brand-primary_alt:     #d5d1cd; /* gray-dark-300 */
  --fg-brand-secondary:       #a186df; /* brand-500 */
  --fg-brand-secondary_alt:   #6b6761; /* gray-dark-600 */
  --fg-brand-secondary_hover: #918983; /* gray-dark-500 */
  --fg-error-primary:         #f04438; /* error-500 */
  --fg-error-secondary:       #f97066; /* error-400 */
  --fg-warning-primary:       #f79009; /* warning-500 */
  --fg-warning-secondary:     #fdb022; /* warning-400 */
  --fg-success-primary:       #17b26a; /* success-500 */
  --fg-success-secondary:     #47cd89; /* success-400 */

  /* Colors/Focus ring */
  --focus-ring:               #a186df; /* brand-500 */
  --focus-ring-error:         #f04438; /* error-500 */

  /* Colors/Effects/Shadows — transparent in dark mode */
  --shadow-color-xs:                    transparent;
  --shadow-color-sm-01:                 transparent;
  --shadow-color-sm-02:                 transparent;
  --shadow-color-md-01:                 transparent;
  --shadow-color-md-02:                 transparent;
  --shadow-color-lg-01:                 transparent;
  --shadow-color-lg-02:                 transparent;
  --shadow-color-lg-03:                 transparent;
  --shadow-color-xl-01:                 transparent;
  --shadow-color-xl-02:                 transparent;
  --shadow-color-xl-03:                 transparent;
  --shadow-color-2xl-01:                transparent;
  --shadow-color-2xl-02:                transparent;
  --shadow-color-3xl-01:                transparent;
  --shadow-color-3xl-02:                transparent;
  --shadow-color-skeuomorphic-inset-01: rgba(12, 14, 18, 0.05);
  --shadow-color-skeuomorphic-inset-02: rgba(12, 14, 18, 0.18);

  /* Colors/Buttons */
  --button-primary-icon:                    #918983; /* brand-300 */
  --button-primary-icon_hover:              #9e958f; /* brand-200 */
  --button-destructive-primary-icon:        #fda29b; /* error-300 */
  --button-destructive-primary-icon_hover:  #fecdca; /* error-200 */

  /* Colors/Checkbox */
  --checkbox-border:               #6b6761; /* gray-dark-600 */
  --checkbox-bg_disabled:          #2b2726; /* gray-dark-800 */
  --checkbox-bg-checked:           #a186df; /* brand-500 */
  --checkbox-bg-checked_hover:     #8867c1; /* brand-600 */
  --checkbox-bg-checked_disabled:  #492a6a; /* brand-900 */

  /* Colors/Icons */
  --icon-fg-brand:                    #9e958f; /* gray-dark-400 */
  --icon-fg-brand_on-brand:           #9e958f; /* gray-dark-400 */
  --featured-icon-light-fg-brand:     #dccdff; /* brand-200 */
  --featured-icon-light-fg-gray:      #eeedec; /* gray-dark-200 */
  --featured-icon-light-fg-error:     #fecdca; /* error-200 */
  --featured-icon-light-fg-warning:   #fedf89; /* warning-200 */
  --featured-icon-light-fg-success:   #abefc6; /* success-200 */

  /* Colors/Sliders */
  --slider-handle-bg:     var(--fg-brand-primary); /* → fg-brand-primary */
  --slider-handle-border: var(--bg-primary);       /* → bg-primary */

  /* Colors/Alpha — dark mode: white series uses gray-dark-950, black series uses white */
  --alpha-white-10:   rgba(17,15,13,0.10);  /* gray-dark-950 10% */
  --alpha-white-20:   rgba(17,15,13,0.20);
  --alpha-white-30:   rgba(17,15,13,0.30);
  --alpha-white-40:   rgba(17,15,13,0.40);
  --alpha-white-50:   rgba(17,15,13,0.50);
  --alpha-white-60:   rgba(17,15,13,0.60);
  --alpha-white-70:   rgba(17,15,13,0.70);
  --alpha-white-80:   rgba(17,15,13,0.80);
  --alpha-white-90:   rgba(17,15,13,0.90);
  --alpha-white-100:  rgba(17,15,13,1.00);
  --alpha-black-10:   rgba(255,255,255,0.10);
  --alpha-black-20:   rgba(255,255,255,0.20);
  --alpha-black-30:   rgba(255,255,255,0.30);
  --alpha-black-40:   rgba(255,255,255,0.40);
  --alpha-black-50:   rgba(255,255,255,0.50);
  --alpha-black-60:   rgba(255,255,255,0.60);
  --alpha-black-70:   rgba(255,255,255,0.70);
  --alpha-black-80:   rgba(255,255,255,0.80);
  --alpha-black-90:   rgba(255,255,255,0.90);
  --alpha-black-100:  rgba(255,255,255,1.00);

  /* Colors/Tooltips */
  --tooltip-supporting-text: #cecfd2; /* gray-dark-300 */

  /* Colors/Toggles */
  --toggle-bg:                        #413d3a;     /* gray-dark-500 */
  --toggle-bg-checked:                #a186df;     /* brand-500 */
  --toggle-bg-checked_disabled:       #492a6a;     /* brand-900 */
  --toggle-button-fg_disabled:        #6b6761;     /* gray-dark-600 */
  --toggle-border:                    #ffffff;     /* white — visible on dark bg */
  --toggle-slim-border_pressed:       #ffffff;     /* white */
  --toggle-slim-border_pressed_hover: #ffffff;     /* white */

  /* Colors/Utility — all scales invert in dark mode */
  --utility-gray-50:         #191615; --utility-gray-100:        #2b2726; --utility-gray-200:        #413d3a;
  --utility-gray-300:        #413d3a; --utility-gray-400:        #6b6761; --utility-gray-500:        #918983;
  --utility-gray-600:        #9e958f; --utility-gray-700:        #d5d1cd; --utility-gray-800:        #eeedec;
  --utility-gray-900:        #f0f0ef;
  --utility-brand-50:        #321e46; --utility-brand-100:       #492a6a; --utility-brand-200:       #5f3c8b;
  --utility-brand-300:       #7956ae; --utility-brand-400:       #8867c1; --utility-brand-500:       #a186df;
  --utility-brand-600:       #b69dec; --utility-brand-700:       #cdb7fa; --utility-brand-800:       #dccdff;
  --utility-brand-900:       #eee5ff;
  --utility-brand-50_alt:    #1c1917; --utility-brand-100_alt:   #292524; --utility-brand-200_alt:   #44403c;
  --utility-brand-300_alt:   #44403c; --utility-brand-400_alt:   #57534e; --utility-brand-500_alt:   #79716b;
  --utility-brand-600_alt:   #a9a29d; --utility-brand-700_alt:   #d7d3d0; --utility-brand-800_alt:   #e7e5e4;
  --utility-brand-900_alt:   #f5f5f4;
  --utility-error-50:        #55160c; --utility-error-100:       #7a271a; --utility-error-200:       #912018;
  --utility-error-300:       #b42318; --utility-error-400:       #d92d20; --utility-error-500:       #f04438;
  --utility-error-600:       #f97066; --utility-error-700:       #fda29b;
  --utility-warning-50:      #4e1d09; --utility-warning-100:     #7a2e0e; --utility-warning-200:     #93370d;
  --utility-warning-300:     #b54708; --utility-warning-400:     #dc6803; --utility-warning-500:     #f79009;
  --utility-warning-600:     #fdb022; --utility-warning-700:     #fec84b;
  --utility-success-50:      #053321; --utility-success-100:     #074d31; --utility-success-200:     #085d3a;
  --utility-success-300:     #067647; --utility-success-400:     #079455; --utility-success-500:     #17b26a;
  --utility-success-600:     #47cd89; --utility-success-700:     #75e0a7;
  --utility-gray-blue-50:    #0d0f1c; --utility-gray-blue-100:   #101323; --utility-gray-blue-200:   #293056;
  --utility-gray-blue-300:   #363f72; --utility-gray-blue-400:   #3e4784; --utility-gray-blue-500:   #4e5ba6;
  --utility-gray-blue-600:   #717bbc; --utility-gray-blue-700:   #b3b8db;
  --utility-blue-light-50:   #062c41; --utility-blue-light-100:  #0b4a6f; --utility-blue-light-200:  #065986;
  --utility-blue-light-300:  #026aa2; --utility-blue-light-400:  #0086c9; --utility-blue-light-500:  #0ba5ec;
  --utility-blue-light-600:  #36bffa; --utility-blue-light-700:  #7cd4fd;
  --utility-info-50:         #102a56; --utility-info-100:        #194185; --utility-info-200:        #1849a9;
  --utility-info-300:        #175cd3; --utility-info-400:        #1570ef; --utility-info-500:        #2e90fa;
  --utility-info-600:        #53b1fd; --utility-info-700:        #84caff;
  --utility-blue-dark-50:    #002266; --utility-blue-dark-100:   #00359e; --utility-blue-dark-200:   #0040c1;
  --utility-blue-dark-300:   #004eeb; --utility-blue-dark-400:   #155eef; --utility-blue-dark-500:   #2970ff;
  --utility-blue-dark-600:   #528bff; --utility-blue-dark-700:   #84adff;
  --utility-indigo-50:       #1f235b; --utility-indigo-100:      #2d3282; --utility-indigo-200:      #2d31a6;
  --utility-indigo-300:      #3538cd; --utility-indigo-400:      #444ce7; --utility-indigo-500:      #6172f3;
  --utility-indigo-600:      #8098f9; --utility-indigo-700:      #a4bcfd;
  --utility-purple-50:       #27115f; --utility-purple-100:      #3e1c96; --utility-purple-200:      #4a1fb8;
  --utility-purple-300:      #5925dc; --utility-purple-400:      #6938ef; --utility-purple-500:      #7a5af8;
  --utility-purple-600:      #9b8afb; --utility-purple-700:      #bdb4fe;
  --utility-fuchsia-50:      #47104c; --utility-fuchsia-100:     #6f1877; --utility-fuchsia-200:     #821890;
  --utility-fuchsia-300:     #9f1ab1; --utility-fuchsia-400:     #ba24d5; --utility-fuchsia-500:     #d444f1;
  --utility-fuchsia-600:     #e478fa; --utility-fuchsia-700:     #eeaafd;
  --utility-pink-50:         #4e0d30; --utility-pink-100:        #851651; --utility-pink-200:        #9e165f;
  --utility-pink-300:        #c11574; --utility-pink-400:        #dd2590; --utility-pink-500:        #ee46bc;
  --utility-pink-600:        #f670c7; --utility-pink-700:        #faa7e0;
  --utility-orange-dark-50:  #57130a; --utility-orange-dark-100: #771a0d; --utility-orange-dark-200: #97180c;
  --utility-orange-dark-300: #bc1b06; --utility-orange-dark-400: #e62e05; --utility-orange-dark-500: #ff4405;
  --utility-orange-dark-600: #ff692e; --utility-orange-dark-700: #ff9c66;
  --utility-orange-50:       #511c10; --utility-orange-100:      #772917; --utility-orange-200:      #932f19;
  --utility-orange-300:      #b93815; --utility-orange-400:      #e04f16; --utility-orange-500:      #ef6820;
  --utility-orange-600:      #f38744; --utility-orange-700:      #f7b27a;
  --utility-green-50:        #052e1c; --utility-green-100:       #084c2e; --utility-green-200:       #095c37;
  --utility-green-300:       #087443; --utility-green-400:       #099250; --utility-green-500:       #16b364;
  --utility-green-600:       #3ccb7f; --utility-green-700:       #73e2a3;
  --utility-yellow-50:       #542c0d; --utility-yellow-100:      #713b12; --utility-yellow-200:      #854a0e;
  --utility-yellow-300:      #a15c07; --utility-yellow-400:      #ca8504; --utility-yellow-500:      #eaaa08;
  --utility-yellow-600:      #fac515; --utility-yellow-700:      #fde272;

  /* Component colors / Components */
  --app-store-badge-border:           #ffffff;  /* white in dark mode */
  --footer-button-fg:                 #d5d1cd;  /* gray-dark-300 */
  --footer-button-fg_hover:           #f0f0ef;  /* gray-dark-100 */
  --screen-mockup-border:             #413d3a;  /* gray-dark-700 */
  --toggle-slim-border_pressed-hover: #ffffff;  /* white */
  --text-editor-icon-fg:              #94979c;  /* neutral */
  --text-editor-icon-fg_active:       #ffffff;  /* white */
}