:root {
  color-scheme: light;

  --brand-primary: #1f4e79;
  --brand-primary-hover: #173b5d;
  --brand-primary-light: #d9e6f2;
  --brand-primary-foreground: #ffffff;

  --brand-accent: #b94032;
  --brand-accent-soft: #ff6b5d;
  --brand-accent-dark: #b03a2e;
  --brand-accent-darker: #8e2e25;
  --brand-accent-foreground: #ffffff;

  --brand-secondary: #1a7066;
  --brand-secondary-dark: #15584f;
  --brand-tertiary: #183b56;
  --brand-tertiary-light: #254b6b;

  --brand-bg: #f6f8fb;
  --brand-bg-light: #fafbfd;
  --brand-bg-lighter: #ffffff;
  --brand-bg-lightest: #ffffff;
  --brand-surface: #eef3f8;
  --brand-surface-raised: #ffffff;
  --brand-surface-strong: #ffffff;

  --brand-control-bg: var(--brand-surface-raised);
  --brand-control-border: var(--brand-text-muted);
  --brand-control-border-hover: var(--brand-text);
  --brand-focus: var(--brand-primary);
  --brand-focus-inverse: var(--brand-inverse-text);

  --brand-border: #d5dee8;
  --brand-border-hover: #b9c7d6;

  --brand-text: #13263a;
  --brand-text-muted: #556779;
  --brand-text-subtle: var(--brand-text-muted);

  --brand-success: #15803d;
  --brand-success-bg: #e9f8ee;
  --brand-success-ink: #166534;
  --brand-warning: #b45309;
  --brand-warning-bg: #fff7e7;
  --brand-warning-ink: #92400e;
  --brand-danger: #c2410c;
  --brand-danger-bg: #fff1eb;
  --brand-danger-ink: #9a3412;
  --brand-danger-foreground: #ffffff;
  --brand-info: #2563eb;
  --brand-info-bg: #ecf3ff;
  --brand-info-ink: #1e40af;

  --brand-inverse-bg: #07111a;
  --brand-inverse-surface: #0f1b29;
  --brand-inverse-surface-raised: #132233;
  --brand-inverse-border: rgba(255, 255, 255, 0.12);
  --brand-inverse-text: #ffffff;
  --brand-inverse-text-muted: rgba(255, 255, 255, 0.78);
  --brand-inverse-text-subtle: rgba(255, 255, 255, 0.62);

  --primer-radius-control: 0.375rem;
  --primer-radius-pill: 9999px;
  --primer-radius-card: 0.75rem;
  --primer-radius-panel: 1rem;
  --primer-radius-section: 1.5rem;

  --primer-shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.03), 0 1px 1px rgba(0, 0, 0, 0.05);
  --primer-shadow-raised: 0 18px 44px -34px rgba(15, 23, 42, 0.2);
  --primer-shadow-deep: 0 30px 76px -52px rgba(2, 8, 16, 0.72);
}

