/* ============================================================
 * BouwGrid — Design tokens & semantic styles
 * Source of truth: Project QR/src/styles.css + STYLEGUIDE.md
 * ============================================================ */

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

:root {
  /* ── Typography stacks ─────────────────────────── */
  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── Colors: backgrounds ───────────────────────── */
  --bg: #f7f6f3;            /* warm off-white page background */
  --surface: #ffffff;        /* cards, modals, topbar */
  --surface2: #f2f1ed;       /* subtle fills, hover */
  --surface3: #eceae5;       /* deeper fills, active */

  /* ── Colors: text ──────────────────────────────── */
  --fg1: #1a1a18;            /* primary text */
  --fg2: #888780;            /* secondary / meta */
  --fg3: #b0ada8;            /* tertiary, placeholders, chevrons */

  /* Legacy aliases (match the codebase) */
  --text: var(--fg1);
  --text-secondary: var(--fg2);
  --text-tertiary: var(--fg3);

  /* ── Colors: borders ───────────────────────────── */
  --border: rgba(0, 0, 0, 0.08);
  --border-medium: rgba(0, 0, 0, 0.16);
  --border-strong: rgba(0, 0, 0, 0.28);

  /* ── Colors: brand / accent ────────────────────── */
  --accent: #CF6A3E;         /* warm terracotta — primary CTA only */
  --accent-hover: #A8532B;
  --accent-bg: rgba(207, 106, 62, 0.10);
  --primary: #2563eb;        /* info / focus rings */
  --primaryText: #ffffff;

  /* ── Colors: semantic ─────────────────────────── */
  --success: #16a34a;
  --success-bg: rgba(22, 163, 74, 0.08);
  --warning: #f59e0b;
  --warning-bg: rgba(245, 158, 11, 0.10);
  --danger: #dc2626;
  --danger-bg: rgba(220, 38, 38, 0.06);

  /* Status palette (per task state) */
  --status-open-fg: #1d4ed8;
  --status-open-bg: rgba(37, 99, 235, 0.08);
  --status-open-border: rgba(37, 99, 235, 0.18);
  --status-busy-fg: #b45309;
  --status-busy-bg: rgba(245, 158, 11, 0.10);
  --status-busy-border: rgba(245, 158, 11, 0.22);
  --status-pending-fg: #6d28d9;
  --status-pending-bg: rgba(147, 51, 234, 0.08);
  --status-pending-border: rgba(147, 51, 234, 0.18);
  --status-done-fg: #15803d;
  --status-done-bg: rgba(22, 163, 74, 0.08);
  --status-done-border: rgba(22, 163, 74, 0.20);

  /* ── Radii ─────────────────────────────────────── */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-card: 22px;
  --radius-topbar: 28px;
  --radius-pill: 999px;

  /* ── Spacing ──────────────────────────────────── */
  --space1: 10px;
  --space2: 16px;
  --space3: 24px;
  --space4: 32px;
  --space5: 48px;

  /* ── Shadows (floating UI only — never on data rows) */
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 10px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.12);
  --shadow-topbar: 0 24px 52px rgba(15, 23, 42, 0.08);

  /* ── Easing & motion ───────────────────────────── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 120ms;
  --t-base: 220ms;
  --t-slow: 260ms;

  /* ── Z-index scale ─────────────────────────────── */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-sidebar: 300;
  --z-overlay: 500;
  --z-modal: 600;
  --z-popover: 700;
  --z-toast: 800;
  --z-tooltip: 900;
  --z-top: 9999;
}

/* ============================================================
 * SEMANTIC STYLES — drop these on plain HTML for instant brand
 * ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01', 'cv11';
}

h1, h2, h3, h4 { margin: 0; line-height: 1.45; font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: 28px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
h4 { font-size: 15px; font-weight: 500; }

p { margin: 0 0 var(--space2); color: var(--fg1); }
small, .meta { color: var(--fg2); font-size: 13px; }

/* The whisper-label — 11px uppercase muted */
.section-label, .eyebrow {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--fg2);
}

/* Numbers always in mono */
.num, .stat, code, kbd, samp {
  font-family: var(--font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

a { color: var(--fg1); text-decoration: none; border-bottom: 1px solid transparent; }
a:hover { border-bottom-color: var(--fg1); }