/* custom-elements-collection — design tokens
 *
 * Every component style references only these variables. Consumers override by
 * redefining any `--ce-*` on :root, html, or a parent element.
 */

:root,
html[data-ce-theme="dark"] {
  /* Surfaces */
  --ce-bg: #0d1117;
  --ce-surface: #161b22;
  --ce-surface-2: #1c222c;
  --ce-surface-3: #242c37;
  --ce-border: #30363d;
  --ce-border-soft: #21262d;
  --ce-border-strong: #484f58;

  /* Text */
  --ce-text: #e6edf3;
  --ce-muted: #8b949e;
  --ce-dim: #6e7681;
  --ce-text-inverse: #0d1117;

  /* Semantic colors (solid) */
  --ce-color-green: #3fb950;
  --ce-color-red: #f85149;
  --ce-color-amber: #d29922;
  --ce-color-blue: #58a6ff;
  --ce-color-purple: #bc8cff;
  --ce-color-cyan: #39d2c0;

  /* Semantic colors (tinted backgrounds) */
  --ce-color-green-bg: rgba(63, 185, 80, 0.12);
  --ce-color-red-bg: rgba(248, 81, 73, 0.12);
  --ce-color-amber-bg: rgba(210, 153, 34, 0.12);
  --ce-color-blue-bg: rgba(88, 166, 255, 0.12);
  --ce-color-purple-bg: rgba(188, 140, 255, 0.12);
  --ce-color-cyan-bg: rgba(57, 210, 192, 0.12);

  /* Semantic colors (borders) */
  --ce-color-green-border: rgba(63, 185, 80, 0.3);
  --ce-color-red-border: rgba(248, 81, 73, 0.3);
  --ce-color-amber-border: rgba(210, 153, 34, 0.3);
  --ce-color-blue-border: rgba(88, 166, 255, 0.3);
  --ce-color-purple-border: rgba(188, 140, 255, 0.3);
  --ce-color-cyan-border: rgba(57, 210, 192, 0.3);

  /* Radius scale */
  --ce-radius-sm: 6px;
  --ce-radius: 10px;
  --ce-radius-lg: 14px;
  --ce-radius-pill: 999px;

  /* Spacing scale (matches 4px grid) */
  --ce-space-1: 4px;
  --ce-space-2: 8px;
  --ce-space-3: 12px;
  --ce-space-4: 16px;
  --ce-space-5: 24px;
  --ce-space-6: 32px;
  --ce-space-7: 40px;
  --ce-space-8: 56px;

  /* Inset scale — padding for compact interactive leaf elements (chips, pills, nav links, cells).
   * Use for element-internal insets; pair with --ce-space-* for the other axis when needed.
   * --ce-space-* governs layout gaps and container padding; --ce-inset-* governs element fill.
   */
  --ce-inset-xs: 2px;    /* badge, count chip */
  --ce-inset-sm: 4px;    /* compact pill, nav link, kicker */
  --ce-inset-md: 6px;    /* heatmap cell, code header */
  --ce-inset-lg: 10px;   /* table cell, form input */

  /* Component size scale — fixed width/height for icon containers, avatars, badges.
   * Not for layout gaps; these are geometric sizes of contained UI elements.
   */
  --ce-sz-sm: 20px;   /* timeline dot, small icon */
  --ce-sz-md: 24px;   /* numbered badge */
  --ce-sz-lg: 40px;   /* avatar, icon container (standard) */
  --ce-sz-xl: 56px;   /* large avatar */

  /* Interaction state overlays — hover/active backgrounds as pure lightness shifts.
   * Lighter than --ce-color-*-bg; use on rows, disclosures, and subtle interactive surfaces.
   * Inverted in light theme (black overlay vs white overlay).
   */
  --ce-state-hover:  rgba(255, 255, 255, 0.04);
  --ce-state-active: rgba(255, 255, 255, 0.08);

  /* Code surface — intentionally dark regardless of ambient theme */
  --ce-code-bg:   #0a0e1c;
  --ce-code-text: #d2d4de;

  /* Typography */
  --ce-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --ce-font-mono: ui-monospace, "SF Mono", Consolas, Menlo, monospace;

  --ce-text-xs: 11px;
  --ce-text-sm: 12.5px;
  --ce-text-base: 14px;
  --ce-text-md: 15px;
  --ce-text-lg: 17px;
  --ce-text-xl: 22px;
  --ce-text-2xl: 28px;
  --ce-text-3xl: 40px;

  --ce-line-tight: 1.15;
  --ce-line-snug: 1.35;
  --ce-line-normal: 1.55;
  --ce-line-relaxed: 1.7;

  /* Motion */
  --ce-transition-fast: 0.12s ease;
  --ce-transition: 0.2s ease;
  --ce-transition-slow: 0.35s ease;

  /* Elevation (subtle, we're on a dark shell) */
  --ce-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --ce-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  --ce-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);

  /* Focus ring — consistent a11y */
  --ce-focus-ring: 0 0 0 2px var(--ce-color-blue);
}