:root.dark,
:root[data-theme="dark"],
:root[data-color-scheme="dark"],
.dark {
  color-scheme: dark;

  --brand-primary: #72b4ff;
  --brand-primary-hover: #9bc9ff;
  --brand-primary-light: #16324f;
  --brand-primary-foreground: #08131f;

  --brand-accent: #ff8d81;
  --brand-accent-soft: #ffb0a7;
  --brand-accent-dark: #ff7466;
  --brand-accent-darker: #ff5f50;
  --brand-accent-foreground: #2a0905;

  --brand-secondary: #5ac3b6;
  --brand-secondary-dark: #8edbd1;
  --brand-tertiary: #d5e5f3;
  --brand-tertiary-light: #edf5fb;

  --brand-bg: #07111a;
  --brand-bg-light: #0c1722;
  --brand-bg-lighter: #0f1c29;
  --brand-bg-lightest: #132233;
  --brand-surface: #0f1b29;
  --brand-surface-raised: #132233;
  --brand-surface-strong: #1a2c40;

  --brand-control-bg: var(--brand-surface-raised);
  --brand-control-border: var(--brand-text-muted);
  --brand-control-border-hover: var(--brand-text);
  --brand-focus: var(--brand-primary);
  --brand-focus-inverse: var(--brand-inverse-text);

  --brand-border: #24384d;
  --brand-border-hover: #35506d;

  --brand-text: #eef5fb;
  --brand-text-muted: #bdd0e2;
  --brand-text-subtle: #91a8bf;

  --brand-success: #4ade80;
  --brand-success-bg: #0d2217;
  --brand-success-ink: #86efac;
  --brand-warning: #fbbf24;
  --brand-warning-bg: #261b07;
  --brand-warning-ink: #fcd34d;
  --brand-danger: #fb7185;
  --brand-danger-bg: #2d1117;
  --brand-danger-ink: #fda4af;
  --brand-danger-foreground: #2d1117;
  --brand-info: #60a5fa;
  --brand-info-bg: #0d1c31;
  --brand-info-ink: #dbeafe;

  --brand-inverse-bg: #07111a;
  --brand-inverse-surface: #0f1b29;
  --brand-inverse-surface-raised: #132233;
  --brand-inverse-border: rgba(255, 255, 255, 0.12);
  --brand-inverse-text: #ffffff;
  --brand-inverse-text-muted: rgba(255, 255, 255, 0.78);
  --brand-inverse-text-subtle: rgba(255, 255, 255, 0.62);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    --brand-primary: #72b4ff;
    --brand-primary-hover: #9bc9ff;
    --brand-primary-light: #16324f;
    --brand-primary-foreground: #08131f;

    --brand-accent: #ff8d81;
    --brand-accent-soft: #ffb0a7;
    --brand-accent-dark: #ff7466;
    --brand-accent-darker: #ff5f50;
    --brand-accent-foreground: #2a0905;

    --brand-secondary: #5ac3b6;
    --brand-secondary-dark: #8edbd1;
    --brand-tertiary: #d5e5f3;
    --brand-tertiary-light: #edf5fb;

    --brand-bg: #07111a;
    --brand-bg-light: #0c1722;
    --brand-bg-lighter: #0f1c29;
    --brand-bg-lightest: #132233;
    --brand-surface: #0f1b29;
    --brand-surface-raised: #132233;
    --brand-surface-strong: #1a2c40;

    --brand-control-bg: var(--brand-surface-raised);
    --brand-control-border: var(--brand-text-muted);
    --brand-control-border-hover: var(--brand-text);
    --brand-focus: var(--brand-primary);
    --brand-focus-inverse: var(--brand-inverse-text);

    --brand-border: #24384d;
    --brand-border-hover: #35506d;

    --brand-text: #eef5fb;
    --brand-text-muted: #bdd0e2;
    --brand-text-subtle: #91a8bf;

    --brand-success: #4ade80;
    --brand-success-bg: #0d2217;
    --brand-success-ink: #86efac;
    --brand-warning: #fbbf24;
    --brand-warning-bg: #261b07;
    --brand-warning-ink: #fcd34d;
    --brand-danger: #fb7185;
    --brand-danger-bg: #2d1117;
    --brand-danger-ink: #fda4af;
    --brand-danger-foreground: #2d1117;
    --brand-info: #60a5fa;
    --brand-info-bg: #0d1c31;
    --brand-info-ink: #dbeafe;

    --brand-inverse-bg: #07111a;
    --brand-inverse-surface: #0f1b29;
    --brand-inverse-surface-raised: #132233;
    --brand-inverse-border: rgba(255, 255, 255, 0.12);
    --brand-inverse-text: #ffffff;
    --brand-inverse-text-muted: rgba(255, 255, 255, 0.78);
    --brand-inverse-text-subtle: rgba(255, 255, 255, 0.62);
  }
}

@theme {
  --shadow-subtle: var(--primer-shadow-subtle);
  --shadow-primer-raised: var(--primer-shadow-raised);
  --shadow-primer-deep: var(--primer-shadow-deep);

  --radius-primer-control: var(--primer-radius-control);
  --radius-primer-pill: var(--primer-radius-pill);
  --radius-primer-card: var(--primer-radius-card);
  --radius-primer-panel: var(--primer-radius-panel);
  --radius-primer-section: var(--primer-radius-section);

  --color-brand-primary: var(--brand-primary);
  --color-brand-primary-hover: var(--brand-primary-hover);
  --color-brand-primary-light: var(--brand-primary-light);
  --color-brand-primary-foreground: var(--brand-primary-foreground);
  --color-brand-accent: var(--brand-accent);
  --color-brand-accent-soft: var(--brand-accent-soft);
  --color-brand-accent-dark: var(--brand-accent-dark);
  --color-brand-accent-darker: var(--brand-accent-darker);
  --color-brand-accent-foreground: var(--brand-accent-foreground);
  --color-brand-secondary: var(--brand-secondary);
  --color-brand-secondary-dark: var(--brand-secondary-dark);
  --color-brand-tertiary: var(--brand-tertiary);
  --color-brand-tertiary-light: var(--brand-tertiary-light);
  --color-brand-bg: var(--brand-bg);
  --color-brand-bg-light: var(--brand-bg-light);
  --color-brand-bg-lighter: var(--brand-bg-lighter);
  --color-brand-bg-lightest: var(--brand-bg-lightest);
  --color-brand-surface: var(--brand-surface);
  --color-brand-surface-raised: var(--brand-surface-raised);
  --color-brand-surface-strong: var(--brand-surface-strong);
  --color-brand-control-bg: var(--brand-control-bg);
  --color-brand-control-border: var(--brand-control-border);
  --color-brand-control-border-hover: var(--brand-control-border-hover);
  --color-brand-focus: var(--brand-focus);
  --color-brand-focus-inverse: var(--brand-focus-inverse);
  --color-brand-border: var(--brand-border);
  --color-brand-border-hover: var(--brand-border-hover);
  --color-brand-text: var(--brand-text);
  --color-brand-text-muted: var(--brand-text-muted);
  --color-brand-text-subtle: var(--brand-text-subtle);
  --color-brand-success: var(--brand-success);
  --color-brand-success-bg: var(--brand-success-bg);
  --color-brand-success-ink: var(--brand-success-ink);
  --color-brand-warning: var(--brand-warning);
  --color-brand-warning-bg: var(--brand-warning-bg);
  --color-brand-warning-ink: var(--brand-warning-ink);
  --color-brand-danger: var(--brand-danger);
  --color-brand-danger-bg: var(--brand-danger-bg);
  --color-brand-danger-ink: var(--brand-danger-ink);
  --color-brand-danger-foreground: var(--brand-danger-foreground);
  --color-brand-info: var(--brand-info);
  --color-brand-info-bg: var(--brand-info-bg);
  --color-brand-info-ink: var(--brand-info-ink);
  --color-brand-inverse-bg: var(--brand-inverse-bg);
  --color-brand-inverse-surface: var(--brand-inverse-surface);
  --color-brand-inverse-surface-raised: var(--brand-inverse-surface-raised);
  --color-brand-inverse-border: var(--brand-inverse-border);
  --color-brand-inverse-text: var(--brand-inverse-text);
  --color-brand-inverse-text-muted: var(--brand-inverse-text-muted);
  --color-brand-inverse-text-subtle: var(--brand-inverse-text-subtle);
}

