:root {
  --reshape-font-sans: "Nunito", sans-serif;

  --reshape-core-gold: #fab31f;
  --reshape-core-gold-rgb: 250, 179, 31;
  --reshape-core-fuchsia: #e2057f;
  --reshape-core-fuchsia-rgb: 226, 5, 127;
  --reshape-core-magenta: #b800e5;
  --reshape-core-magenta-rgb: 184, 0, 229;
  --reshape-core-violet: #5b00ea;
  --reshape-core-violet-rgb: 91, 0, 234;
  --reshape-core-indigo: #1c00ea;
  --reshape-core-indigo-rgb: 28, 0, 234;
  --reshape-core-white: #ffffff;
  --reshape-core-white-rgb: 255, 255, 255;
  --reshape-gradient-warm-start: #fdf262;
  --reshape-gradient-warm-end: #d74e43;
  --reshape-brand-plum: #5c012e;
  --reshape-brand-plum-rgb: 92, 1, 46;
  --reshape-brand-navy: #08006a;
  --reshape-brand-navy-rgb: 8, 0, 106;

  --reshape-page-gradient: linear-gradient(
    90deg,
    var(--reshape-brand-plum),
    var(--reshape-brand-navy)
  );
  --reshape-reshape-gradient: linear-gradient(
    135deg,
    var(--reshape-core-gold) 0%,
    var(--reshape-core-fuchsia) 54%,
    var(--reshape-core-violet) 100%
  );
  --reshape-highlight-gradient: linear-gradient(
    135deg,
    var(--reshape-gradient-warm-start),
    var(--reshape-gradient-warm-end)
  );

  --reshape-bg-page: #0d0528;
  --reshape-bg-page-rgb: 13, 5, 40;
  --reshape-bg-canvas: #120734;
  --reshape-bg-canvas-rgb: 18, 7, 52;
  --reshape-surface-1: #130836;
  --reshape-surface-1-rgb: 26, 13, 72;
  --reshape-surface-2: #020516;
  --reshape-surface-2-rgb: 36, 17, 95;
  --reshape-surface-3: #2f1778;
  --reshape-surface-3-rgb: 47, 23, 120;
  --reshape-surface-elevated: rgb(3 23 45 / 59%);
  --reshape-surface-overlay: rgba(8, 3, 24, 0.84);
  --reshape-surface-glass: rgba(255, 255, 255, 0.92);
  --reshape-surface-glass-rgb: 255, 255, 255;

  --reshape-text-primary: #f8f1ff;
  --reshape-text-primary-rgb: 248, 241, 255;
  --reshape-text-secondary: #d5c7f3;
  --reshape-text-muted: #aa9dcf;
  --reshape-text-inverse: #170a37;
  --reshape-text-inverse-rgb: 23, 10, 55;
  --reshape-link-color: #ffd565;
  --reshape-link-hover: #ffe087;

  --reshape-border-subtle: rgba(255, 255, 255, 0.12);
  --reshape-border-strong: rgba(255, 255, 255, 0.22);
  --reshape-border-accent: rgba(226, 5, 127, 0.32);
  --reshape-focus-ring: rgba(184, 0, 229, 0.35);

  --reshape-shadow-sm: 0 10px 24px rgba(5, 3, 18, 0.16);
  --reshape-shadow-md: 0 18px 45px rgba(5, 3, 18, 0.28);
  --reshape-shadow-lg: 0 24px 70px rgba(4, 1, 18, 0.42);
  --reshape-shadow-brand: 0 0 0 1px rgba(226, 5, 127, 0.15),
    0 18px 45px rgba(91, 0, 234, 0.25);

  --reshape-radius-sm: 0.5rem;
  --reshape-radius-md: 0.75rem;
  --reshape-radius-lg: 1.25rem;
  --reshape-radius-pill: 999px;

  --reshape-space-1: 0.25rem;
  --reshape-space-2: 0.5rem;
  --reshape-space-3: 0.75rem;
  --reshape-space-4: 1rem;
  --reshape-space-5: 1.5rem;
  --reshape-space-6: 2rem;

  --reshape-control-bg: rgba(255, 255, 255, 0.08);
  --reshape-control-bg-hover: rgba(255, 255, 255, 0.14);
  --reshape-control-border: rgba(255, 255, 255, 0.16);
  --reshape-control-text: var(--reshape-text-primary);

  --reshape-action-primary: #b800e5;
  --reshape-action-primary-rgb: 184, 0, 229;
  --reshape-action-primary-hover: #cf32f7;
  --reshape-action-primary-text: #ffffff;

  --reshape-action-secondary: #2e1f76;
  --reshape-action-secondary-rgb: 46, 31, 118;
  --reshape-action-secondary-hover: #402a98;
  --reshape-action-secondary-text: #f8f1ff;

  --reshape-action-conversion: #2ad57f;
  --reshape-action-conversion-rgb: 42, 213, 127;
  --reshape-action-conversion-hover: #41e792;
  --reshape-action-conversion-text: #08160f;

  --reshape-action-success: #20bc69;
  --reshape-action-success-rgb: 32, 188, 105;
  --reshape-action-success-hover: #2ad87a;
  --reshape-action-success-text: #08150e;

  --reshape-action-danger: #f05d84;
  --reshape-action-danger-rgb: 240, 93, 132;
  --reshape-action-danger-hover: #ff7396;
  --reshape-action-danger-text: #ffffff;

  --reshape-action-warning: #fab31f;
  --reshape-action-warning-rgb: 250, 179, 31;
  --reshape-action-warning-hover: #ffca52;
  --reshape-action-warning-text: #281700;

  --reshape-action-info: #6683ff;
  --reshape-action-info-rgb: 102, 131, 255;
  --reshape-action-info-hover: #8098ff;
  --reshape-action-info-text: #ffffff;

  --reshape-action-light: #f7f0ff;
  --reshape-action-light-rgb: 247, 240, 255;
  --reshape-action-light-hover: #ffffff;
  --reshape-action-light-text: #1b113e;

  --reshape-action-dark: #170a37;
  --reshape-action-dark-rgb: 23, 10, 55;
  --reshape-action-dark-hover: #241252;
  --reshape-action-dark-text: #f8f1ff;

  --reshape-button-reshape-text: #fdfbff;
  --reshape-button-reshape-shadow: 0 14px 34px rgba(226, 5, 127, 0.25);
}

:host {
  --reshape-font-sans: "Nunito", sans-serif;

  --reshape-core-gold: #fab31f;
  --reshape-core-gold-rgb: 250, 179, 31;
  --reshape-core-fuchsia: #e2057f;
  --reshape-core-fuchsia-rgb: 226, 5, 127;
  --reshape-core-magenta: #b800e5;
  --reshape-core-magenta-rgb: 184, 0, 229;
  --reshape-core-violet: #5b00ea;
  --reshape-core-violet-rgb: 91, 0, 234;
  --reshape-core-indigo: #1c00ea;
  --reshape-core-indigo-rgb: 28, 0, 234;
  --reshape-core-white: #ffffff;
  --reshape-core-white-rgb: 255, 255, 255;
  --reshape-gradient-warm-start: #fdf262;
  --reshape-gradient-warm-end: #d74e43;
  --reshape-brand-plum: #5c012e;
  --reshape-brand-plum-rgb: 92, 1, 46;
  --reshape-brand-navy: #08006a;
  --reshape-brand-navy-rgb: 8, 0, 106;

  --reshape-page-gradient: linear-gradient(
    90deg,
    var(--reshape-brand-plum),
    var(--reshape-brand-navy)
  );
  --reshape-reshape-gradient: linear-gradient(
    135deg,
    var(--reshape-core-gold) 0%,
    var(--reshape-core-fuchsia) 54%,
    var(--reshape-core-violet) 100%
  );
  --reshape-highlight-gradient: linear-gradient(
    135deg,
    var(--reshape-gradient-warm-start),
    var(--reshape-gradient-warm-end)
  );

  --reshape-bg-page: #0d0528;
  --reshape-bg-page-rgb: 13, 5, 40;
  --reshape-bg-canvas: #120734;
  --reshape-bg-canvas-rgb: 18, 7, 52;
  --reshape-surface-1: #031322;
  --reshape-surface-1-rgb: 26, 13, 72;
  --reshape-surface-2: #061f3b;
  --reshape-surface-2-rgb: 36, 17, 95;
  --reshape-surface-3: #2f1778;
  --reshape-surface-3-rgb: 47, 23, 120;
  --reshape-surface-elevated: rgb(3 23 45 / 90%);
  --reshape-surface-overlay: rgba(8, 3, 24, 0.84);
  --reshape-surface-glass: rgba(255, 255, 255, 0.92);
  --reshape-surface-glass-rgb: 255, 255, 255;

  --reshape-text-primary: #f8f1ff;
  --reshape-text-primary-rgb: 248, 241, 255;
  --reshape-text-secondary: #d5c7f3;
  --reshape-text-muted: #aa9dcf;
  --reshape-text-inverse: #170a37;
  --reshape-text-inverse-rgb: 23, 10, 55;
  --reshape-link-color: #ffd565;
  --reshape-link-hover: #ffe087;

  --reshape-border-subtle: rgba(255, 255, 255, 0.12);
  --reshape-border-strong: rgba(255, 255, 255, 0.22);
  --reshape-border-accent: rgba(226, 5, 127, 0.32);
  --reshape-focus-ring: rgba(184, 0, 229, 0.35);

  --reshape-shadow-sm: 0 10px 24px rgba(5, 3, 18, 0.16);
  --reshape-shadow-md: 0 18px 45px rgba(5, 3, 18, 0.28);
  --reshape-shadow-lg: 0 24px 70px rgba(4, 1, 18, 0.42);
  --reshape-shadow-brand: 0 0 0 1px rgba(226, 5, 127, 0.15),
    0 18px 45px rgba(91, 0, 234, 0.25);

  --reshape-radius-sm: 0.5rem;
  --reshape-radius-md: 0.75rem;
  --reshape-radius-lg: 1.25rem;
  --reshape-radius-pill: 999px;

  --reshape-space-1: 0.25rem;
  --reshape-space-2: 0.5rem;
  --reshape-space-3: 0.75rem;
  --reshape-space-4: 1rem;
  --reshape-space-5: 1.5rem;
  --reshape-space-6: 2rem;

  --reshape-control-bg: rgba(255, 255, 255, 0.08);
  --reshape-control-bg-hover: rgba(255, 255, 255, 0.14);
  --reshape-control-border: rgba(255, 255, 255, 0.16);
  --reshape-control-text: var(--reshape-text-primary);

  --reshape-action-primary: #b800e5;
  --reshape-action-primary-rgb: 184, 0, 229;
  --reshape-action-primary-hover: #cf32f7;
  --reshape-action-primary-text: #ffffff;

  --reshape-action-secondary: #2e1f76;
  --reshape-action-secondary-rgb: 46, 31, 118;
  --reshape-action-secondary-hover: #402a98;
  --reshape-action-secondary-text: #f8f1ff;

  --reshape-action-conversion: #2ad57f;
  --reshape-action-conversion-rgb: 42, 213, 127;
  --reshape-action-conversion-hover: #41e792;
  --reshape-action-conversion-text: #08160f;

  --reshape-action-success: #20bc69;
  --reshape-action-success-rgb: 32, 188, 105;
  --reshape-action-success-hover: #2ad87a;
  --reshape-action-success-text: #08150e;

  --reshape-action-danger: #f05d84;
  --reshape-action-danger-rgb: 240, 93, 132;
  --reshape-action-danger-hover: #ff7396;
  --reshape-action-danger-text: #ffffff;

  --reshape-action-warning: #fab31f;
  --reshape-action-warning-rgb: 250, 179, 31;
  --reshape-action-warning-hover: #ffca52;
  --reshape-action-warning-text: #281700;

  --reshape-action-info: #6683ff;
  --reshape-action-info-rgb: 102, 131, 255;
  --reshape-action-info-hover: #8098ff;
  --reshape-action-info-text: #ffffff;

  --reshape-action-light: #f7f0ff;
  --reshape-action-light-rgb: 247, 240, 255;
  --reshape-action-light-hover: #ffffff;
  --reshape-action-light-text: #1b113e;

  --reshape-action-dark: #170a37;
  --reshape-action-dark-rgb: 23, 10, 55;
  --reshape-action-dark-hover: #241252;
  --reshape-action-dark-text: #f8f1ff;

  --reshape-button-reshape-text: #fdfbff;
  --reshape-button-reshape-shadow: 0 14px 34px rgba(226, 5, 127, 0.25);
}

