/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/*
 * Theme tokens for the hand-written CSS (sidebar, audio player, blog).
 * Tailwind utilities use `dark:` variants instead — these exist because those
 * component stylesheets can't express a variant, only a value.
 *
 * Loaded first (Propshaft serves this manifest ahead of the other stylesheets
 * alphabetically), so every file below can rely on these being defined.
 */
:root {
  --surface: #fff;
  --surface-raised: #f9fafb;
  --surface-sunken: #f3f4f6;
  --surface-overlay: rgb(17 24 39 / 0.5);

  --border: #e5e7eb;
  --border-subtle: #f3f4f6;
  --border-strong: #d1d5db;

  --text-strong: #111827;
  --text: #1f2937;
  --text-muted: #4b5563;
  --text-subtle: #6b7280;
  --text-faint: #9ca3af;

  --accent: #f97316;
  --accent-strong: #ea580c;
  --accent-text: #c2410c;
  --accent-surface: #fff7ed;
  --accent-surface-hover: #ffedd5;
  --accent-ring: rgb(249 115 22 / 0.4);
  --accent-ring-soft: rgb(249 115 22 / 0.3);

  --danger: #dc2626;
  --on-accent: #fff;

  /* Audio player dock. Its buttons don't follow the generic surface scale —
     ghost controls sit on the blurred backdrop rather than on a card. */
  --player-backdrop: rgb(255 255 255 / 0.8);
  --player-backdrop-border: rgb(0 0 0 / 0.08);
  --player-btn-bg: #f3f4f6;
  --player-btn-bg-hover: #e5e7eb;
  --player-btn-text: #4b5563;
  --player-btn-text-hover: #1f2937;
  --player-ghost-bg: transparent;
  --player-ghost-hover-bg: #f3f4f6;
  --player-ghost-text: #374151;

  /* Long-form content: blog posts, transcripts, markdown. */
  --prose-text: #374151;
  --link: #2563eb;
  --link-hover: #1d4ed8;
  --code-bg: #f3f4f6;
  --pre-bg: #1f2937;
  --pre-text: #f3f4f6;
  /* Warm brown headings are part of the brand in light mode. */
  --heading: rgb(77 57 44);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Raised surfaces get *lighter* in dark mode, not darker — elevation reads
       as proximity to the light source, so the ordering inverts. */
    --surface: #111827;
    --surface-raised: #1f2937;
    --surface-sunken: #0b1220;
    --surface-overlay: rgb(0 0 0 / 0.6);

    --border: #374151;
    --border-subtle: #1f2937;
    --border-strong: #4b5563;

    --text-strong: #f9fafb;
    --text: #e5e7eb;
    --text-muted: #d1d5db;
    --text-subtle: #9ca3af;
    --text-faint: #6b7280;

    /* Orange holds up on dark backgrounds; the tinted surfaces do not, so those
       become low-alpha washes of the accent rather than near-white peach. */
    --accent: #fb923c;
    --accent-strong: #f97316;
    --accent-text: #fdba74;
    --accent-surface: rgb(249 115 22 / 0.14);
    --accent-surface-hover: rgb(249 115 22 / 0.22);
    --accent-ring: rgb(251 146 60 / 0.45);
    --accent-ring-soft: rgb(251 146 60 / 0.3);

    --danger: #f87171;
    --on-accent: #1f2937;

    --player-backdrop: rgb(17 24 39 / 0.85);
    --player-backdrop-border: rgb(255 255 255 / 0.08);
    --player-btn-bg: #1f2937;
    --player-btn-bg-hover: #374151;
    --player-btn-text: #9ca3af;
    --player-btn-text-hover: #f3f4f6;
    --player-ghost-bg: #1f2937;
    --player-ghost-hover-bg: #374151;
    --player-ghost-text: #d1d5db;

    --prose-text: #d1d5db;
    /* blue-600 fails contrast on a dark surface; blue-400 clears AA. */
    --link: #60a5fa;
    --link-hover: #93c5fd;
    --code-bg: #1f2937;
    /* Kept distinct from --surface so code blocks still read as inset. */
    --pre-bg: #0b1220;
    --pre-text: #e5e7eb;
    /* The brand brown goes muddy on dark; a warm off-white keeps the tone. */
    --heading: #f5ede7;
  }
}