/*
 * DormTracker Design Tokens
 * Single source of truth for all visual values.
 * Loaded on every page via <link rel="stylesheet" href="/vars.css">.
 * See /DESIGN.md for usage guidelines.
 */

:root {

  /* ── Brand / Primary (Green) ─────────────────────────────── */
  --color-primary:        #2d6a4f;
  --color-primary-hover:  #245a42;
  --color-primary-light:  #40916c;
  --color-primary-subtle: #d1fae5;
  --color-primary-faint:  #f0fdf4;

  /* ── Neutral Scale (Slate) ───────────────────────────────── */
  --gray-950: #060d18;
  --gray-900: #0f172a;
  --gray-800: #1e293b;
  --gray-700: #334155;
  --gray-600: #475569;
  --gray-500: #64748b;
  --gray-400: #94a3b8;
  --gray-300: #cbd5e1;
  --gray-200: #e2e8f0;
  --gray-100: #f1f5f9;
  --gray-50:  #f8fafc;

  /* ── Text ────────────────────────────────────────────────── */
  --color-text:          var(--gray-900);  /* Primary headings */
  --color-text-body:     var(--gray-800);  /* Body copy */
  --color-text-secondary:var(--gray-600);  /* Secondary / meta */
  --color-text-muted:    var(--gray-400);  /* Placeholder, disabled */
  --color-text-inverse:  #ffffff;

  /* ── Surfaces ────────────────────────────────────────────── */
  --color-bg:            var(--gray-50);   /* Page background */
  --color-surface:       #ffffff;          /* Card, panel */
  --color-border:        var(--gray-200);  /* Default border */
  --color-border-strong: var(--gray-300);  /* Stronger border */

  /* ── Navbar ──────────────────────────────────────────────── */
  --color-nav-bg:        var(--gray-800);  /* #1e293b — unified */
  --color-nav-text:      rgba(255,255,255,0.9);
  --nav-height:          60px;

  /* ── Semantic Colors ─────────────────────────────────────── */
  --color-success:        #22c55e;
  --color-success-hover:  #16a34a;
  --color-success-subtle: #f0fdf4;
  --color-danger:         #ef4444;
  --color-danger-hover:   #dc2626;
  --color-danger-subtle:  #fef2f2;
  --color-warning:        #f59e0b;
  --color-warning-subtle: #fffbeb;
  --color-info:           #3b82f6;
  --color-info-subtle:    #eff6ff;

  /* ── Score Badge Colors ──────────────────────────────────── */
  --score-5:      #3b82f6;
  --score-4:      #22c55e;
  --score-3:      #f59e0b;
  --score-3-text: var(--gray-900);
  --score-2:      #f97316;
  --score-1:      #ef4444;
  --score-0:      #94a3b8;

  /* ── Dark Mode ───────────────────────────────────────────── */
  --dark-bg:      var(--gray-900);
  --dark-surface: var(--gray-800);
  --dark-border:  var(--gray-700);
  --dark-text:    #e2e8f0;
  --dark-muted:   var(--gray-400);

  /* ── Typography ──────────────────────────────────────────── */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Type scale — use these, not raw px */
  --text-xs:   11px;  /* labels, badges, table column headers */
  --text-sm:   13px;  /* nav links, meta, secondary copy */
  --text-base: 14px;  /* default body text */
  --text-md:   15px;  /* slightly larger body */
  --text-lg:   16px;  /* lead paragraphs, large inputs */
  --text-xl:   18px;  /* card headings */
  --text-2xl:  22px;  /* section headings, stat numbers */
  --text-3xl:  26px;  /* page titles */
  --text-4xl:  32px;  /* hero sub-headings */
  --text-5xl:  48px;  /* hero headings */

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

  --leading-tight:  1.3;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  /* ── Spacing (4px base unit) ─────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;

  /* ── Border Radius ───────────────────────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius:      8px;    /* default — inputs, buttons, cards */
  --radius-md:   10px;   /* slightly larger cards */
  --radius-lg:   12px;   /* modals, large cards */
  --radius-xl:   16px;   /* onboarding panels */
  --radius-2xl:  20px;   /* login card */
  --radius-full: 9999px; /* pills, avatars */

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow:    0 2px 8px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12), 0 4px 10px rgba(0,0,0,0.07);
  --shadow-xl: 0 20px 50px rgba(0,0,0,0.18), 0 8px 20px rgba(0,0,0,0.10);

  /* ── Transitions ─────────────────────────────────────────── */
  --transition-fast:   0.12s ease;
  --transition:        0.15s ease;
  --transition-normal: 0.20s ease;
  --transition-slow:   0.30s ease;

  /* ── Layout Widths ───────────────────────────────────────── */
  --width-narrow:  800px;
  --width-content: 1100px;
  --width-wide:    1400px;

  /* Legacy aliases — kept so existing CSS using these names doesn't break */
  --input-focus:    var(--color-primary);
  --surface-border: var(--color-border);
  --width-medium:   var(--width-content);
}

/* ── PWA install button ──────────────────────────────────── */
.pwa-install-btn {
  display: none;
  align-items: center;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  padding: 6px 13px;
  border-radius: var(--radius);
  border: 1px solid rgba(45,106,79,0.28);
  color: var(--color-primary);
  background: rgba(45,106,79,0.07);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
  white-space: nowrap;
}
.pwa-install-btn:hover {
  background: rgba(45,106,79,0.13);
  border-color: rgba(45,106,79,0.45);
}
.pwa-install-btn.visible { display: inline-flex; }

/* ── PWA iOS banner ──────────────────────────────────────── */
.pwa-ios-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--dark-surface);
  color: var(--dark-text);
  padding: 14px 20px 20px;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  z-index: 9999;
  border-top: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 -4px 28px rgba(0,0,0,0.4);
  animation: pwaSlideUp 0.28s cubic-bezier(0.22,1,0.36,1);
}
.pwa-ios-banner strong { color: #fff; font-weight: var(--font-bold); }
.pwa-ios-banner-dismiss {
  margin-left: auto;
  flex-shrink: 0;
  background: none;
  border: none;
  color: rgba(255,255,255,0.4);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
}
.pwa-ios-banner-dismiss:hover {
  color: #fff;
  background: rgba(255,255,255,0.1);
}
@keyframes pwaSlideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}