/* Global styles only (ADR 0001, section 6): layer order, tokens, reset, focus ring. */
@layer reset, base;

/* Tokens. Dark is the default, so it applies even without data-theme.
   A nested [data-theme] element re-scopes the theme tokens (used by the dev button page). */
:root,
:root[data-theme="dark"],
[data-theme="dark"] {
  --bg: #09090B;
  --tile: #121215;
  --tile-2: #19191D;
  --tile-3: #232328;
  --line: rgba(255,255,255,.07);
  --line-2: rgba(255,255,255,.15);
  --ink: #F4F2EE;
  --ink-2: #BFBDB8;
  --ink-3: #95938E;
  --accent: #C8141C;
  /* Crimson for small text (like counts): plain crimson is 3.2:1 on the dark tiles. */
  --accent-text: color-mix(in srgb, #C8141C, white 40%);
  --danger: #FF6B70;
  --glass: rgba(18,18,21,.72);
  --shadow-pop: 0 10px 28px rgba(0,0,0,.5);
  /* Panels (bento tiles): a faint top highlight and a soft drop. */
  --shadow-tile: inset 0 1px 0 rgba(255,255,255,.035), 0 0 0 1px rgba(255,255,255,.02), 0 24px 44px -24px rgba(0,0,0,.8);
  /* Buttons: drop shadows and the soft-depth (neumorphic) light and shade. */
  --shadow-btn: 0 10px 20px -6px rgba(0,0,0,.35);
  --shadow-float: 0 14px 28px -12px rgba(0,0,0,.55);
  --neu-d: rgba(0,0,0,.8);
  --neu-l: rgba(255,255,255,.05);
  color-scheme: dark;
}

:root[data-theme="light"],
[data-theme="light"] {
  --bg: #EFEDE9;
  --tile: #FBFAF8;
  --tile-2: #F3F1EE;
  --tile-3: #E8E5E0;
  --line: rgba(26,28,31,.08);
  --line-2: rgba(26,28,31,.16);
  --ink: #1A1C1F;
  --ink-2: #46484D;
  --ink-3: #686A70;
  --accent: #C8141C;
  --accent-text: #C8141C;
  --danger: #B3121A;
  --glass: rgba(251,250,248,.74);
  --shadow-pop: 0 10px 28px rgba(26,28,31,.14);
  --shadow-tile: inset 0 1px 0 rgba(255,255,255,.035), 0 1px 2px rgba(26,28,31,.04), 0 16px 36px -20px rgba(26,28,31,.22);
  --shadow-btn: 0 10px 20px -6px rgba(26,28,31,.22);
  --shadow-float: 0 14px 28px -12px rgba(26,28,31,.3);
  --neu-d: rgba(26,28,31,.17);
  --neu-l: rgba(255,255,255,.95);
  color-scheme: light;
}

:root {
  /* Crimson shades, derived from --accent (spec "Design tokens"). */
  --accent-hi: color-mix(in srgb, var(--accent), white 26%);
  --accent-lo: color-mix(in srgb, var(--accent), black 30%);
  --accent-soft: color-mix(in srgb, var(--accent), transparent 88%);
  --accent-deep: color-mix(in srgb, var(--accent), black 55%);
  --accent-glow: rgba(255,110,110,.75);
  --accent-glow-0: rgba(255,110,110,0);
  /* Text and marks on a crimson face: white in both themes. */
  --on-accent: #FFFFFF;
  /* Over photos and video (mobile slides): white text, dark fades and dark glass, same in both themes. */
  --on-media: #FFFFFF;
  --on-media-line: rgba(255,255,255,.18);
  --on-media-badge: rgba(255,255,255,.5);
  --media-fade: rgba(0,0,0,.8);
  --media-fade-top: rgba(0,0,0,.45);
  --media-fade-0: rgba(0,0,0,0);
  --media-glass: rgba(0,0,0,.28);
  --media-shadow: rgba(0,0,0,.35);

  /* HexAvatar initials: dark muted gradients, same in both themes. */
  --hex-oxblood: linear-gradient(145deg, #6e1a22, #3a0d12);
  --hex-navy: linear-gradient(145deg, #243a63, #121d36);
  --hex-forest: linear-gradient(145deg, #25573f, #112a1f);
  --hex-slate: linear-gradient(145deg, #4a5663, #262d35);
  --hex-plum: linear-gradient(145deg, #55294f, #2a1328);
  --hex-graphite: linear-gradient(145deg, #3d3d42, #1c1c20);
  --avatar-ink: #F4F2EE;

  /* Shape and motion. */
  --r-panel: 18px;
  --r-card: 16px;
  --r-ctl: 12px;
  --ease: cubic-bezier(.2,.8,.2,1);
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body { margin: 0; }
  /* Form controls take the page font instead of the UA's 13.33px Arial. */
  button, input, textarea, select { font: inherit; }
}

@layer base {
  body {
    color: var(--ink);
    background: var(--bg);
    font-family: var(--font-sans), system-ui, sans-serif;
  }
  :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
}

/* Reduced motion, app-wide (ADR 0001, section 6; spec "Motion"). Switches off
   card rise-ins, the feed pill and skeleton shimmer, sparks, heart bursts and
   the light sweep on buttons, the featured glow, caption fade and slide (its
   autoplay is stopped in FeaturedCarousel via matchMedia), and stops snap and smooth scrolling. State
   changes still happen instantly. The loading spinner is kept, only slowed,
   because it is the only sign that something is loading. */
@media (prefers-reduced-motion: reduce) {
  .post,
  .post-cm,
  .post-pop,
  .feed-pill,
  .feed-skel::after,
  .post-like-beat .post-heart,
  .btn-spark *,
  .btn-spark::before,
  .btn-spark::after,
  .btn-gloss::before,
  .btn-gloss::after,
  .btn-sweep::before,
  .account-dot,
  .featured-cf::before,
  .featured-cap,
  .minnect-card { animation: none !important; }
  .featured-item,
  .featured-ring,
  .featured-dot { transition: none !important; }
  .btn-sweep::before,
  .btn-gloss::after { transition: none !important; }
  .panel-scroll, .feed-list { scroll-behavior: auto !important; scroll-snap-type: none !important; }
  .spinner { animation-duration: 2.4s !important; }
}