@layer components {
  .primer-public-canvas-warm {
    background:
      radial-gradient(circle at 86% 0%, color-mix(in oklab, var(--brand-primary) 13%, transparent), transparent 24%),
      radial-gradient(circle at 12% 4%, color-mix(in oklab, var(--brand-accent) 9%, transparent), transparent 30%),
      linear-gradient(
        180deg,
        color-mix(in oklab, var(--brand-bg-light) 96%, white) 0%,
        color-mix(in oklab, var(--brand-bg) 98%, white) 48%,
        color-mix(in oklab, var(--brand-bg-lightest) 86%, white) 100%
      );
  }

  .primer-public-band-warm,
  .primer-public-surface-warm {
    background:
      radial-gradient(circle at 82% 0%, color-mix(in oklab, var(--brand-primary) 8%, transparent), transparent 26%),
      linear-gradient(
        180deg,
        color-mix(in oklab, var(--brand-bg-light) 96%, white) 0%,
        color-mix(in oklab, var(--brand-surface-raised) 86%, white) 100%
      );
  }

  .primer-public-card-warm {
    background:
      linear-gradient(
        180deg,
        color-mix(in oklab, var(--brand-surface-raised) 98%, white) 0%,
        color-mix(in oklab, var(--brand-bg-light) 92%, white) 100%
      );
  }

  :root.dark .primer-public-canvas-warm,
  :root[data-theme="dark"] .primer-public-canvas-warm,
  :root[data-color-scheme="dark"] .primer-public-canvas-warm,
  .dark .primer-public-canvas-warm {
    background:
      radial-gradient(circle at 86% 0%, color-mix(in oklab, var(--brand-primary) 14%, transparent), transparent 24%),
      radial-gradient(circle at 12% 4%, color-mix(in oklab, var(--brand-accent) 12%, transparent), transparent 30%),
      linear-gradient(
        180deg,
        color-mix(in oklab, var(--brand-bg) 96%, #03070d) 0%,
        color-mix(in oklab, var(--brand-bg-light) 96%, #050b13) 52%,
        color-mix(in oklab, var(--brand-bg) 98%, #03070d) 100%
      );
  }

  :root.dark .primer-public-band-warm,
  :root.dark .primer-public-surface-warm,
  :root[data-theme="dark"] .primer-public-band-warm,
  :root[data-theme="dark"] .primer-public-surface-warm,
  :root[data-color-scheme="dark"] .primer-public-band-warm,
  :root[data-color-scheme="dark"] .primer-public-surface-warm,
  .dark .primer-public-band-warm,
  .dark .primer-public-surface-warm {
    background:
      radial-gradient(circle at 82% 0%, color-mix(in oklab, var(--brand-primary) 10%, transparent), transparent 26%),
      linear-gradient(
        180deg,
        color-mix(in oklab, var(--brand-bg-light) 92%, #050b13) 0%,
        color-mix(in oklab, var(--brand-surface) 88%, #03070d) 100%
      );
  }

  :root.dark .primer-public-card-warm,
  :root[data-theme="dark"] .primer-public-card-warm,
  :root[data-color-scheme="dark"] .primer-public-card-warm,
  .dark .primer-public-card-warm {
    background:
      linear-gradient(
        180deg,
        color-mix(in oklab, var(--brand-surface-raised) 96%, #050b13) 0%,
        color-mix(in oklab, var(--brand-bg-light) 92%, #03070d) 100%
      );
  }
}

.field-group--required > label::after,
.field-group:has(input:not([type="hidden"])[required], select[required], textarea[required]) > label::after {
  color: var(--brand-danger);
  content: " *";
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}