/* ==========================================================================
   Universal Warm Tufte Theme (Single System-Wide Accessible Theme)
   ========================================================================== */

:root, html, body {
  color-scheme: light !important;
  --radius: 0.875rem;

  /* Warm Ivory / Tufte Natural Paper */
  --background: 40 30% 97.5%;     /* #faf7f2 */
  --foreground: 28 30% 12%;        /* #241c14 Rich Espresso */

  --card: 40 40% 99%;              /* #fffdfa */
  --card-foreground: 28 30% 12%;

  --popover: 40 40% 99%;
  --popover-foreground: 28 30% 12%;

  --primary: 158 64% 20%;          /* #064e3b Noble Deep Emerald */
  --primary-foreground: 40 50% 98%;

  --secondary: 38 35% 93%;         /* Warm Linen */
  --secondary-foreground: 158 64% 18%;

  --muted: 38 25% 92%;
  --muted-foreground: 28 15% 42%;  /* Warm Muted Stone */

  --accent: 38 35% 93%;
  --accent-foreground: 158 64% 18%;

  --destructive: 0 70% 50%;
  --destructive-foreground: 40 90% 97%;

  --border: 38 25% 88%;            /* #e5dec9 Clean Warm Border */
  --input: 38 25% 88%;
  --ring: 158 64% 25%;

  /* Pico.css v2 Bridge */
  --pico-font-family-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --pico-font-family-serif: 'Newsreader', Georgia, serif;
  --pico-font-size: 100%;
  --pico-border-radius: var(--radius, 0.875rem);
  --pico-primary: hsl(var(--primary));
  --pico-primary-background: hsl(var(--primary));
  --pico-primary-hover: #047857;
  --pico-primary-underline: hsl(var(--primary) / 0.5);
  --pico-color: hsl(var(--foreground));
  --pico-background-color: hsl(var(--background));
  --pico-card-background-color: hsl(var(--card));
  --pico-card-border-color: hsl(var(--border));
  --pico-muted-color: hsl(var(--muted-foreground));
  --pico-muted-border-color: hsl(var(--border));
  --pico-form-element-background-color: hsl(var(--card));
  --pico-form-element-border-color: hsl(var(--border));
  --pico-form-element-color: hsl(var(--foreground));
}

/* ==========================================================================
   Live semantic classes & Resets
   ========================================================================== */

/* Revelation-place semantics (token-governed) */
.place-makkan { color: hsl(32 80% 32%); }
.place-madinan { color: hsl(158 64% 26%); }

/* Global keyboard focus ring */
:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

/* Toolbar, header & inline form control resets (prevents Pico default bottom margins) */
header input,
header button,
nav input,
nav button,
.toolbar input,
.toolbar button,
form.inline-form input,
form.inline-form button {
  margin: 0 !important;
}

/* Clean numeric inputs */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}