/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
  color-scheme: dark;
  --af-bg: #020617;
  --af-surface: #0f172a;
  --af-surface-strong: #111827;
  --af-border: #1e293b;
  --af-text: #f8fafc;
  --af-text-muted: #94a3b8;
  --af-primary: #34d399;
  --af-primary-hover: #6ee7b7;
  --af-primary-contrast: #04130d;
  --af-info: #38bdf8;
  --af-success: #34d399;
  --af-warning: #f59e0b;
  --af-danger: #f43f5e;
}

:root[data-theme="light"] {
  color-scheme: light;
  --af-bg: #f8fafc;
  --af-surface: #ffffff;
  --af-surface-strong: #e2e8f0;
  --af-border: #cbd5e1;
  --af-text: #0f172a;
  --af-text-muted: #475569;
  --af-primary: #059669;
  --af-primary-hover: #10b981;
  --af-primary-contrast: #f8fafc;
  --af-info: #0284c7;
  --af-success: #059669;
  --af-warning: #d97706;
  --af-danger: #e11d48;
}

html,
body {
  min-height: 100%;
  background: var(--af-bg);
  color: var(--af-text);
}

body {
  margin: 0;
}

.af-shell {
  min-height: 100vh;
  background: var(--af-bg);
  color: var(--af-text);
}

.af-header {
  border-bottom: 1px solid var(--af-border);
  background: color-mix(in srgb, var(--af-bg) 92%, transparent);
  backdrop-filter: blur(16px);
}

.af-surface {
  background: var(--af-surface);
  border: 1px solid var(--af-border);
  color: var(--af-text);
}

.af-surface-strong {
  background: var(--af-surface-strong);
  border: 1px solid var(--af-border);
  color: var(--af-text);
}

.af-text-muted {
  color: var(--af-text-muted);
}

.af-primary {
  background: var(--af-primary);
  color: var(--af-primary-contrast);
}

.af-primary:hover {
  background: var(--af-primary-hover);
}

.af-secondary {
  background: transparent;
  border: 1px solid var(--af-border);
  color: var(--af-text);
}

.af-secondary:hover {
  border-color: var(--af-primary);
  color: var(--af-primary);
}

.af-danger {
  background: var(--af-danger);
  color: white;
}

.af-info {
  background: color-mix(in srgb, var(--af-info) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--af-info) 40%, transparent);
  color: var(--af-info);
}

.af-success {
  background: color-mix(in srgb, var(--af-success) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--af-success) 40%, transparent);
  color: var(--af-success);
}

.af-warning {
  background: color-mix(in srgb, var(--af-warning) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--af-warning) 40%, transparent);
  color: var(--af-warning);
}

.af-danger-soft {
  background: color-mix(in srgb, var(--af-danger) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--af-danger) 40%, transparent);
  color: var(--af-danger);
}