html[data-ce-theme="light"] {
  --ce-bg: #fff;
  --ce-surface: #f6f8fa;
  --ce-surface-2: #eaeef2;
  --ce-surface-3: #d0d7de;
  --ce-border: #d0d7de;
  --ce-border-soft: #eaeef2;
  --ce-border-strong: #afb8c1;

  --ce-text: #0f172a;
  --ce-muted: #57606a;
  --ce-dim: #6e7781;
  --ce-text-inverse: #fff;

  --ce-color-green: #1f883d;
  --ce-color-red: #cf222e;
  --ce-color-amber: #9a6700;
  --ce-color-blue: #0969da;
  --ce-color-purple: #8250df;
  --ce-color-cyan: #1b7c83;

  --ce-color-green-bg: rgba(31, 136, 61, 0.08);
  --ce-color-red-bg: rgba(207, 34, 46, 0.08);
  --ce-color-amber-bg: rgba(154, 103, 0, 0.08);
  --ce-color-blue-bg: rgba(9, 105, 218, 0.08);
  --ce-color-purple-bg: rgba(130, 80, 223, 0.08);
  --ce-color-cyan-bg: rgba(27, 124, 131, 0.08);

  --ce-color-green-border: rgba(31, 136, 61, 0.25);
  --ce-color-red-border: rgba(207, 34, 46, 0.25);
  --ce-color-amber-border: rgba(154, 103, 0, 0.25);
  --ce-color-blue-border: rgba(9, 105, 218, 0.25);
  --ce-color-purple-border: rgba(130, 80, 223, 0.25);
  --ce-color-cyan-border: rgba(27, 124, 131, 0.25);

  --ce-state-hover:  rgba(0, 0, 0, 0.04);
  --ce-state-active: rgba(0, 0, 0, 0.08);
}

/* ---------- Swiss International Typographic Style (dark) ---------- */

html[data-ce-theme="swiss"] {
  --ce-bg:            #0a0a0a;
  --ce-surface:       #111;
  --ce-surface-2:     #181818;
  --ce-surface-3:     #1f1f1f;
  --ce-border:        #2a2a2a;
  --ce-border-soft:   #1e1e1e;
  --ce-border-strong: #3d3d3d;

  --ce-text:         #f0f0f0;
  --ce-muted:        #888;
  --ce-dim:          #555;
  --ce-text-inverse: #f0f0f0;

  --ce-color-green:  #4caf6e;
  --ce-color-red:    #d22;
  --ce-color-amber:  #c8922a;
  --ce-color-blue:   #4a90d9;
  --ce-color-purple: #9b72cf;
  --ce-color-cyan:   #2eaaa0;

  --ce-color-green-bg:  rgba(76,  175, 110, 0.12);
  --ce-color-red-bg:    rgba(221,  34,  34, 0.12);
  --ce-color-amber-bg:  rgba(200, 146,  42, 0.12);
  --ce-color-blue-bg:   rgba(74,  144, 217, 0.12);
  --ce-color-purple-bg: rgba(155, 114, 207, 0.12);
  --ce-color-cyan-bg:   rgba(46,  170, 160, 0.12);

  --ce-color-green-border:  rgba(76,  175, 110, 0.30);
  --ce-color-red-border:    rgba(221,  34,  34, 0.30);
  --ce-color-amber-border:  rgba(200, 146,  42, 0.30);
  --ce-color-blue-border:   rgba(74,  144, 217, 0.30);
  --ce-color-purple-border: rgba(155, 114, 207, 0.30);
  --ce-color-cyan-border:   rgba(46,  170, 160, 0.30);

  --ce-radius-sm:   0px;
  --ce-radius:      1px;
  --ce-radius-lg:   2px;
  --ce-radius-pill: 999px;

  --ce-font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;

  --ce-transition-fast: 0.08s ease;
  --ce-transition:      0.15s ease;
  --ce-transition-slow: 0.25s ease;

  --ce-shadow-sm: 0 1px 2px  rgba(0, 0, 0, 0.40);
  --ce-shadow:    0 2px 6px  rgba(0, 0, 0, 0.55);
  --ce-shadow-lg: 0 6px 18px rgba(0, 0, 0, 0.70);

  --ce-focus-ring: 0 0 0 2px var(--ce-color-red);
}

/* ---------- Bauhaus (dark) ---------- */

html[data-ce-theme="bauhaus"] {
  --ce-bg:            #0a0b0f;
  --ce-surface:       #111318;
  --ce-surface-2:     #181b22;
  --ce-surface-3:     #1f232d;
  --ce-border:        #2a2f3d;
  --ce-border-soft:   #1c2030;
  --ce-border-strong: #3d4560;

  --ce-text:         #f0f0f0;
  --ce-muted:        #8a90a0;
  --ce-dim:          #555d70;
  --ce-text-inverse: #0a0b0f;

  --ce-color-green:  #2d9e6b;
  --ce-color-red:    #e63946;
  --ce-color-amber:  #ffd60a;
  --ce-color-blue:   #4a90d9;
  --ce-color-purple: #8b5cf6;
  --ce-color-cyan:   #22b5c4;

  --ce-color-green-bg:  rgba(45,  158, 107, 0.12);
  --ce-color-red-bg:    rgba(230,  57,  70, 0.12);
  --ce-color-amber-bg:  rgba(255, 214,  10, 0.10);
  --ce-color-blue-bg:   rgba(74,  144, 217, 0.12);
  --ce-color-purple-bg: rgba(139,  92, 246, 0.12);
  --ce-color-cyan-bg:   rgba(34,  181, 196, 0.12);

  --ce-color-green-border:  rgba(45,  158, 107, 0.30);
  --ce-color-red-border:    rgba(230,  57,  70, 0.30);
  --ce-color-amber-border:  rgba(255, 214,  10, 0.28);
  --ce-color-blue-border:   rgba(74,  144, 217, 0.30);
  --ce-color-purple-border: rgba(139,  92, 246, 0.30);
  --ce-color-cyan-border:   rgba(34,  181, 196, 0.30);

  --ce-radius-sm:   1px;
  --ce-radius:      2px;
  --ce-radius-lg:   3px;
  --ce-radius-pill: 999px;

  --ce-font-sans: Futura, "Century Gothic", "Trebuchet MS", Arial, sans-serif;

  --ce-transition-fast: 0.10s linear;
  --ce-transition:      0.18s linear;
  --ce-transition-slow: 0.30s linear;

  --ce-shadow-sm: 0 1px 3px  rgba(0,  0,  0, 0.50);
  --ce-shadow:    0 3px 10px rgba(0,  5, 20, 0.60);
  --ce-shadow-lg: 0 8px 28px rgba(0,  5, 20, 0.75);

  --ce-focus-ring: 0 0 0 2px #e63946;
}

/* ---------- Muji / Japanese minimalism (light) ---------- */

