/* ============================================================
   dogroast Design System — Colors & Type
   Extracted from public_html/{index,login,register,welcome}.php
   ============================================================ */

:root {
  /* ---------- Backgrounds (deep void blue-black) ---------- */
  --bg-base:      #0a0a0f;   /* page background everywhere */
  --bg-surface:   #141420;   /* cards, panels, modals */
  --bg-surface-2: #1a1a2a;   /* nested surfaces, lang buttons */
  --bg-elevated:  #181828;   /* card hover */
  --bg-active:    #1a1a30;   /* selected card */
  --bg-deeper:    #0d1117;   /* tab bar, sub-surfaces, request inputs */
  --bg-input:     #0d1117;   /* form inputs in dashboard */
  --bg-glass:     rgba(255, 255, 255, 0.04);  /* auth glass card */
  --bg-glass-hi:  rgba(255, 255, 255, 0.06);  /* feature card hover */

  /* ---------- Header gradient (signature) ---------- */
  --header-grad:  linear-gradient(135deg, #0d1b2a, #1b2d4a);
  --header-rule:  #2196F3;   /* 2px under-header accent line */

  /* ---------- Borders ---------- */
  --border-1:        #2a2a3a;          /* default 1px card border */
  --border-2:        #1e2a3a;          /* request panel border */
  --border-glass:    rgba(255, 255, 255, 0.08);
  --border-glass-hi: rgba(255, 255, 255, 0.15);
  --border-subtle:   rgba(255, 255, 255, 0.06);

  /* ---------- Foreground / text ---------- */
  --fg-1:   #ffffff;   /* primary on hover, modal titles */
  --fg-2:   #e0e0e0;   /* default body text */
  --fg-3:   #ccc;      /* secondary body, secondary btn label */
  --fg-4:   #bbb;      /* paragraph copy in welcome */
  --fg-5:   #999;      /* meta labels, sub-copy */
  --fg-6:   #888;      /* match league, hero p */
  --fg-7:   #777;      /* status text, tab inactive hover */
  --fg-8:   #666;      /* link copy, sub-tab idle */
  --fg-9:   #555;      /* placeholders, lock icons */
  --fg-10:  #333;      /* poster placeholder glyphs */

  /* ---------- Brand blue (the dogroast accent) ---------- */
  --blue-50:  #90caf9;   /* soft accent / wordmark dot */
  --blue-100: #64b5f6;   /* primary brand — wordmark, tab active */
  --blue-200: #2196F3;   /* header bottom rule */
  --blue-300: #1976d2;   /* primary button base */
  --blue-400: #1565c0;   /* primary button gradient end */
  --blue-500: #0d47a1;   /* deep button, dl-stage downloading */
  --blue-grad: linear-gradient(135deg, #1976d2, #1565c0);

  /* ---------- Semantic / status ---------- */
  --success:        #4caf50;
  --success-soft:   #81c784;   /* dl-stage done text */
  --success-bg:     rgba(76, 175, 80, 0.10);
  --success-border: rgba(76, 175, 80, 0.20);

  --info:           #64b5f6;
  --info-soft:      #90caf9;
  --info-bg:        rgba(100, 181, 246, 0.10);

  --warning:        #f0a030;   /* "Awaiting Approval" header */
  --warning-soft:   #ffb74d;   /* dl-stage converting */
  --warning-amber:  #ffd700;   /* gold accents, dl-banner border */

  --danger:         #c62828;   /* logout button, LIVE badge */
  --danger-hover:   #b71c1c;
  --danger-soft:    #ef5350;   /* error text */
  --danger-bg:      rgba(239, 83, 80, 0.10);
  --danger-border:  rgba(239, 83, 80, 0.20);

  /* Admin purple */
  --admin-bg:    #4a148c;
  --admin-fg:    #ce93d8;
  --admin-hover: #6a1b9a;

  /* ---------- Membership tier colors ---------- */
  --tier-bronze: #cd7f32;
  --tier-silver: #c0c0c0;
  --tier-gold:   #ffd700;

  /* ---------- Ambient background gradient (body::before) ---------- */
  --ambient-1: rgba(25, 118, 210, 0.10);   /* blue glow */
  --ambient-2: rgba(106, 27, 154, 0.08);   /* purple glow */
  --ambient-3: rgba(13, 71, 161, 0.05);    /* deep blue wash */

  /* ---------- Radii ---------- */
  --radius-sm:  3px;    /* tier badge, LIVE pill, dl-stage */
  --radius-md:  4px;    /* small btn, channel logo */
  --radius:     6px;    /* default — inputs, match-card, btn */
  --radius-lg:  8px;    /* status box, modal bottom */
  --radius-xl:  10px;   /* glass btn, alerts, request panel */
  --radius-2xl: 12px;   /* modal */
  --radius-3xl: 14px;   /* feature card */
  --radius-4xl: 16px;   /* glass auth card */
  --radius-pill: 20px;  /* filter pills */
  --radius-full: 50%;

  /* ---------- Shadows ---------- */
  --shadow-glass:  0 8px 32px rgba(0, 0, 0, 0.40);   /* auth glass card */
  --shadow-modal:  0 20px 60px rgba(0, 0, 0, 0.80);  /* movie modal */
  --shadow-hover:  0 8px 30px rgba(0, 0, 0, 0.60);   /* movie card hover */
  --shadow-blue:   0 4px 20px rgba(25, 118, 210, 0.30);  /* primary btn hover */
  --shadow-red:    0 4px 20px rgba(229, 9, 20, 0.40);    /* play btn hover */
  --shadow-focus-blue: 0 0 0 3px rgba(25, 118, 210, 0.15), 0 0 20px rgba(25, 118, 210, 0.10);

  /* ---------- Blur (glassmorphism) ---------- */
  --blur-card:  12px;   /* feature cards */
  --blur-auth:  20px;   /* login/register glass card */
  --blur-modal:  4px;   /* modal backdrop */

  /* ---------- Spacing scale (rem-based; matches inline values) ---------- */
  --s-1:  0.15rem;
  --s-2:  0.3rem;
  --s-3:  0.4rem;
  --s-4:  0.5rem;
  --s-5:  0.6rem;
  --s-6:  0.7rem;
  --s-7:  0.8rem;
  --s-8:  1rem;
  --s-10: 1.2rem;
  --s-12: 1.5rem;
  --s-16: 2rem;
  --s-20: 2.5rem;
  --s-24: 3rem;

  /* ---------- Type ---------- */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --fw-light:  300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;
  --fw-black:  800;

  /* Letter spacing — uppercase eyebrows */
  --tracking-eyebrow: 0.5px;
  --tracking-wider:   0.05em;

  /* ---------- Transitions ---------- */
  --t-fast: 0.2s;
  --t:      0.3s ease;
  --ease:   ease;
}

/* ============================================================
   Semantic typography classes
   ============================================================ */

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: var(--font-sans); color: var(--fg-2); background: var(--bg-base); }

/* HERO — gradient-clipped headline, used on landing only */
.ds-hero {
  font-size: 3rem;
  font-weight: var(--fw-black);
  line-height: 1.15;
  background: linear-gradient(135deg, #e0e0e0 0%, #90caf9 50%, #64b5f6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Logo wordmark */
.ds-logo { font-size: 1.4rem; font-weight: var(--fw-bold); color: var(--blue-100); }
.ds-logo--lg { font-size: 1.6rem; }
.ds-logo .accent { color: var(--blue-50); font-weight: var(--fw-light); }

/* Page-section title (modals, status box) */
.ds-h2 { font-size: 1.5rem; font-weight: var(--fw-bold); color: var(--fg-2); }
.ds-h2--accent { color: var(--blue-100); }
.ds-h2--warn   { color: var(--warning); }
.ds-h2--gold   { color: var(--warning-amber); }

/* Card / panel title */
.ds-h3 {
  font-size: 1rem;
  font-weight: var(--fw-semi);
  color: var(--fg-2);
}
.ds-h3--accent { color: var(--blue-50); font-size: 0.95rem; }

/* Body */
.ds-p     { font-size: 0.88rem; color: var(--fg-4); line-height: 1.6; }
.ds-p--lg { font-size: 1.15rem; color: var(--fg-6); line-height: 1.6; }
.ds-p--sm { font-size: 0.85rem; color: var(--fg-5); line-height: 1.5; }
.ds-p--xs { font-size: 0.75rem; color: var(--fg-7); line-height: 1.4; }

/* Eyebrow / form label */
.ds-eyebrow {
  font-size: 0.78rem;
  color: var(--fg-6);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-weight: var(--fw-normal);
}

/* Meta — match league, modal meta, dl meta */
.ds-meta { font-size: 0.8rem; color: var(--fg-6); }

/* Pill / badge text — LIVE, tier, dl-stage */
.ds-pill {
  font-size: 0.7rem;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

/* Mono (timestamps, code) */
.ds-mono { font-family: var(--font-mono); }