@import url("https://media.armradioarchive.am/Sofia+Pro+woff/Sofia+Pro+Regular+Az.woff");
@import url("https://media.armradioarchive.am/Sofia+Pro+woff/Sofia+Pro+Bold+Az.woff");
@import url("https://media.armradioarchive.am/Sofia+Pro+woff/Sofia+Pro+Light+Az.woff");
@import url("https://media.armradioarchive.am/Sofia+Pro+woff/Sofia+Pro+Semi+Bold+Az.woff");

/*
  ARM RADIO ARCHIVE — Brand CSS
  Always-dark theme (no dark-mode toggle). Spotify-style UI.
  Color palette from brand guide (colors.txt):
    Gold/250  #FE8304  ← primary accent
    Gold/500  #C78431
    Gold/750  #583E00
    Gold/000  #B19D4C
    Neutral/1000  #111111  ← page background
    Neutral/750   #252525  ← card/surface
    Neutral/500   #5F5F5F
    Neutral/250   #757575
    Neutral/000   #FFFFFF
*/

:root {
  /* ─── Primary (Gold accent) ─── */
  --color-primary:            #FE8304;
  --color-primary-foreground: #111111;
  --color-primary-hover:      #C78431;
  --color-primary-active:     #583E00;
  --color-primary-disabled:   #5F5F5F;

  /* ─── Secondary (dark surface) ─── */
  --color-secondary:             #252525;
  --color-secondary-foreground:  #FFFFFF;
  --color-secondary-hover:       #2e2e2e;
  --color-secondary-active:      #1a1a1a;
  --color-secondary-disabled:    #1a1a1a;

  /* ─── Tertiary (muted surface) ─── */
  --color-tertiary:             #5F5F5F;
  --color-tertiary-foreground:  #FFFFFF;
  --color-tertiary-hover:       #757575;
  --color-tertiary-active:      #5F5F5F;
  --color-tertiary-disabled:    #252525;

  /* ─── Accent (same as primary for this brand) ─── */
  --color-accent:             #FE8304;
  --color-accent-foreground:  #111111;
  --color-accent-hover:       #C78431;
  --color-accent-active:      #583E00;
  --color-accent-disabled:    #252525;

  /* ─── Semantic colors ─── */
  --color-success:             #68B339;
  --color-success-foreground:  #111111;
  --color-error:               #FB4430;
  --color-error-foreground:    #FFFFFF;
  --color-warning:             #FBBE30;
  --color-warning-foreground:  #111111;
  --color-info:                #39B3A0;
  --color-info-foreground:     #111111;

  /* ─── Text ─── */
  --color-text-primary:   #FFFFFF;
  --color-text-secondary: #b3b3b3;
  --color-text-muted:     #757575;
  --color-text-disabled:  #5F5F5F;
  --color-text-fiveground: #FFFFFF;

  /* ─── Backgrounds & Surfaces ─── */
  --color-background:   #111111;
  --color-surface:      #181818;
  --color-surface-hover:#2a2a2a;
  --color-card:         #252525;
  --color-card-foreground: #FFFFFF;
  --color-popover:      #282828;
  --color-popover-foreground: #FFFFFF;
  --color-muted:        #252525;
  --color-muted-foreground: #757575;

  /* ─── Borders & Inputs ─── */
  --color-border:       #282828;
  --color-border-hover: #5F5F5F;
  --color-input:        #252525;
  --color-input-border: #3a3a3a;
  --color-input-focus:  #FE8304;
  --color-ring:         #FE8304;

  /* ─── Buttons ─── */
  --color-button-primary-background:  #FE8304;
  --color-button-primary-foreground:  #111111;
  --color-button-primary-hover:       #C78431;
  --color-button-primary-active:      #583E00;
  --color-button-primary-disabled:    #5F5F5F;
  --color-button-secondary-background: #252525;
  --color-button-secondary-foreground: #FFFFFF;
  --color-button-secondary-hover:      #2e2e2e;
  --color-button-secondary-active:     #1a1a1a;
  --color-button-secondary-disabled:   #1a1a1a;
  --color-button-outline-border:        #3a3a3a;
  --color-button-outline-foreground:    #FFFFFF;
  --color-button-outline-hover-background: #252525;
  --color-button-outline-hover-border:     #5F5F5F;
  --color-button-ghost-hover-background:   #252525;
  --color-button-ghost-active-background:  #2e2e2e;
  --color-button-danger-background:  #FB4430;
  --color-button-danger-foreground:  #FFFFFF;
  --color-button-danger-hover:       #FB3077;
  --color-button-danger-active:      #D930FB;

  /* ─── ARM Radio — player-specific ─── */
  --color-player-bg:          #181818;
  --color-player-border:      #282828;
  --color-progress-track:     #535353;
  --color-progress-fill:      #FE8304;
  --color-track-row-hover:    #2a2a2a;
  --color-track-row-active:   rgba(255,255,255,0.1);
  --color-hero-from:          #8b1e14;
  --color-hero-to:            #4f0b07;
  --color-lyric-inactive:     #404040;
  --color-lyric-past:         #2e2e2e;

  /* ─── Gold palette (direct access) ─── */
  --gold-1000: #5D261E;
  --gold-750:  #583E00;
  --gold-500:  #C78431;
  --gold-250:  #FE8304;
  --gold-000:  #B19D4C;

  /* ─── Neutral palette (direct access) ─── */
  --neutral-1000: #111111;
  --neutral-750:  #252525;
  --neutral-500:  #5F5F5F;
  --neutral-250:  #757575;
  --neutral-000:  #FFFFFF;

  /* ─── Typography ─── */
  --font-primary:    'Sofia Pro', ui-sans-serif, system-ui, sans-serif;
  --font-secondary:  'Sofia Pro', ui-sans-serif, system-ui, sans-serif;
  --font-display:    'Sofia Pro', ui-sans-serif, system-ui, sans-serif;
  --font-monospace:  ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-accent:     'Sofia Pro', ui-sans-serif, system-ui, sans-serif;

  /* ─── Text scale ─── */
  --text-base:       13px;
  --text-caption:    0.75rem;
  --text-small:      0.875rem;
  --text-body:       1rem;
  --text-lead:       1.125rem;
  --text-subheading: 1.25rem;
  --text-heading:    1.5rem;
  --text-title:      2.25rem;
  --text-display:    2.25rem;
  --text-hero:       3rem;
}

/* ─── Global base ─── */
html, body {
  background-color: var(--color-background);
  color: var(--color-text-primary);
  font-family: var(--font-primary);
  font-size: var(--text-base);
}

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--color-background); }
::-webkit-scrollbar-thumb { background: var(--neutral-500); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--neutral-250); }