html[data-ce-theme="muji"] {
  --ce-bg:            #f5f0eb;
  --ce-surface:       #f0e9e1;
  --ce-surface-2:     #e5ddd4;
  --ce-surface-3:     #d4cbbf;
  --ce-border:        #c8bfb0;
  --ce-border-soft:   #ddd7ce;
  --ce-border-strong: #a89d8e;

  --ce-text:         #1a1714;
  --ce-muted:        #6b6057;
  --ce-dim:          #9c9188;
  --ce-text-inverse: #f5f0eb;

  --ce-color-green:  #4a7c59;
  --ce-color-red:    #8b3a3a;
  --ce-color-amber:  #8b6914;
  --ce-color-blue:   #2a5a8b;
  --ce-color-purple: #6a4c7c;
  --ce-color-cyan:   #2a7a7a;

  --ce-color-green-bg:  rgba(74,  124,  89, 0.08);
  --ce-color-red-bg:    rgba(139,  58,  58, 0.08);
  --ce-color-amber-bg:  rgba(139, 105,  20, 0.08);
  --ce-color-blue-bg:   rgba(42,   90, 139, 0.08);
  --ce-color-purple-bg: rgba(106,  76, 124, 0.08);
  --ce-color-cyan-bg:   rgba(42,  122, 122, 0.08);

  --ce-color-green-border:  rgba(74,  124,  89, 0.22);
  --ce-color-red-border:    rgba(139,  58,  58, 0.22);
  --ce-color-amber-border:  rgba(139, 105,  20, 0.22);
  --ce-color-blue-border:   rgba(42,   90, 139, 0.22);
  --ce-color-purple-border: rgba(106,  76, 124, 0.22);
  --ce-color-cyan-border:   rgba(42,  122, 122, 0.22);

  --ce-radius-sm:   2px;
  --ce-radius:      4px;
  --ce-radius-lg:   6px;
  --ce-radius-pill: 999px;

  --ce-font-sans: "Hiragino Sans", "Noto Sans JP", "Yu Gothic", "Meiryo", system-ui, sans-serif;

  --ce-transition-fast: 0.18s ease;
  --ce-transition:      0.28s ease;
  --ce-transition-slow: 0.45s ease;

  --ce-shadow-sm: 0 1px  3px rgba(60, 42, 20, 0.08);
  --ce-shadow:    0 3px 10px rgba(60, 42, 20, 0.10);
  --ce-shadow-lg: 0 8px 28px rgba(60, 42, 20, 0.14);

  --ce-focus-ring: 0 0 0 2px rgba(42, 90, 139, 0.55);
}

/* ---------- Neo-brutalism (light) ---------- */

html[data-ce-theme="neo-brutal"] {
  --ce-bg:            #fff;
  --ce-surface:       #f5f5f5;
  --ce-surface-2:     #ebebeb;
  --ce-surface-3:     #e0e0e0;
  --ce-border:        #000;
  --ce-border-soft:   #333;
  --ce-border-strong: #000;

  --ce-text:         #000;
  --ce-muted:        #444;
  --ce-dim:          #666;
  --ce-text-inverse: #fff;

  --ce-color-green:  #0c4;
  --ce-color-red:    #f24;
  --ce-color-amber:  #fc0;
  --ce-color-blue:   #04f;
  --ce-color-purple: #c0f;
  --ce-color-cyan:   #0cf;

  --ce-color-green-bg:  rgba(0,   204,  68, 0.12);
  --ce-color-red-bg:    rgba(255,  34,  68, 0.12);
  --ce-color-amber-bg:  rgba(255, 204,   0, 0.12);
  --ce-color-blue-bg:   rgba(0,    68, 255, 0.12);
  --ce-color-purple-bg: rgba(204,   0, 255, 0.12);
  --ce-color-cyan-bg:   rgba(0,   204, 255, 0.12);

  --ce-color-green-border:  rgba(0,   204,  68, 0.45);
  --ce-color-red-border:    rgba(255,  34,  68, 0.45);
  --ce-color-amber-border:  rgba(255, 204,   0, 0.45);
  --ce-color-blue-border:   rgba(0,    68, 255, 0.45);
  --ce-color-purple-border: rgba(204,   0, 255, 0.45);
  --ce-color-cyan-border:   rgba(0,   204, 255, 0.45);

  --ce-radius-sm:   0px;
  --ce-radius:      0px;
  --ce-radius-lg:   0px;
  --ce-radius-pill: 999px;

  --ce-font-sans: "Space Grotesk", "IBM Plex Sans", "Arial Black", Arial, sans-serif;

  --ce-transition-fast: 0.08s ease;
  --ce-transition:      0.15s ease;
  --ce-transition-slow: 0.25s ease;

  --ce-shadow-sm: 2px 2px 0 #000;
  --ce-shadow:    4px 4px 0 #000;
  --ce-shadow-lg: 6px 6px 0 #000;

  --ce-focus-ring: 0 0 0 3px #000;
}

