/* ──────────────────────────────────────────────────────────────
   Velour — Base tokens & reset
   Visual language: clean, modern, vibrant, friendly (7shifts vibe)
   ────────────────────────────────────────────────────────────── */

:root {
  /* Surfaces */
  --bg:         #FAFAF7;
  --surface:    #FFFFFF;
  --surface-2:  #F4F2EC;
  --surface-3:  #ECE9E1;

  /* Borders */
  --border:        #E7E3D9;
  --border-strong: #CFC9BC;

  /* Text */
  --text:   #1A1F1B;
  --muted:  #6B6B66;
  --faint:  #ABA89F;

  /* Brand — deep green */
  --primary:        #1F6B4F;
  --primary-hover:  #185640;
  --primary-press:  #134231;
  --primary-fg:     #FFFFFF;
  --primary-bg:     rgba(31, 107, 79, 0.08);
  --primary-border: rgba(31, 107, 79, 0.22);
  --primary-ring:   rgba(31, 107, 79, 0.18);

  /* Accent — warm coral */
  --accent:        #F4A261;
  --accent-hover:  #E08F4D;
  --accent-fg:     #2A1A07;
  --accent-bg:     rgba(244, 162, 97, 0.14);
  --accent-border: rgba(244, 162, 97, 0.32);

  /* Semantic */
  --success:        #2E8B5C;
  --success-bg:     rgba(46, 139, 92, 0.10);
  --success-border: rgba(46, 139, 92, 0.24);

  --warning:        #B07D3A;
  --warning-bg:     rgba(176, 125, 58, 0.10);
  --warning-border: rgba(176, 125, 58, 0.26);

  --danger:        #C8553D;
  --danger-bg:     rgba(200, 85, 61, 0.10);
  --danger-border: rgba(200, 85, 61, 0.26);

  --info:        #3B6FA8;
  --info-bg:     rgba(59, 111, 168, 0.10);
  --info-border: rgba(59, 111, 168, 0.26);

  /* Soft tokens for tutorial cards / callouts */
  --primary-soft: var(--primary-bg);
  --accent-soft:  var(--accent-bg);

  /* Legacy aliases — used by inline styles in existing views */
  --green:     var(--success);
  --green-bg:  var(--success-bg);
  --gold:      var(--warning);
  --gold-bg:   var(--warning-bg);
  --red:       var(--danger);
  --red-bg:    var(--danger-bg);
  --blue:      var(--info);
  --blue-bg:   var(--info-bg);
  --purple:    #6F4FA8;
  --purple-bg: rgba(111, 79, 168, 0.10);
  --border2:   var(--border-strong);

  /* Radii */
  --radius-card:  12px;
  --radius-input: 6px;
  --radius-pill:  999px;
  --radius-sm:    6px;
  --radius:       8px;
  --radius-lg:    16px;

  /* Fonts */
  --font-sans:  'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Inter', system-ui, sans-serif;
  --font-serif: var(--font-display); /* legacy alias for existing markup */

  /* Layout metrics */
  --sidebar-width: 240px;
  --topbar-height: 64px;
  --content-max:   1120px;

  /* Shadows — soft, layered */
  --shadow-xs: 0 1px 2px rgba(20, 25, 22, 0.04);
  --shadow-sm: 0 1px 3px rgba(20, 25, 22, 0.05), 0 1px 2px rgba(20, 25, 22, 0.04);
  --shadow-md: 0 8px 24px rgba(20, 25, 22, 0.06), 0 2px 6px rgba(20, 25, 22, 0.05);
  --shadow-lg: 0 20px 48px rgba(20, 25, 22, 0.10), 0 4px 12px rgba(20, 25, 22, 0.06);
  --shadow-pop: 0 0 0 4px var(--primary-ring);
}

/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: 0.9375rem;       /* 15px */
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}
img { display: block; max-width: 100%; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); }
button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* ── Typography ──────────────────────────────────────────────── */
h1, h2, h3, h4, h5 { font-family: var(--font-display); color: var(--text); letter-spacing: -0.01em; }
h1 { font-size: 2rem;     font-weight: 700; line-height: 1.15; }
h2 { font-size: 1.5rem;   font-weight: 700; line-height: 1.2; }
h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
h4 { font-size: 0.9375rem; font-weight: 600; }

.serif { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }

.page-title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--text);
}
.page-subtitle {
  font-size: 0.875rem;
  color: var(--muted);
  margin-top: 0.375rem;
}

/* ── Utilities ───────────────────────────────────────────────── */
.text-muted   { color: var(--muted); }
.text-faint   { color: var(--faint); }
.text-primary { color: var(--primary); }
.text-accent  { color: var(--accent-hover); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger  { color: var(--danger); }
.text-info    { color: var(--info); }
.text-gold    { color: var(--warning); }
.text-green   { color: var(--success); }
.text-blue    { color: var(--info); }
.text-red     { color: var(--danger); }
.text-center  { text-align: center; }
.text-right   { text-align: right; }

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.hidden { display: none; }
[hidden] { display: none !important; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0; }

::selection { background: var(--primary-bg); color: var(--primary); }