/* =========================================================
   Tech Product Owner — Design Tokens
   Calm · Trustworthy · Tech-competent
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root {
  /* ---------- Brand · Indigo (primary) ---------- */
  --primary-500: #2563EB;   /* Professional Indigo */
  --primary-600: #1D4ED8;   /* Deep Trust Blue    */
  --primary-700: #1E40AF;   /* pressed            */
  --primary-50:  #EFF6FF;
  --primary-100: #DBEAFE;

  /* ---------- Brand · Teal (secondary) ---------- */
  --secondary-500: #14B8A6;  /* Calm Teal Green  */
  --secondary-600: #0D9488;  /* Grounded Teal    */
  --secondary-50:  #F0FDFA;
  --secondary-100: #CCFBF1;

  /* ---------- Neutrals · slate ---------- */
  --white:        #FFFFFF;
  --slate-50:     #F8FAFC;   /* Light Slate */
  --slate-100:    #F1F5F9;
  --slate-200:    #E2E8F0;
  --slate-300:    #CBD5E1;
  --slate-500:    #64748B;
  --slate-700:    #334155;
  --slate-900:    #0F172A;   /* Dark Slate  */

  /* ---------- States ---------- */
  --state-success: #10B981;
  --state-warning: #F59E0B;
  --state-error:   #EF4444;
  --state-info:    var(--primary-500);

  /* ---------- Semantic surfaces ---------- */
  --bg-page:     var(--slate-50);
  --bg-surface:  var(--white);
  --bg-subtle:   var(--slate-100);
  --bg-inverse:  var(--slate-900);

  /* ---------- Semantic text ---------- */
  --text-default: var(--slate-900);
  --text-muted:   var(--slate-500);
  --text-strong:  var(--slate-900);
  --text-accent:  var(--primary-600);
  --text-on-brand: var(--white);
  --border-default: var(--slate-200);

  /* ---------- Type ---------- */
  --font-sans:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading:  "IBM Plex Sans", "Inter", -apple-system, sans-serif;

  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-md:   16px;
  --fs-lg:   18px;
  --fs-xl:   20px;
  --fs-2xl:  24px;
  --fs-3xl:  32px;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --lh-tight:   1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

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

  /* ---------- Radii ---------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* ---------- Shadows (warm gray) ---------- */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 4px 6px rgba(15, 23, 42, 0.05), 0 10px 15px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 10px 15px rgba(15, 23, 42, 0.06), 0 20px 25px rgba(15, 23, 42, 0.10);
}

html, body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-default);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  margin: 0;
}
h1 { font-size: var(--fs-3xl); font-weight: var(--fw-bold); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); font-weight: var(--fw-medium); }

p { font-size: var(--fs-md); line-height: var(--lh-normal); margin: 0 0 var(--space-3) 0; }
small, .text-sm { font-size: var(--fs-sm); color: var(--text-muted); }
.text-xs { font-size: var(--fs-xs); color: var(--text-muted); }
.text-muted { color: var(--text-muted); }
.text-accent { color: var(--text-accent); }

a {
  color: var(--primary-600);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 160ms ease, color 160ms ease;
}
a:hover { color: var(--primary-700); border-bottom-color: currentColor; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: 40px; padding: 0 var(--space-3);
  border: none; border-radius: var(--radius-md);
  font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, transform 120ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary    { background: var(--primary-500); color: var(--white); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--primary-600); }

.btn-secondary  { background: var(--secondary-500); color: var(--white); box-shadow: var(--shadow-sm); }
.btn-secondary:hover { background: var(--secondary-600); }

.btn-outline    { background: var(--white); color: var(--slate-900); border: 1px solid var(--slate-200); }
.btn-outline:hover { border-color: var(--primary-500); color: var(--primary-600); }

.btn-ghost      { background: transparent; color: var(--slate-700); }
.btn-ghost:hover { background: var(--slate-100); }