/* ---------- Solarized (dark) — Ethan Schoonover 2011 ---------- */

html[data-ce-theme="solarized"] {
  --ce-bg:            #002b36;
  --ce-surface:       #073642;
  --ce-surface-2:     #0d3d4a;
  --ce-surface-3:     #1a4a56;
  --ce-border:        rgba(88, 110, 117, 0.45);
  --ce-border-soft:   rgba(88, 110, 117, 0.22);
  --ce-border-strong: rgba(88, 110, 117, 0.70);

  --ce-text:         #839496;
  --ce-muted:        #657b83;
  --ce-dim:          #586e75;
  --ce-text-inverse: #002b36;

  --ce-color-green:  #859900;
  --ce-color-red:    #dc322f;
  --ce-color-amber:  #b58900;
  --ce-color-blue:   #268bd2;
  --ce-color-purple: #6c71c4;
  --ce-color-cyan:   #2aa198;

  --ce-color-green-bg:  rgba(133, 153,   0, 0.12);
  --ce-color-red-bg:    rgba(220,  50,  47, 0.12);
  --ce-color-amber-bg:  rgba(181, 137,   0, 0.12);
  --ce-color-blue-bg:   rgba(38,  139, 210, 0.12);
  --ce-color-purple-bg: rgba(108, 113, 196, 0.12);
  --ce-color-cyan-bg:   rgba(42,  161, 152, 0.12);

  --ce-color-green-border:  rgba(133, 153,   0, 0.30);
  --ce-color-red-border:    rgba(220,  50,  47, 0.30);
  --ce-color-amber-border:  rgba(181, 137,   0, 0.30);
  --ce-color-blue-border:   rgba(38,  139, 210, 0.30);
  --ce-color-purple-border: rgba(108, 113, 196, 0.30);
  --ce-color-cyan-border:   rgba(42,  161, 152, 0.30);

  --ce-radius-sm:   4px;
  --ce-radius:      6px;
  --ce-radius-lg:   10px;
  --ce-radius-pill: 999px;

  --ce-font-sans: ui-monospace, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
  --ce-font-mono: ui-monospace, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;

  --ce-transition-fast: 0.10s ease;
  --ce-transition:      0.18s ease;
  --ce-transition-slow: 0.30s ease;

  --ce-shadow-sm: 0 1px  3px rgba(0, 43, 54, 0.40);
  --ce-shadow:    0 2px  8px rgba(0, 43, 54, 0.60);
  --ce-shadow-lg: 0 8px 24px rgba(0, 43, 54, 0.80);

  --ce-focus-ring: 0 0 0 2px #268bd2;
}

/* ---------- Nordic / Scandinavian — Nord palette (dark) ---------- */

