@import "tailwindcss";

@variant dark (&:where(.dark, .dark *));

@theme {
  /* Slate (dark, default) */
  --color-bg:             #1A1B1E;
  --color-surface:        #22242A;
  --color-surface-raised: #2A2D34;
  --color-border:         #33363E;
  --color-border-bright:  #3E4148;
  --color-text:           #D4D4D8;
  --color-text-label:     #9CA0AA;
  --color-text-dim:       #888D9B;

  /* Typography */
  --font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
  --font-mono:  "Source Code Pro", ui-monospace, monospace;
  /* Breakpoints */
  --breakpoint-xs: 576px;

  /* Character-grid spacing — horizontal (ch) */
  --spacing-1ch:     1ch;
  --spacing-2ch:     2ch;
  --spacing-3ch:     3ch;
  --spacing-4ch:     4ch;

  /* Character-grid spacing — vertical (lh, requires line-height:1.5 on html) */
  --spacing-qtr-lh:  0.25lh;
  --spacing-half-lh: 0.5lh;
  --spacing-1lh:     1lh;
  --spacing-2lh:     2lh;
  --spacing-3lh:     3lh;
  --spacing-4lh:     4lh;
}

/* Base */
html {
  scroll-behavior: smooth;
  font-size: 16px;
  line-height: 1.5;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
}

@layer base {
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
}

/* Bone (light) overrides */
:root:not(.dark) {
  --color-bg:             #FAF8F5;
  --color-surface:        #F3F0EB;
  --color-surface-raised: #EBE8E3;
  --color-border:         #E0DCD5;
  --color-border-bright:  #D4D0C8;
  --color-text:           #2C2C2C;
  --color-text-label:     #6B6560;
  --color-text-dim:       #787068;
}

/* Link underlines */
a {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-border-bright);
}
a:hover {
  text-decoration-color: currentColor;
}

/* Focus states */
a:focus-visible {
  text-decoration-color: currentColor;
  outline: 2px solid var(--color-border-bright);
  outline-offset: 2px;
}
button:focus-visible {
  outline: 2px solid var(--color-border-bright);
  outline-offset: 2px;
}

/* Default transitions */
a,
button {
  transition: color 120ms linear, border-color 120ms linear,
    opacity 120ms linear, text-decoration-color 120ms linear,
    outline-color 120ms linear;
}

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