/* Arkash — orden de capas, tokens de diseño y estilos base.
   Cada componente vive en su propio archivo dentro de atoms/, molecules/, organisms/ o templates/
   y envuelve sus reglas en su @layer, así el orden de carga no importa. */

@layer tokens {
  :root {
    color-scheme: light dark;

    --color-bg: #f6f4ee;
    --color-surface: #ffffff;
    --color-surface-2: #efece4;
    --color-border: #e1dcd0;
    --color-text: #1c1b18;
    --color-muted: #6f6a60;
    --color-accent: #8a5f00;
    --color-accent-contrast: #ffffff;
    --color-income: #1e7a4c;
    --color-expense: #b5412f;
    --color-warning: #b26a00;
    --color-danger: #b5412f;
    --color-focus: #2f6fe4;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 2.5rem;
    --space-8: 3rem;

    --radius-s: 6px;
    --radius-m: 12px;
    --radius-l: 20px;
    --radius-pill: 999px;

    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
    --text-xs: 0.75rem;
    --text-s: 0.875rem;
    --text-m: 1rem;
    --text-l: 1.25rem;
    --text-xl: 1.75rem;
    --text-2xl: 2.25rem;

    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.06);
    --nav-height: 4rem;
    --content-max: 44rem;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --color-bg: #141310;
      --color-surface: #1d1b17;
      --color-surface-2: #26231e;
      --color-border: #33302a;
      --color-text: #f1ede4;
      --color-muted: #a39d90;
      --color-accent: #d6a437;
      --color-accent-contrast: #1a1500;
      --color-income: #4fc58b;
      --color-expense: #e8735f;
      --color-warning: #e0a63f;
      --color-danger: #e8735f;
      --color-focus: #7aa2ff;
      --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
    }
  }
}

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { font-family: var(--font-sans); font-size: 16px; -webkit-text-size-adjust: 100%; }
  body { margin: 0; background: var(--color-bg); color: var(--color-text); line-height: 1.45; }
  h1, h2, h3 { margin: 0; line-height: 1.2; font-weight: 650; }
  h1 { font-size: var(--text-xl); }
  h2 { font-size: var(--text-l); }
  h3 { font-size: var(--text-m); }
  p { margin: 0; }
  a { color: var(--color-accent); text-decoration: none; }
  a:hover { text-decoration: underline; }
  ul, ol { margin: 0; padding: 0; list-style: none; }
  button, input, select, textarea { font: inherit; color: inherit; }
  :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
  table { border-collapse: collapse; width: 100%; }
  [hidden] { display: none !important; }
}

@layer utilities {
  .stack { display: grid; gap: var(--space-3); }
  .cluster { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .muted { color: var(--color-muted); }
  .text-s { font-size: var(--text-s); }
  .text-end { text-align: end; }
}