/* ============================================================
   DESIGN TOKENS — single source of truth
   Dùng chung cho index.html, player.html, tools/playlist-builder.html
   ============================================================ */
:root {
  /* Backgrounds — dark grey w/ subtle cool tint, depth layers */
  --bg-base:        #0c0d0e;
  --bg-elevated:    #16181a;
  --bg-raised:      #1f2124;
  --bg-overlay:     #292c30;

  /* Borders */
  --border-subtle:  #22252a;
  --border-default: #2f333a;
  --border-strong:  #474c55;

  /* Text */
  --text-primary:   #e8eaed;
  --text-secondary: #b3b8c0;
  --text-tertiary:  #7d838d;
  --text-disabled:  #4a4f57;

  /* Accent — blue */
  --accent:         #3b7dd8;
  --accent-hover:   #4f8ef7;
  --accent-pressed: #2d6bc4;
  --accent-bg:      rgba(59, 125, 216, 0.12);
  --accent-bg-strong: #1e3a5f;
  --accent-border:  #2d5a9e;
  --accent-text:    #a8c8f0;

  /* Semantic */
  --success:        #5fb85f;
  --success-hover:  #74c474;
  --success-bg:     rgba(95, 184, 95, 0.12);
  --success-bg-strong: #2d5a2d;
  --success-text:   #b8e0b8;

  --warning:        #e8a93b;
  --warning-hover:  #f0bc5c;
  --warning-bg:     rgba(232, 169, 59, 0.12);
  --warning-bg-strong: #6b5520;
  --warning-text:   #f5d894;

  --danger:         #e85555;
  --danger-hover:   #f06a6a;
  --danger-bg:      rgba(232, 85, 85, 0.12);
  --danger-bg-strong: #6b2020;
  --danger-text:    #f5a0a0;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-h1:      24px;
  --fs-h2:      20px;
  --fs-h3:      17px;
  --fs-h4:      15px;
  --fs-body-lg: 15px;
  --fs-body:    14px;
  --fs-small:   13px;
  --fs-caption: 12px;
  --fs-tiny:    11px;

  --lh-tight:   1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.6;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;

  /* Spacing */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;

  /* Radius */
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   8px;
  --r-xl:   12px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-dropdown: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-dialog:   0 12px 32px rgba(0,0,0,0.6);

  /* Page transition */
  --transition-page: 200ms;

  /* Button sizes (desktop) */
  --btn-sm-h:  30px;  --btn-sm-px: 10px;  --btn-sm-fs: var(--fs-caption);
  --btn-md-h:  36px;  --btn-md-px: 14px;  --btn-md-fs: var(--fs-small);
  --btn-lg-h:  42px;  --btn-lg-px: 18px;  --btn-lg-fs: var(--fs-body-lg);

  /* Inputs — height đồng bộ với button (cùng row layout) */
  --input-sm-h: var(--btn-sm-h);  --input-sm-px: 10px;  --input-sm-fs: var(--fs-caption);
  --input-md-h: var(--btn-md-h);  --input-md-px: 12px;  --input-md-fs: var(--fs-body);
  --input-lg-h: var(--btn-lg-h);  --input-lg-px: 16px;  --input-lg-fs: var(--fs-body-lg);

  /* Tabs — đồng bộ với button-md */
  --tab-h:      var(--btn-md-h);  --tab-px:      14px;  --tab-fs:      var(--fs-small);

  /* Legacy aliases (backward compat — sẽ migrate dần) */
  --input-h:    var(--input-md-h);
  --input-px:   var(--input-md-px);
  --input-fs:   var(--input-md-fs);

  /* Layout */
  --dialog-max-w:   540px;
  --container-max:  1280px;
}

/* Tablet — bigger touch targets. Input/tab tự follow vì alias từ btn-*. */
@media (max-width: 1024px) {
  :root {
    --btn-sm-h:  32px;
    --btn-md-h:  40px;
    --btn-lg-h:  44px;
  }
}

/* Phone — full touch */
@media (max-width: 600px) {
  :root {
    --btn-sm-h:  36px;
    --btn-md-h:  44px;
    --btn-lg-h:  48px;
    --fs-h1:     20px;
    --fs-h2:     18px;
  }
}