@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  /* Dark theme (default) — Warm Ink */
  :root {
    --ink-900: 14 11 8;
    --ink-800: 22 18 14;
    --ink-700: 30 24 20;
    --ink-600: 42 36 32;
    --ink-500: 58 51 45;
    --parchment-50: 245 239 230;
    --parchment-200: 184 175 163;
    --parchment-400: 122 113 106;
    --brass-400: 240 200 134;
    --brass-500: 232 180 103;
    --brass-600: 201 154 79;
    --brass-700: 158 120 56;
    --slateblue-500: 107 143 181;
    color-scheme: dark;
  }

  /* Light theme — Warm Parchment. Swap surface / text channels. */
  :root.light {
    --ink-900: 250 246 239;
    --ink-800: 245 239 230;
    --ink-700: 235 227 215;
    --ink-600: 218 207 191;
    --ink-500: 196 183 165;
    --parchment-50: 23 19 14;
    --parchment-200: 70 60 50;
    --parchment-400: 110 99 88;
    --brass-400: 158 120 56;
    --brass-500: 178 134 60;
    --brass-600: 201 154 79;
    --brass-700: 232 180 103;
    --slateblue-500: 60 95 142;
    color-scheme: light;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  }

  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  ::-webkit-scrollbar-track {
    background: rgb(var(--ink-800));
  }

  ::-webkit-scrollbar-thumb {
    background: rgb(var(--ink-600));
    border-radius: 9999px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: rgb(var(--ink-500));
  }

  *:focus-visible {
    outline: 2px solid rgb(var(--slateblue-500));
    outline-offset: 2px;
    border-radius: 4px;
  }
}

@layer components {
  /* Audio player range slider */
  .progress-slider::-webkit-slider-thumb {
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgb(var(--brass-500));
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .progress-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
  .progress-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgb(var(--brass-500));
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .progress-slider::-moz-range-thumb:hover { transform: scale(1.2); }

  .volume-slider {
    background: linear-gradient(to right, rgb(var(--brass-500)) 0%, rgb(var(--brass-500)) var(--volume-value, 100%), rgb(var(--ink-600)) var(--volume-value, 100%), rgb(var(--ink-600)) 100%);
  }
  .volume-slider::-webkit-slider-thumb {
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgb(var(--parchment-50));
    cursor: pointer;
  }
  .volume-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgb(var(--parchment-50));
    cursor: pointer;
    border: none;
  }

  /* Now-playing waveform indicator */
  .wave {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 12px;
  }
  .wave span {
    display: block;
    width: 2px;
    height: 100%;
    background: rgb(var(--brass-500));
    border-radius: 1px;
    transform-origin: center;
    transform: scaleY(0.4);
  }
  .wave-indicator { opacity: 0; }
  .message-card.is-playing .wave-indicator { opacity: 1; }
  .message-card.is-playing .wave span,
  .wave.is-playing span {
    animation: wavePulse 1.4s ease-in-out infinite;
  }
  .message-card.is-playing .wave span:nth-child(2),
  .wave.is-playing span:nth-child(2) { animation-delay: 0.15s; }
  .message-card.is-playing .wave span:nth-child(3),
  .wave.is-playing span:nth-child(3) { animation-delay: 0.3s; }
  .message-card.is-playing .wave span:nth-child(4),
  .wave.is-playing span:nth-child(4) { animation-delay: 0.45s; }

  /* Card hover lift — subtle, no scale */
  .message-card {
    transition: border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .message-card.is-playing {
    border-color: rgb(var(--brass-500) / 0.45);
    background-color: rgb(var(--brass-500) / 0.06);
  }

  /* Horizontal series shelf scrollbar hidden */
  .scroll-shelf {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .scroll-shelf::-webkit-scrollbar { display: none; }
  .scroll-shelf > * { scroll-snap-align: start; }

  /* Mini-player */
  .mini-player {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
  body.mini-player-active { padding-bottom: 96px; }
  @media (min-width: 640px) {
    body.mini-player-active { padding-bottom: 104px; }
  }

  /* Skeleton shimmer */
  .skeleton {
    background: linear-gradient(90deg, rgb(var(--ink-700)) 0%, rgb(var(--ink-600)) 50%, rgb(var(--ink-700)) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.4s ease-in-out infinite;
  }

  /* Hero series-card style */
  .series-card {
    transition: border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .series-card:hover { border-color: rgb(var(--brass-500) / 0.5); }
}

@keyframes wavePulse {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */