/* ─── Academy Design Tokens ───
 * Aligned with logos/design-tokens.css (2026-03-14)
 * Mobile-first defaults, desktop overrides via media query
 */
:root {
  /* ── Brand ── */
  --brand-gold:       #c9a962;
  --gold-soft:        rgba(201,169,98,0.7);
  --gold-glow:        rgba(201,169,98,0.15);
  --gold-border:      rgba(201,169,98,0.25);
  --gold-bg:          rgba(201,169,98,0.12);
  --gold-bg-hover:    rgba(201,169,98,0.2);

  /* ── Backgrounds ── */
  --bg-deep:          #020408;
  --bg-surface:       #0d1118;
  --bg-panel:         #151b25;
  --bg-input:         #101828;
  --bg-elevated:      #1a2130;

  /* ── Text ── */
  --text-primary:     #f0f4f8;
  --text-secondary:   #a5afbf;
  --text-muted:       rgba(165,175,191,0.78);
  --text-disabled:    rgba(165,175,191,0.35);

  /* ── Borders ── */
  --border-subtle:    rgba(255,255,255,0.08);
  --border-default:   rgba(255,255,255,0.13);
  --border-gold:      rgba(201,169,98,0.25);
  --border-focus:     rgba(201,169,98,0.5);

  /* ── Status Colors ── */
  --color-success:    #4ade80;
  --color-danger:     #f87171;
  --color-warning:    #fb923c;
  --color-caution:    #facc15;
  --color-info:       #60a5fa;

  /* ── Status Backgrounds ── */
  --bg-success:       rgba(74,222,128,0.12);
  --bg-danger:        rgba(248,113,113,0.12);
  --bg-warning:       rgba(251,146,60,0.12);
  --bg-caution:       rgba(250,204,21,0.12);
  --bg-info:          rgba(96,165,250,0.12);

  /* ── Radii (Mobile defaults) ── */
  --radius-card:      12px;
  --radius-btn:       8px;
  --radius-pill:      999px;
  --radius-icon:      14px;

  /* ── Spacing ── */
  --space-xs:         4px;
  --space-sm:         8px;
  --space-md:         12px;
  --space-lg:         16px;
  --space-xl:         20px;
  --space-2xl:        24px;
  --space-3xl:        32px;

  /* ── Typography ── */
  --font-base:        15px;
  --font-sm:          13px;
  --font-xs:          12px;
  --font-lg:          17px;
  --font-xl:          20px;
  --font-2xl:         24px;
  --font-3xl:         32px;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold:   700;
  --font-weight-black:  800;

  --line-height-tight:  1.3;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;

  /* ── Interactive ── */
  --btn-min-h:        48px;
  --btn-min-h-sm:     36px;
  --touch-target:     44px;

  /* ── Elevation ── */
  --shadow-sm:        0 1px 2px rgba(0,0,0,0.2);
  --shadow-md:        0 4px 12px rgba(0,0,0,0.25);
  --shadow-lg:        0 8px 24px rgba(0,0,0,0.3);
  --shadow-xl:        0 14px 34px rgba(0,0,0,0.24);

  /* ── Transitions ── */
  --transition-fast:  0.15s ease;
  --transition-base:  0.2s ease;
  --transition-slow:  0.3s ease;

  /* ── Layout ── */
  --header-h:         52px;
  --tabbar-h:         56px;
  --page-padding:     16px;
  --content-max-w:    100%;
  --content-max-w-wide: 1200px;
  --sidebar-w:        220px;

  /* ── Z-Index ── */
  --z-content:        1;
  --z-header:         100;
  --z-tabbar:         100;
  --z-toast:          200;
  --z-modal:          1000;
  --z-tooltip:        1100;
}

/* ── Large Font Mode ── */
body.large-font {
  --font-base: 22px;
  --font-sm: 18px;
  --font-lg: 24px;
  --btn-min-h: 64px;
}

/* ── Desktop Overrides ── */
@media (min-width: 768px) {
  :root {
    --radius-card:    18px;
    --radius-btn:     12px;
    --radius-icon:    16px;
    --page-padding:   clamp(18px, 2.6vw, 40px);
    --content-max-w:  800px;
    --header-h:       56px;
  }
}

@media (min-width: 1200px) {
  :root {
    --content-max-w:  1000px;
  }
}