/* ============================================================
   DegreeBaba Design System — Colors & Typography
   Source: Brand Language Guide (April 2026)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap');

:root {

  /* ── Brand Colors ─────────────────────────────────────── */
  --color-navy:         #0E1F3D;   /* Primary — headers, sidebar, primary buttons */
  --color-navy-hover:   #162d54;   /* Hover state for navy elements */
  --color-orange:       #E84010;   /* Accent — CTAs, active states, progress, alerts */
  --color-orange-hover: #c93509;   /* Hover state for orange elements */

  /* ── Surface Colors ───────────────────────────────────── */
  --color-bg:           #F7F8FA;   /* Page background */
  --color-surface:      #FFFFFF;   /* Card / panel background */
  --color-border:       #E5E7EB;   /* All dividers, input borders, table lines */

  /* ── Semantic — Success ───────────────────────────────── */
  --color-success-text: #3B6D11;
  --color-success-bg:   #EAF3DE;
  --color-success-border: #B6D98A;

  /* ── Semantic — Warning ───────────────────────────────── */
  --color-warning-text: #854F0B;
  --color-warning-bg:   #FAEEDA;
  --color-warning-border: #F5C97A;

  /* ── Semantic — Error ─────────────────────────────────── */
  --color-error-text:   #A32D2D;
  --color-error-bg:     #FCEBEB;
  --color-error-border: #F09595;

  /* ── Semantic — Info ──────────────────────────────────── */
  --color-info-text:    #185FA5;
  --color-info-bg:      #E6F1FB;
  --color-info-border:  #93C4EE;

  /* ── Neutral Scale ────────────────────────────────────── */
  --gray-900: #111827;   /* Primary text */
  --gray-600: #4B5563;   /* Secondary text, labels */
  --gray-400: #9CA3AF;   /* Placeholder, disabled */
  --gray-100: #F3F4F6;   /* Hover backgrounds */

  /* ── Semantic Text Aliases ────────────────────────────── */
  --text-primary:   var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-disabled:  var(--gray-400);
  --text-inverse:   #FFFFFF;

  /* ── Typography Fonts ─────────────────────────────────── */
  --font-sans:  'DM Sans', system-ui, sans-serif;
  --font-mono:  'JetBrains Mono', 'Courier New', monospace;

  /* ── Type Scale ───────────────────────────────────────── */
  --text-2xl:  24px;   /* Page titles      — weight 600, lh 1.3  */
  --text-xl:   20px;   /* Section headers  — weight 600, lh 1.35 */
  --text-lg:   16px;   /* Card titles      — weight 500, lh 1.5  */
  --text-base: 14px;   /* Body / desc      — weight 400, lh 1.6  */
  --text-sm:   12px;   /* Labels, badges   — weight 400, lh 1.5  */
  --text-xs:   11px;   /* Metadata, stamps — weight 500, lh 1.4  */

  /* ── Spacing ──────────────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-6:   24px;
  --space-8:   32px;
  --space-12:  48px;

  /* ── Border Radius ────────────────────────────────────── */
  --radius-sm:  4px;    /* Badges, tags, chips */
  --radius-md:  8px;    /* Buttons, inputs, small cards */
  --radius-lg:  12px;   /* Main cards and panels */
  --radius-xl:  16px;   /* Modals, upload zones */

  /* ── Shadows ──────────────────────────────────────────── */
  --shadow-card:  0 1px 3px rgba(0,0,0,0.06);
  --shadow-modal: 0 8px 24px rgba(0,0,0,0.12);
  --shadow-dropdown: 0 4px 12px rgba(0,0,0,0.10);

  /* ── Transitions ──────────────────────────────────────── */
  --transition-fast: all 0.15s ease;
  --transition-progress: all 0.3s ease;

  /* ── Layout ───────────────────────────────────────────── */
  --sidebar-width: 240px;
  --topbar-height: 60px;
  --content-max-width: 1100px;
}

/* ── Semantic Typography Classes ──────────────────────────── */

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

h1, .h1 {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
}

h2, .h2 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-primary);
}

h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-primary);
}

p, .body {
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-primary);
}

.label {
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-secondary);
}

.caption {
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}

code, .mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 400;
  background: var(--gray-100);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  color: var(--color-navy);
}

/* ── Utility: Secondary text ──────────────────────────────── */
.text-secondary { color: var(--text-secondary); }
.text-disabled  { color: var(--text-disabled); }
.text-inverse   { color: var(--text-inverse); }
.text-success   { color: var(--color-success-text); }
.text-warning   { color: var(--color-warning-text); }
.text-error     { color: var(--color-error-text); }
.text-info      { color: var(--color-info-text); }