/* ============================================================
   Adipo's Corner — main.css
   Layer 0: reset, tokens, base shell
   Components and pages import their own CSS.
   ============================================================ */

/* ── Modern reset ─────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  scroll-behavior: smooth;
}

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

body {
  min-height: 100vh;
  min-height: 100svh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

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

button {
  background: none;
  border: none;
  cursor: pointer;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
  hyphens: auto;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ============================================================
   Design tokens
   ============================================================ */

:root {
  /* ── Color — light theme ──────────────────────────────────── */
  --color-bg: #faf7f2;
  --color-bg-texture: rgba(26, 22, 20, 0.02);
  --color-surface: #ffffff;
  --color-surface-alt: #f4efe5;
  --color-surface-raised: #ffffff;
  --color-border: #e8e0d1;
  --color-border-strong: #cfc5b3;
  --color-text: #1a1614;
  --color-text-muted: #6b6357;
  --color-text-subtle: #9a9184;

  /* Accent — terracotta */
  --color-accent: #c4552d;
  --color-accent-hover: #a8441f;
  --color-accent-soft: #f6e3d8;
  --color-accent-very-soft: #fbf2eb;

  /* Secondary — muted olive (for link type) */
  --color-secondary: #6b7a5a;
  --color-secondary-soft: #ecefe6;

  /* Status */
  --color-success: #2f7d52;
  --color-warning: #b07d1a;
  --color-danger: #b53d3d;

  /* ── Typography ──────────────────────────────────────────── */
  --font-sans:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-serif:
    "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
    "Times New Roman", serif;
  --font-mono:
    "JetBrains Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --text-xs: clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
  --text-sm: clamp(0.84rem, 0.82rem + 0.15vw, 0.9rem);
  --text-base: clamp(0.95rem, 0.92rem + 0.2vw, 1.05rem);
  --text-lg: clamp(1.1rem, 1.05rem + 0.3vw, 1.25rem);
  --text-xl: clamp(1.3rem, 1.2rem + 0.5vw, 1.55rem);
  --text-2xl: clamp(1.6rem, 1.4rem + 1vw, 2.1rem);
  --text-3xl: clamp(2rem, 1.6rem + 2vw, 3rem);
  --text-display: clamp(2.4rem, 1.8rem + 3vw, 4.5rem);

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.55;
  --leading-relaxed: 1.75;

  /* ── Spacing ─────────────────────────────────────────────── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* ── Radii ───────────────────────────────────────────────── */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-sm:
    0 1px 2px rgba(26, 22, 20, 0.04), 0 1px 1px rgba(26, 22, 20, 0.02);
  --shadow-md:
    0 4px 16px rgba(26, 22, 20, 0.07), 0 1px 3px rgba(26, 22, 20, 0.03);
  --shadow-lg:
    0 16px 40px rgba(26, 22, 20, 0.12), 0 2px 8px rgba(26, 22, 20, 0.04);
  --shadow-accent: 0 4px 20px rgba(196, 85, 45, 0.15);

  /* ── Motion ──────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 140ms;
  --duration-base: 240ms;
  --duration-slow: 420ms;

  /* ── Layout ──────────────────────────────────────────────── */
  --content-max: 68ch;
  --page-max: 1180px;
  --page-gutter: clamp(var(--space-4), 4vw, var(--space-7));

  /* ── Z-index ─────────────────────────────────────────────── */
  --z-base: 1;
  --z-header: 100;
  --z-overlay: 200;
  --z-dialog: 300;
  --z-toast: 400;
}

/* ── Dark theme ─────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #15110f;
    --color-bg-texture: rgba(242, 237, 228, 0.03);
    --color-surface: #1d1916;
    --color-surface-alt: #251f1b;
    --color-surface-raised: #221d1a;
    --color-border: #322a24;
    --color-border-strong: #4a3f36;
    --color-text: #f2ede4;
    --color-text-muted: #b0a598;
    --color-text-subtle: #7a7065;

    --color-accent: #e88358;
    --color-accent-hover: #f09570;
    --color-accent-soft: #3a2219;
    --color-accent-very-soft: #221612;

    --color-secondary: #92a37f;
    --color-secondary-soft: #232a1e;

    --color-success: #5ebd8a;
    --color-warning: #e0b04a;
    --color-danger: #e56e6e;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6);
    --shadow-accent: 0 4px 20px rgba(232, 131, 88, 0.2);
  }
}

/* Manual theme override */
:root[data-theme="light"] {
  color-scheme: light;
}
:root[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #15110f;
  --color-bg-texture: rgba(242, 237, 228, 0.03);
  --color-surface: #1d1916;
  --color-surface-alt: #251f1b;
  --color-surface-raised: #221d1a;
  --color-border: #322a24;
  --color-border-strong: #4a3f36;
  --color-text: #f2ede4;
  --color-text-muted: #b0a598;
  --color-text-subtle: #7a7065;
  --color-accent: #e88358;
  --color-accent-hover: #f09570;
  --color-accent-soft: #3a2219;
  --color-accent-very-soft: #221612;
  --color-secondary: #92a37f;
  --color-secondary-soft: #232a1e;
}

/* ============================================================
   Base
   ============================================================ */

html,
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-feature-settings:
    "liga" 1,
    "kern" 1,
    "calt" 1,
    "ss01" 1;
}

/* Subtle dot-grid texture on the page background */
body {
  background-image: radial-gradient(
    circle at 1px 1px,
    var(--color-bg-texture) 1px,
    transparent 0
  );
  background-size: 24px 24px;
}

/* ============================================================
   App shell
   ============================================================ */

.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--page-gutter);
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--color-border);
}

.app-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.app-brand__mark {
  display: inline-block;
  font-size: 1.4em;
  color: var(--color-accent);
  line-height: 1;
  transition: transform var(--duration-slow) var(--ease-spring);
}

.app-brand:hover .app-brand__mark {
  transform: rotate(90deg);
}

.app-nav {
  margin-left: auto;
}

.app-nav__list {
  display: flex;
  gap: var(--space-1);
}

.app-nav__list a {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.app-nav__list a:hover {
  color: var(--color-text);
  background: var(--color-surface-alt);
}

.app-nav__list a[aria-current="page"] {
  color: var(--color-accent);
  background: var(--color-accent-very-soft);
}

.app-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.app-theme-toggle:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
  transform: scale(1.08);
}

.app-main {
  flex: 1;
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--space-6) var(--page-gutter) var(--space-8);
}

.app-footer {
  padding: var(--space-5) var(--page-gutter);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
}

.app-footer a {
  color: var(--color-text-muted);
  text-decoration: underline;
  text-decoration-color: var(--color-border-strong);
  text-underline-offset: 3px;
}

.app-footer a:hover {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}

/* ============================================================
   Utility states
   ============================================================ */

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: var(--z-toast);
  padding: var(--space-2) var(--space-4);
  background: var(--color-accent);
  color: white;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  transition: top var(--duration-fast) var(--ease-out);
}

.skip-link:focus {
  top: var(--space-4);
}

.state {
  padding: var(--space-7) var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
  font-family: var(--font-serif);
  font-style: italic;
}

.state--error {
  color: var(--color-danger);
}

.state__title {
  font-family: var(--font-serif);
  font-style: normal;
  font-size: var(--text-xl);
  margin-bottom: var(--space-2);
  color: var(--color-text);
}

.noscript-banner {
  margin: var(--space-4);
  padding: var(--space-4);
  background: var(--color-accent-soft);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  text-align: center;
}

/* ============================================================
   CSS imports — order matters: components then pages
   ============================================================ */
@import url("./components.css");
@import url("./pages.css");