/**
 * SalesDesk — Global CSS
 * T1 owns this file. ALL :root vars are defined here.
 *
 * RULES:
 *   - No team hardcodes a hex colour in a page-level stylesheet.
 *   - If a new variable is needed, T1 adds it here and announces it
 *     in SHARED_CHANGELOG.md.
 *   - Font loading lives here — no page adds a <link> for fonts.
 *   - Base reset only — no component styles (those are in components.css).
 */

/* ── Google Fonts (single load) ────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;1,9..144,300&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ── Design tokens ─────────────────────────────────────── */
:root {
  /* Primary (SalesDesk blue) */
  --p:           #0f4c9e;
  --p-dark:      #0c3273;
  --p-mid:       #2563eb;
  --p-light:     #eff4ff;
  --p-b:         #bfdbfe;

  /* Text */
  --text:        #1e293b;
  --text2:       #3d4663;
  --muted:       #64748b;
  --faint:       #94a3b8;

  /* Surface */
  --bg:          #f3f4f8;
  --bg2:         #f8f9fc;
  --white:       #ffffff;
  --border:      #e2e8f0;
  --border2:     #cbd5e1;

  /* Status — green (success, verified, active) */
  --green:       #15803d;
  --gr-bg:       #f0fdf4;
  --gr-b:        #bbf7d0;

  /* Status — amber (warning, pending) */
  --amber:       #b45309;
  --amb-bg:      #fffbeb;
  --amb-b:       #fde68a;

  /* Status — red (error, rejected, critical) */
  --red:         #dc2626;
  --red-bg:      #fef2f2;
  --red-b:       #fecaca;

  /* Status — teal (T1 internal / infra / platform) */
  --teal:        #0d7377;
  --teal-bg:     #f0fdfa;
  --teal-b:      #99f6e4;

  /* Purple (org mode) */
  --purple:      #7c3aed;
  --pur-bg:      #faf5ff;
  --pur-b:       #ede9fe;

  /* Typography */
  --mono:        'DM Mono', monospace;
  --serif:       'Fraunces', serif;
  --sans:        'DM Sans', sans-serif;

  /* Spacing scale (rem) */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;

  /* Radius */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  18px;
  --r-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(15,76,158,.06);
  --shadow-md:  0 4px 16px rgba(15,76,158,.08);
  --shadow-lg:  0 8px 32px rgba(15,76,158,.12);

  /* Z-index scale */
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-modal:     300;
  --z-toast:     400;
}

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

html {
  font-size: 15px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--bg);
  color: var(--text);
}

body {
  font-family: var(--sans);
  line-height: 1.7;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--p);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

strong {
  font-weight: 600;
  color: var(--text);
}

/* ── Focus visible (accessibility) ────────────────────── */
:focus-visible {
  outline: 2px solid var(--p);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}