html[data-ce-theme="nordic"] {
  --ce-bg:            #2e3440;
  --ce-surface:       #3b4252;
  --ce-surface-2:     #434c5e;
  --ce-surface-3:     #4c566a;
  --ce-border:        #4c566a;
  --ce-border-soft:   #3b4252;
  --ce-border-strong: #6b7a96;

  --ce-text:         #d8dee9;
  --ce-muted:        #8fbcbb;
  --ce-dim:          #6b7a96;
  --ce-text-inverse: #2e3440;

  --ce-color-green:  #a3be8c;
  --ce-color-red:    #bf616a;
  --ce-color-amber:  #ebcb8b;
  --ce-color-blue:   #81a1c1;
  --ce-color-purple: #b48ead;
  --ce-color-cyan:   #88c0d0;

  --ce-color-green-bg:  rgba(163, 190, 140, 0.13);
  --ce-color-red-bg:    rgba(191,  97, 106, 0.13);
  --ce-color-amber-bg:  rgba(235, 203, 139, 0.13);
  --ce-color-blue-bg:   rgba(129, 161, 193, 0.13);
  --ce-color-purple-bg: rgba(180, 142, 173, 0.13);
  --ce-color-cyan-bg:   rgba(136, 192, 208, 0.13);

  --ce-color-green-border:  rgba(163, 190, 140, 0.32);
  --ce-color-red-border:    rgba(191,  97, 106, 0.32);
  --ce-color-amber-border:  rgba(235, 203, 139, 0.32);
  --ce-color-blue-border:   rgba(129, 161, 193, 0.32);
  --ce-color-purple-border: rgba(180, 142, 173, 0.32);
  --ce-color-cyan-border:   rgba(136, 192, 208, 0.32);

  --ce-radius-sm:   6px;
  --ce-radius:      10px;
  --ce-radius-lg:   16px;
  --ce-radius-pill: 999px;

  --ce-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --ce-transition-fast: 0.15s ease;
  --ce-transition:      0.25s ease;
  --ce-transition-slow: 0.40s ease;

  --ce-shadow-sm: 0 1px  3px rgba(46, 52, 64, 0.40);
  --ce-shadow:    0 2px  8px rgba(46, 52, 64, 0.55);
  --ce-shadow-lg: 0 8px 24px rgba(46, 52, 64, 0.70);

  --ce-focus-ring: 0 0 0 2px #88c0d0;
}

/* ---------- Memphis Group / Y2K Revival (light) ---------- */

html[data-ce-theme="memphis"] {
  --ce-bg:            #fafafa;
  --ce-surface:       #f2f2f2;
  --ce-surface-2:     #ebebeb;
  --ce-surface-3:     #e2e2e2;
  --ce-border:        #ccc;
  --ce-border-soft:   #dedede;
  --ce-border-strong: #aaa;

  --ce-text:         #111;
  --ce-muted:        #555;
  --ce-dim:          #888;
  --ce-text-inverse: #fafafa;

  --ce-color-green:  #0c6;
  --ce-color-red:    #f36;
  --ce-color-amber:  #fc0;
  --ce-color-blue:   #35f;
  --ce-color-purple: #c3f;
  --ce-color-cyan:   #0de;

  --ce-color-green-bg:  rgba(0,   204, 102, 0.13);
  --ce-color-red-bg:    rgba(255,  51, 102, 0.13);
  --ce-color-amber-bg:  rgba(255, 204,   0, 0.13);
  --ce-color-blue-bg:   rgba(51,   85, 255, 0.13);
  --ce-color-purple-bg: rgba(204,  51, 255, 0.13);
  --ce-color-cyan-bg:   rgba(0,   221, 238, 0.13);

  --ce-color-green-border:  rgba(0,   204, 102, 0.40);
  --ce-color-red-border:    rgba(255,  51, 102, 0.40);
  --ce-color-amber-border:  rgba(255, 204,   0, 0.40);
  --ce-color-blue-border:   rgba(51,   85, 255, 0.40);
  --ce-color-purple-border: rgba(204,  51, 255, 0.40);
  --ce-color-cyan-border:   rgba(0,   221, 238, 0.40);

  --ce-radius-sm:   10px;
  --ce-radius:      18px;
  --ce-radius-lg:   28px;
  --ce-radius-pill: 999px;

  --ce-font-sans: "Fredoka", "Nunito", "Varela Round", "Comic Sans MS", system-ui, sans-serif;

  --ce-transition-fast: 0.10s cubic-bezier(0.34, 1.56, 0.64, 1);
  --ce-transition:      0.20s cubic-bezier(0.34, 1.56, 0.64, 1);
  --ce-transition-slow: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);

  --ce-shadow-sm: 2px 2px 0 rgba(51,  85, 255, 0.15);
  --ce-shadow:    4px 4px 0 rgba(204,  51, 255, 0.20);
  --ce-shadow-lg: 6px 6px 0 rgba(255,  51, 102, 0.20);

  --ce-focus-ring: 0 0 0 3px #35f;
}

