/*
 * 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.
 */

/* 
TODO: add custom colors later
:root {
  color-scheme: light;
  --lla-bg: #f6f8fc;
  --lla-surface: #ffffff;
  --lla-surface-muted: #eef2f7;
  --lla-border: #d7dee9;
  --lla-text: #0f172a;
  --lla-text-soft: #475569;
  --lla-link: #2563eb;
  --lla-link-strong: #1d4ed8;
  --lla-focus: rgba(96, 165, 250, 0.55);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --lla-bg: #020617;
    --lla-surface: #0f172a;
    --lla-surface-muted: #1e293b;
    --lla-border: #334155;
    --lla-text: #f8fafc;
    --lla-text-soft: #cbd5f5;
    --lla-link: #93c5fd;
    --lla-link-strong: #bfdbfe;
    --lla-focus: rgba(93, 188, 252, 0.7);
  }
}

body {
  margin: 0;
  background-color: var(--lla-bg);
  color: var(--lla-text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

::selection {
  background-color: var(--lla-link);
  color: #fff;
}

a {
  color: var(--lla-link);
  transition: color 0.2s ease;
}

a:hover,
a:focus {
  color: var(--lla-link-strong);
}

table {
  width: 100%;
  border-collapse: collapse;
  border-color: var(--lla-border);
}

th,
td {
  border-color: var(--lla-border);
}

input,
textarea,
select,
button {
  font: inherit;
}

input,
textarea,
select {
  background-color: var(--lla-surface);
  color: var(--lla-text);
  border: 1px solid var(--lla-border);
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

@media (prefers-color-scheme: dark) {
  input,
  textarea,
  select {
    background-color: var(--lla-surface-muted);
    border-color: var(--lla-border);
  }
} */