@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap");


:root {
  --primary: #6C7BFF;
  --secondary: #3463FD;
  --accent: #949597;
  --bg: #FFFFFF;
  --fg: #000000;
  --heading-fg: #6C7BFF;
  --radius: 0.75rem;
  --font-base: "Inter", "Segoe UI", sans-serif;
  --font-heading: "Montserrat", "Segoe UI", sans-serif;

  --surface: color-mix(in oklab, var(--bg) 94%, var(--fg) 6%);
  --surface-2: color-mix(in oklab, var(--bg) 88%, var(--fg) 12%);
  --surface-3: color-mix(in oklab, var(--bg) 82%, var(--fg) 18%);
  --border: color-mix(in oklab, var(--fg) 16%, transparent);
  --border-strong: color-mix(in oklab, var(--fg) 28%, transparent);
  --muted: color-mix(in oklab, var(--fg) 68%, var(--bg) 32%);
  --text-on-primary: #ffffff;
  --text-on-secondary: #ffffff;
  --text-on-accent: #ffffff;
  --status-info: #2563eb;
  --status-success: #22c55e;
  --status-warning: #f59e0b;
  --status-danger: #dc2626;
  --status-info-contrast: #ffffff;
  --status-success-contrast: #ffffff;
  --status-warning-contrast: #111827;
  --status-danger-contrast: #ffffff;
  --status-info-soft-bg: color-mix(in oklab, var(--status-info) 12%, transparent);
  --status-info-soft-fg: color-mix(in oklab, var(--status-info) 78%, var(--fg));
  --status-info-soft-border: color-mix(in oklab, var(--status-info) 24%, transparent);
  --status-success-soft-bg: color-mix(in oklab, var(--status-success) 12%, transparent);
  --status-success-soft-fg: color-mix(in oklab, var(--status-success) 78%, var(--fg));
  --status-success-soft-border: color-mix(in oklab, var(--status-success) 24%, transparent);
  --status-warning-soft-bg: color-mix(in oklab, var(--status-warning) 12%, transparent);
  --status-warning-soft-fg: color-mix(in oklab, var(--status-warning) 78%, var(--fg));
  --status-warning-soft-border: color-mix(in oklab, var(--status-warning) 24%, transparent);
  --status-danger-soft-bg: color-mix(in oklab, var(--status-danger) 12%, transparent);
  --status-danger-soft-fg: color-mix(in oklab, var(--status-danger) 78%, var(--fg));
  --status-danger-soft-border: color-mix(in oklab, var(--status-danger) 24%, transparent);
  --shadow-soft: 0 10px 30px color-mix(in oklab, var(--fg) 10%, transparent);
  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--primary) 28%, transparent);

  
  --background-image: url("/media/backgrounds/default_background.png");
  

  
  --logo-image: url("/media/logos/default_logo.svg");
  
}

html,
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-base);
}

h1,
h2,
h3,
h4,
h5,
h6,
.theme-heading {
  font-family: var(--font-heading);
  color: var(--heading-fg);
}

input,
select,
textarea,
button {
  font-family: var(--font-base);
}

.theme-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

.theme-card-muted {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.theme-input {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg);
  border-radius: var(--radius);
  padding: 0.625rem 0.875rem;
  outline: none;
}

.theme-input::placeholder {
  color: var(--muted);
}

.theme-input:hover {
  border-color: var(--border-strong);
}

.theme-input:focus {
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}

.theme-file-input {
  width: 100%;
  border: 1px dashed var(--border-strong);
  background: var(--surface);
  color: var(--fg);
  border-radius: var(--radius);
  padding: 0.75rem;
}

.theme-label {
  color: var(--fg);
  font-weight: 600;
  font-size: 0.95rem;
}

.theme-help {
  color: var(--muted);
  font-size: 0.875rem;
}

.theme-btn-primary {
  background: var(--primary);
  color: var(--text-on-primary);
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: 180ms ease;
}

.theme-btn-primary:hover {
  filter: brightness(0.96);
}

.theme-btn-secondary {
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: 180ms ease;
}

.theme-btn-secondary:hover {
  background: var(--surface-2);
}

.theme-btn-success {
  background: var(--status-success);
  color: var(--status-success-contrast);
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: 180ms ease;
}

.theme-btn-success:hover {
  filter: brightness(0.96);
}

.theme-btn-danger {
  background: var(--status-danger);
  color: var(--status-danger-contrast);
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: 180ms ease;
}

.theme-btn-danger:hover {
  filter: brightness(0.96);
}

.theme-swatch {
  border-radius: calc(var(--radius) * 0.75);
  border: 1px solid var(--border);
}

.theme-badge-info {
  background: var(--status-info);
  color: var(--status-info-contrast);
}

.theme-badge-success {
  background: var(--status-success);
  color: var(--status-success-contrast);
}

.theme-badge-warning {
  background: var(--status-warning);
  color: var(--status-warning-contrast);
}

.theme-badge-danger {
  background: var(--status-danger);
  color: var(--status-danger-contrast);
}

.theme-alert-info {
  background: var(--status-info-soft-bg);
  color: var(--status-info-soft-fg);
  border: 1px solid var(--status-info-soft-border);
}

.theme-alert-success {
  background: var(--status-success-soft-bg);
  color: var(--status-success-soft-fg);
  border: 1px solid var(--status-success-soft-border);
}

.theme-alert-warning {
  background: var(--status-warning-soft-bg);
  color: var(--status-warning-soft-fg);
  border: 1px solid var(--status-warning-soft-border);
}

.theme-alert-danger {
  background: var(--status-danger-soft-bg);
  color: var(--status-danger-soft-fg);
  border: 1px solid var(--status-danger-soft-border);
}