/* ---------- Gruvbox — Terminal Artisan (dark) ---------- */

html[data-ce-theme="gruvbox"] {
  --ce-bg:            #282828;
  --ce-surface:       #3c3836;
  --ce-surface-2:     #504945;
  --ce-surface-3:     #665c54;
  --ce-border:        #504945;
  --ce-border-soft:   #3c3836;
  --ce-border-strong: #7c6f64;

  --ce-text:         #ebdbb2;
  --ce-muted:        #bdae93;
  --ce-dim:          #a89984;
  --ce-text-inverse: #282828;

  --ce-color-green:  #b8bb26;
  --ce-color-red:    #fb4934;
  --ce-color-amber:  #fabd2f;
  --ce-color-blue:   #83a598;
  --ce-color-purple: #d3869b;
  --ce-color-cyan:   #8ec07c;

  --ce-color-green-bg:  rgba(184, 187,  38, 0.12);
  --ce-color-red-bg:    rgba(251,  73,  52, 0.12);
  --ce-color-amber-bg:  rgba(250, 189,  47, 0.12);
  --ce-color-blue-bg:   rgba(131, 165, 152, 0.12);
  --ce-color-purple-bg: rgba(211, 134, 155, 0.12);
  --ce-color-cyan-bg:   rgba(142, 192, 124, 0.12);

  --ce-color-green-border:  rgba(184, 187,  38, 0.30);
  --ce-color-red-border:    rgba(251,  73,  52, 0.30);
  --ce-color-amber-border:  rgba(250, 189,  47, 0.30);
  --ce-color-blue-border:   rgba(131, 165, 152, 0.30);
  --ce-color-purple-border: rgba(211, 134, 155, 0.30);
  --ce-color-cyan-border:   rgba(142, 192, 124, 0.30);

  --ce-radius-sm:   4px;
  --ce-radius:      6px;
  --ce-radius-lg:   10px;
  --ce-radius-pill: 999px;

  --ce-font-sans: ui-monospace, "JetBrains Mono", "Cascadia Code", "Fira Code", "SF Mono", Consolas, monospace;
  --ce-font-mono: ui-monospace, "JetBrains Mono", "Cascadia Code", "Fira Code", "SF Mono", Consolas, monospace;

  --ce-transition-fast: 0.10s ease;
  --ce-transition:      0.18s ease;
  --ce-transition-slow: 0.30s ease;

  --ce-shadow-sm: 0 1px  2px rgba(40, 40, 40, 0.50);
  --ce-shadow:    0 2px  8px rgba(40, 40, 40, 0.65);
  --ce-shadow-lg: 0 8px 24px rgba(40, 40, 40, 0.80);

  --ce-focus-ring: 0 0 0 2px #fabd2f;
}

/* ---------- reset / body scaffolding ---------- */

html[data-ce-scaffold],
html[data-ce-scaffold] body {
  background: var(--ce-bg);
  color: var(--ce-text);
  font-family: var(--ce-font-sans);
  font-size: var(--ce-text-base);
  line-height: var(--ce-line-normal);
  -webkit-font-smoothing: antialiased;
}

html[data-ce-scaffold] *,
html[data-ce-scaffold] *::before,
html[data-ce-scaffold] *::after {
  box-sizing: border-box;
}

html[data-ce-scaffold] body {
  margin: 0;
  padding: 0;
}

html[data-ce-scaffold] a {
  color: var(--ce-color-blue);
  text-decoration: none;
}
html[data-ce-scaffold] a:hover {
  text-decoration: underline;
}