/* Abs' Labs — Desert Stone tokens. Shared by every surface. */
:root {
  --font-display: 'Fraunces', 'EB Garamond', Georgia, serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --text-meta:    clamp(0.75rem, 0.72rem + 0.1vw, 0.8125rem);
  --text-small:   clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);
  --text-body:    clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lead:    clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --text-h3:      clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --text-h2:      clamp(2rem, 1.5rem + 2vw, 3rem);
  --text-h1:      clamp(2.75rem, 2rem + 3.5vw, 4.5rem);
  --text-display: clamp(3.5rem, 2rem + 6vw, 7rem);

  --leading-tight: 1.1; --leading-normal: 1.5; --leading-loose: 1.7;
  --tracking-tight: -0.02em; --tracking-meta: 0.12em; --tracking-wide: 0.08em;
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600;
  --fraunces-soft: 30; --fraunces-wonk: 1;

  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem;
  --measure-narrow: 34rem; --measure-default: 42rem; --measure-wide: 64rem;

  --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-full: 9999px;

  --dur-fast: 160ms; --dur-normal: 320ms; --dur-slow: 640ms; --dur-hero: 2500ms;
  --ease-standard: cubic-bezier(0.4,0,0.2,1);
  --ease-out-expo: cubic-bezier(0.16,1,0.3,1);
  --ease-in-expo: cubic-bezier(0.7,0,0.84,0);
}

:root, :root[data-mode="dark"] {
  --color-bg: #0A0A0A; --color-surface: #111110; --color-surface-2: #1A1917;
  --color-border: rgba(184,178,166,0.12); --color-border-strong: rgba(184,178,166,0.24);
  --color-text: #F0EBE0; --color-text-dim: rgba(240,235,224,0.72); --color-text-muted: rgba(240,235,224,0.40);
  --color-accent: #B8B2A6; --color-accent-dim: rgba(184,178,166,0.60); --color-accent-soft: rgba(184,178,166,0.18);
  --color-success: #5CB77A; --color-warning: #D4A84B; --color-danger: #D4634B; --color-info: #5B8DEF;
  --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 4px 16px rgba(0,0,0,0.5);
  --shadow-3: 0 12px 40px rgba(0,0,0,0.6);
  --rule-ink: rgba(240,235,224,0.28);
}
:root[data-mode="light"] {
  --color-bg: #F2EFE8; --color-surface: #ECE8DF; --color-surface-2: #E2DED3;
  --color-border: rgba(20,20,20,0.12); --color-border-strong: rgba(20,20,20,0.26);
  --color-text: #141414; --color-text-dim: rgba(20,20,20,0.70); --color-text-muted: rgba(20,20,20,0.44);
  --color-accent: #4A4A47; --color-accent-dim: rgba(74,74,71,0.55); --color-accent-soft: rgba(74,74,71,0.12);
  --color-success: #2E7A4A; --color-warning: #8E6B1F; --color-danger: #A23523; --color-info: #3659AE;
  --shadow-1: 0 1px 2px rgba(20,20,20,0.10);
  --shadow-2: 0 4px 16px rgba(20,20,20,0.14);
  --shadow-3: 0 12px 40px rgba(20,20,20,0.18);
  --rule-ink: rgba(20,20,20,0.30);
}
:root[data-mode="reading"] {
  --color-bg: #EBE3D3; --color-surface: #E3DAC7; --color-surface-2: #D9CFB8;
  --color-border: rgba(40,35,25,0.16); --color-border-strong: rgba(40,35,25,0.30);
  --color-text: #2D2822; --color-text-dim: rgba(45,40,34,0.72); --color-text-muted: rgba(45,40,34,0.46);
  --color-accent: #5A4F3E; --color-accent-dim: rgba(90,79,62,0.55); --color-accent-soft: rgba(90,79,62,0.12);
  --color-success: #3A6E47; --color-warning: #7E611D; --color-danger: #863826; --color-info: #3A5499;
  --shadow-1: 0 1px 2px rgba(40,35,25,0.10);
  --shadow-2: 0 4px 16px rgba(40,35,25,0.14);
  --shadow-3: 0 12px 40px rgba(40,35,25,0.18);
  --rule-ink: rgba(40,35,25,0.30);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body); font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
body {
  background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body); font-size: var(--text-body);
  line-height: var(--leading-normal); font-weight: 300;
  transition: background-color var(--dur-normal) var(--ease-standard),
              color var(--dur-normal) var(--ease-standard);
}
::selection { background: var(--color-accent); color: var(--color-bg); }

/* Primitives */
.meta {
  font-family: var(--font-mono); font-size: var(--text-meta);
  text-transform: uppercase; letter-spacing: var(--tracking-meta);
  color: var(--color-text-muted);
}
.meta b { color: var(--color-text-dim); font-weight: 500; }

.display-serif {
  font-family: var(--font-display);
  font-weight: 300; letter-spacing: -0.025em; line-height: 1.0;
  font-variation-settings: "SOFT" var(--fraunces-soft), "WONK" 0, "opsz" 144;
}
.display-serif em {
  font-style: italic; color: var(--color-accent);
  font-variation-settings: "SOFT" 80, "WONK" var(--fraunces-wonk), "opsz" 144;
}

.pill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono); font-size: var(--text-meta);
  text-transform: uppercase; letter-spacing: var(--tracking-meta);
  color: var(--color-text-dim);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full); background: transparent;
}
.pill .d { width: 6px; height: 6px; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 8px var(--color-success); }
.pill.warn   .d { background: var(--color-warning); box-shadow: 0 0 8px var(--color-warning); }
.pill.danger .d { background: var(--color-danger);  box-shadow: 0 0 8px var(--color-danger); }
.pill.quiet  .d { background: var(--color-text-muted); box-shadow: none; }

/* Global mode-switch (floating, bottom-right) */
.mode-switch-global {
  position: fixed; bottom: 16px; right: 16px; z-index: 999;
  display: grid; grid-template-columns: repeat(3, 1fr);
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: var(--tracking-meta);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full); overflow: hidden;
  background: var(--color-bg);
}
.mode-switch-global button {
  all: unset; cursor: pointer; padding: 8px 14px;
  color: var(--color-text-muted);
  border-right: 1px solid var(--color-border);
  transition: color var(--dur-fast), background var(--dur-fast);
}
.mode-switch-global button:last-child { border-right: 0; }
.mode-switch-global button[aria-pressed="true"] { color: var(--color-text); background: var(--color-accent-soft); }
@media print { .mode-switch-global { display: none !important; } }

/* Heromark base */
.heromark { color: var(--color-text); }
@keyframes hm-draw {
  from { stroke-dashoffset: 360; }
  to   { stroke-dashoffset: 0; }
}
.heromark .mark-ribbon.mark-draw {
  stroke-dasharray: 360; stroke-dashoffset: 360;
  animation: hm-draw var(--dur-hero) var(--ease-out-expo) 300ms forwards;
}