/*
 * TOYSUN — theme.css
 * Edit colors and typography here, or use the style admin tool.
 * This file is linked from index.html — changes here apply site-wide instantly.
 */

:root {

  /* ── Colors ─────────────────────────────────────────────────── */

  --ts-bg: #365553;                       /* Page background */
  --ts-topbar-bg: #436765;                /* Top bar */
  --ts-sidebar-bg: #266D6A;               /* Sidebar / library panel */
  --ts-content-bg: #3D5E5C;               /* Main content area */
  --ts-player-bg: #49716E;                /* Player bar */
  --ts-notes-bg: #49716E;                 /* Notes panel */
  --ts-modal-bg: #79BCB8;                 /* Modal / overlay background */
  --ts-track-active-bg: #62B5B2;          /* Active track row */
  --ts-track-hover-bg: #6BB8B4;           /* Hovered track row */
  --ts-text: #BAE4E0;                     /* Primary text */
  --ts-text-muted: #92D0CA;               /* Muted / secondary text */
  --ts-track-title: #A7DDD7;              /* Track title text */
  --ts-timestamp: #56B8B6;                /* Timestamps & time display */
  --ts-logo-color: #9DD9D2;               /* Logo / wordmark color */
  --ts-accent: #2CA6A4;                   /* Primary accent */
  --ts-progress: #2CA6A4;                 /* Progress bar fill */
  --ts-progress-bg: #1A6462;              /* Progress bar track */
  --ts-playbtn-bg: #2CA6A4;               /* Play button background */
  --ts-playbtn-color: #0a0a0a;            /* Play button icon color */
  --ts-mark-color: #3AA7A3;               /* Mark button */
  --ts-scrubber: #2CA6A4;                 /* Volume / scrubber thumb */
  --ts-border: #66B7B3;                   /* Main border / divider */
  --ts-border-subtle: #70B9B6;            /* Subtle border */
  --ts-note-bg: #558481;                  /* Note bubble background */
  --ts-note-text: #B1E1DB;                /* Note body text */
  --ts-note-dot: #3AA7A3;                 /* Timestamp dot */
  --ts-note-timestamp-bg: #47ABA7;        /* Note timestamp pill background */
  --ts-waveform: #2CA6A47F;               /* Waveform bar color (supports alpha) */
  --ts-waveform-progress: #2CA6A4;        /* Waveform played / progress color */
  --ts-waveform-cursor: #9DD9D2;          /* Waveform cursor line */


  /* ── Typography ─────────────────────────────────────────────── */

  /* UI & Navigation */
  --ts-font-ui: 'Geist Mono', monospace;
  --ts-font-style-ui: normal;
  --ts-font-weight-ui: 400;
  --ts-font-size-ui: 9px;
  --ts-tracking-ui: 0.41em;
  --ts-lh-ui: 1.5;
  --ts-transform-ui: uppercase;

  /* Track Titles */
  --ts-font-track: 'Inter', sans-serif;
  --ts-font-style-track: normal;
  --ts-font-weight-track: 600;
  --ts-font-size-track: 12px;
  --ts-tracking-track: -0.01em;
  --ts-lh-track: 1.3;
  --ts-transform-track: none;

  /* Logo & Wordmark */
  --ts-font-logo: 'Space Grotesk', sans-serif;
  --ts-font-style-logo: normal;
  --ts-font-weight-logo: 400;
  --ts-font-size-logo: 14px;
  --ts-tracking-logo: 0.05em;
  --ts-transform-logo: uppercase;

  /* Timestamps & Metadata */
  --ts-font-meta: 'Inter', sans-serif;
  --ts-font-style-meta: normal;
  --ts-font-weight-meta: 400;
  --ts-font-size-meta: 10.5px;
  --ts-tracking-meta: 0.01em;
  --ts-lh-meta: 1.5;

  /* Notes Body Text */
  --ts-font-notes: 'Geist Mono', monospace;
  --ts-font-style-notes: normal;
  --ts-font-weight-notes: 400;
  --ts-font-size-notes: 11px;
  --ts-tracking-notes: 0.02em;
  --ts-lh-notes: 1.6;


  /* ── Layout ─────────────────────────────────────────────────── */

  --ts-radius-sm: 4px;                    /* Small radius (buttons, inputs) */
  --ts-radius-md: 6px;                    /* Medium radius (panels, cards) */
  --ts-radius-lg: 10px;                   /* Large radius (modals, overlays) */
  --ts-page-inset: 0px;                   /* Gap around the app shell (reveals bg + corners) */
  --ts-sidebar-width: 280px;              /* Library / sidebar panel width */
  --ts-notes-width: 300px;                /* Notes panel width */


  /* ── Aliases — do not edit, change --ts-* values above ── */
  --bg:          var(--ts-bg);
  --surface:     var(--ts-topbar-bg);
  --surface2:    var(--ts-sidebar-bg);
  --text:        var(--ts-text);
  --muted:       var(--ts-text-muted);
  --mono:        var(--ts-font-ui);
  --accent:      var(--ts-accent);
  --accent2:     var(--ts-logo-color);
  --border:      var(--ts-border);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

}