[data-theme="dark"] {
  color-scheme: dark;
}

:host([data-theme="dark"]) {
  color-scheme: dark;
}

[data-theme="light"] {
  color-scheme: light;

  --reshape-bg-page: #f8f4ff;
  --reshape-bg-page-rgb: 248, 244, 255;
  --reshape-bg-canvas: #f4ecff;
  --reshape-bg-canvas-rgb: 244, 236, 255;
  --reshape-surface-1: #ffffff;
  --reshape-surface-1-rgb: 255, 255, 255;
  --reshape-surface-2: #f1e8ff;
  --reshape-surface-2-rgb: 241, 232, 255;
  --reshape-surface-3: #eadfff;
  --reshape-surface-3-rgb: 234, 223, 255;
  --reshape-surface-elevated: rgba(255, 255, 255, 0.96);
  --reshape-surface-overlay: rgba(248, 242, 255, 0.86);
  --reshape-surface-glass: rgba(255, 255, 255, 0.96);

  --reshape-text-primary: #1d103f;
  --reshape-text-primary-rgb: 29, 16, 63;
  --reshape-text-secondary: #463072;
  --reshape-text-muted: #69598d;
  --reshape-text-inverse: #fbf7ff;
  --reshape-text-inverse-rgb: 251, 247, 255;
  --reshape-link-color: #7b08cf;
  --reshape-link-hover: #5b00ea;

  --reshape-border-subtle: rgba(35, 18, 86, 0.12);
  --reshape-border-strong: rgba(35, 18, 86, 0.2);
  --reshape-border-accent: rgba(226, 5, 127, 0.22);
  --reshape-focus-ring: rgba(91, 0, 234, 0.22);

  --reshape-shadow-sm: 0 12px 30px rgba(41, 20, 85, 0.08);
  --reshape-shadow-md: 0 18px 42px rgba(41, 20, 85, 0.12);
  --reshape-shadow-lg: 0 24px 54px rgba(41, 20, 85, 0.16);
  --reshape-shadow-brand: 0 0 0 1px rgba(226, 5, 127, 0.08),
    0 18px 45px rgba(91, 0, 234, 0.12);

  --reshape-control-bg: rgba(35, 18, 86, 0.05);
  --reshape-control-bg-hover: rgba(35, 18, 86, 0.1);
  --reshape-control-border: rgba(35, 18, 86, 0.14);
  --reshape-control-text: var(--reshape-text-primary);
}

:host([data-theme="light"]) {
  color-scheme: light;

  --reshape-bg-page: #f8f4ff;
  --reshape-bg-page-rgb: 248, 244, 255;
  --reshape-bg-canvas: #f4ecff;
  --reshape-bg-canvas-rgb: 244, 236, 255;
  --reshape-surface-1: #ffffff;
  --reshape-surface-1-rgb: 255, 255, 255;
  --reshape-surface-2: #f1e8ff;
  --reshape-surface-2-rgb: 241, 232, 255;
  --reshape-surface-3: #eadfff;
  --reshape-surface-3-rgb: 234, 223, 255;
  --reshape-surface-elevated: rgba(255, 255, 255, 0.96);
  --reshape-surface-overlay: rgba(248, 242, 255, 0.86);
  --reshape-surface-glass: rgba(255, 255, 255, 0.96);

  --reshape-text-primary: #1d103f;
  --reshape-text-primary-rgb: 29, 16, 63;
  --reshape-text-secondary: #463072;
  --reshape-text-muted: #69598d;
  --reshape-text-inverse: #fbf7ff;
  --reshape-text-inverse-rgb: 251, 247, 255;
  --reshape-link-color: #7b08cf;
  --reshape-link-hover: #5b00ea;

  --reshape-border-subtle: rgba(35, 18, 86, 0.12);
  --reshape-border-strong: rgba(35, 18, 86, 0.2);
  --reshape-border-accent: rgba(226, 5, 127, 0.22);
  --reshape-focus-ring: rgba(91, 0, 234, 0.22);

  --reshape-shadow-sm: 0 12px 30px rgba(41, 20, 85, 0.08);
  --reshape-shadow-md: 0 18px 42px rgba(41, 20, 85, 0.12);
  --reshape-shadow-lg: 0 24px 54px rgba(41, 20, 85, 0.16);
  --reshape-shadow-brand: 0 0 0 1px rgba(226, 5, 127, 0.08),
    0 18px 45px rgba(91, 0, 234, 0.12);

  --reshape-control-bg: rgba(35, 18, 86, 0.05);
  --reshape-control-bg-hover: rgba(35, 18, 86, 0.1);
  --reshape-control-border: rgba(35, 18, 86, 0.14);
  --reshape-control-text: var(--reshape-text-primary);
}