/* ═══════════════════════════════════════════
   BASE.CSS — Clarity Atlas Redesign Base
   ═══════════════════════════════════════════ */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/Inter-Variable.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/InterTight-Variable.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../assets/fonts/JetBrainsMono-Variable.woff2') format('woff2');
}

:root {
  /* Surfaces */
  --surface-0:     #f9fafb;    /* page background */
  --surface-1:     #ffffff;    /* card / modal background */
  --surface-2:     #f3f4f6;    /* input / row-hover / sidebar light alt */
  --surface-3:     #e5e7eb;    /* borders, dividers */
  --surface-4:     #d1d5db;    /* stronger borders, disabled */

  /* Text */
  --text-primary:   #111827;
  --text-secondary: #6b7280;
  --text-muted:     #9ca3af;
  --text-inverse:   #ffffff;

  /* Legacy variable mappings (maintains compatibility with scripts using old vars) */
  --bg:       var(--surface-0);
  --bg2:      var(--surface-1);
  --bg3:      var(--surface-2);
  --bg4:      var(--surface-3);
  --border:   var(--surface-3);
  --border2:  var(--surface-4);
  --text:     var(--text-primary);
  --text2:    var(--text-secondary);
  --text3:    var(--text-muted);

  /* Brand (overridable by tenant) */
  --brand-primary:    #2563eb;
  --brand-secondary:  #8b5cf6;
  --brand-gradient:   linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
  --brand-gradient-soft: linear-gradient(135deg,
      color-mix(in srgb, var(--brand-primary) 8%, transparent),
      color-mix(in srgb, var(--brand-secondary) 8%, transparent));

  /* Legacy accent mappings */
  --accent:   var(--brand-primary);
  --accent2:  var(--brand-secondary);

  /* Sidebar (dark by default, overridable) */
  --sidebar-bg:     #0f172a;
  --sidebar-text:   rgba(255, 255, 255, 0.65);
  --sidebar-active: #ffffff;
  --sidebar-hover:  rgba(255, 255, 255, 0.08);
  --sidebar-border: rgba(255, 255, 255, 0.08);
  --sidebar-width-collapsed: 64px;
  --sidebar-width-expanded:  240px;

  /* Semantic */
  --success:     #10b981;  --success-bg:  #ecfdf5;  --success-border: #a7f3d0;
  --warning:     #f59e0b;  --warning-bg:  #fffbeb;  --warning-border: #fde68a;
  --danger:      #ef4444;  --danger-bg:   #fef2f2;  --danger-border:  #fecaca;
  --info:        #3b82f6;  --info-bg:     #eff6ff;  --info-border:    #bfdbfe;

  /* Legacy semantic mappings */
  --green:      var(--success);
  --green-bg:   var(--success-bg);
  --amber:      var(--warning);
  --amber-bg:   var(--warning-bg);
  --red:        var(--danger);
  --red-bg:     var(--danger-bg);
  --teal:       #06b6d4;
  --purple:     #8b5cf6;

  /* Shape */
  --card-radius: 12px;
  --btn-radius:  8px;
  --input-radius: 8px;
  --radius:      8px;
  --radius-lg:   12px;

  /* Typography */
  --font-heading: 'Inter Tight', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
  --mono:         var(--font-mono);
  --display:      var(--font-heading);

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -1px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04);

  /* Transitions */
  --transition-fast: 0.12s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-med:  0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  height: 100%;
}

body {
  background: var(--surface-0);
  color: var(--text-primary);
  font-family: var(--font-body);
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}

a {
  color: var(--brand-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover {
  color: var(--brand-secondary);
}

img, svg {
  display: block;
  max-width: 100%;
}

/* ── Scrollbar ── */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--surface-3);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--surface-4);
}

/* ── Utilities (Keep old names for compatibility) ── */
.mono    { font-family: var(--font-mono); }
.hidden  { display: none !important; }
.mt05    { margin-top: 0.5rem; }
.mt1     { margin-top: 1rem; }
.mt2     { margin-top: 1.5rem; }
.mt3     { margin-top: 2rem; }
.mb05    { margin-bottom: 0.5rem; }
.mb1     { margin-bottom: 1rem; }
.mb2     { margin-bottom: 1.5rem; }
.mb3     { margin-bottom: 2rem; }

.color-green  { color: var(--success); }
.color-amber  { color: var(--warning); }
.color-red    { color: var(--danger); }
.color-accent { color: var(--brand-primary); }
.color-teal   { color: var(--teal); }
.color-muted  { color: var(--text-secondary); }

.flex          { display: flex; }
.flex-center   { display: flex; align-items: center; justify-content: center; }
.flex-between  { display: flex; justify-content: space-between; align-items: center; }
.flex-gap      { display: flex; gap: 0.75rem; align-items: center; }
.flex-col      { display: flex; flex-direction: column; }
.flex-wrap     { display: flex; flex-wrap: wrap; }
.grid-gap      { gap: 1rem; }

.text-right  { text-align: right; }
.text-center { text-align: center; }

.section-divider {
  height: 1px;
  background: var(--surface-3);
  margin: 1.5rem 0;
}