/* ============================================================
   CWDB Design System — Colors & Typography
   Columbia Windows Database · Internal CRM & Routing Tool
   ============================================================ */

/* ─── Base Color Tokens ──────────────────────────────────── */
:root {
  /* Backgrounds */
  --cwdb-bg:        #070b12;
  --cwdb-surface:   #0f1622;
  --cwdb-surface-2: #121c2b;
  --cwdb-surface-3: #18263a;

  /* Text */
  --cwdb-text:  #ecf3ff;
  --cwdb-muted: #9db1cc;

  /* Accents */
  --cwdb-accent:   #66d6ff;   /* cyan — primary */
  --cwdb-accent-2: #8c7dff;   /* violet — secondary */
  --cwdb-danger:   #ff7b9c;   /* pink-red — errors/destructive */

  /* Borders */
  --cwdb-border: rgba(148, 196, 255, 0.20);

  /* Glow — primary accent glow ring */
  --cwdb-glow: 0 0 0 1px rgba(102, 214, 255, 0.20),
               0 0 35px rgba(102, 214, 255, 0.18);

  /* ─── Semantic Period Colors (DO NOT repurpose) ─── */
  --cwdb-morning-rgb:   255, 200, 102;   /* amber  — Morning period */
  --cwdb-afternoon-rgb: 102, 214, 255;   /* cyan   — Afternoon period */
  --cwdb-evening-rgb:   167, 139, 250;   /* violet — Evening period */
  --cwdb-setting-rgb:   34,  197, 94;    /* green  — Active setting band / success */
  --cwdb-sameday-rgb:   255, 122, 0;     /* orange — Same-day column */
  --cwdb-blocked-rgb:   239, 68,  68;    /* red    — Blocked / destructive */

  --cwdb-morning:   rgba(var(--cwdb-morning-rgb),   1);
  --cwdb-afternoon: rgba(var(--cwdb-afternoon-rgb), 1);
  --cwdb-evening:   rgba(var(--cwdb-evening-rgb),   1);
  --cwdb-success:   rgba(var(--cwdb-setting-rgb),   1);
  --cwdb-sameday:   rgba(var(--cwdb-sameday-rgb),   1);
  --cwdb-error:     rgba(var(--cwdb-blocked-rgb),   1);

  /* ─── Spacing Scale ──────────────────────────────── */
  --space-1:  0.25rem;   /* 4px  — micro gap */
  --space-2:  0.5rem;    /* 8px  — tight gap */
  --space-3:  0.75rem;   /* 12px — compact padding */
  --space-4:  1rem;      /* 16px — standard panel padding */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px — page section padding */
  --space-8:  2rem;      /* 32px — large section gap */
  --space-10: 2.5rem;    /* 40px */

  /* ─── Border Radii ───────────────────────────────── */
  --radius-pill:  999px;  /* chips, badges, brand pill */
  --radius-panel: 14px;   /* panels, page headers, modals, auth card */
  --radius-card:  12px;   /* table overflow, job cards, lanes */
  --radius-btn:   10px;   /* buttons, inputs, alerts */
  --radius-sm:    8px;    /* nav links, small controls */

  /* ─── Shadows ────────────────────────────────────── */
  --shadow-sm:    0 6px 14px rgba(4, 10, 16, 0.34);
  --shadow-md:    0 14px 30px rgba(4, 10, 16, 0.35);
  --shadow-lg:    0 20px 48px rgba(4, 10, 16, 0.65);
  --shadow-hover: 0 10px 20px rgba(4, 10, 16, 0.42);
  --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.04);

  /* ─── Typography ─────────────────────────────────── */
  --font-sans: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Mono", "Consolas", monospace;

  /* Size scale */
  --text-micro:  0.70rem;   /* 11.2px — micro labels, timestamps */
  --text-xs:     0.78rem;   /* 12.5px — welcome text, badge labels */
  --text-sm:     0.80rem;   /* 12.8px — nav links, muted hints */
  --text-base:   0.86rem;   /* 13.8px — body, form labels */
  --text-body:   0.90rem;   /* 14.4px — table cells, standard body */
  --text-md:     0.92rem;   /* 14.7px — table content */
  --text-lg:     1.00rem;   /* 16px   — card titles */
  --text-xl:     1.05rem;   /* 16.8px — drawer headings */
  --text-2xl:    1.25rem;   /* 20px   — section headings */
  --text-3xl:    1.45rem;   /* 23.2px — page h1 */

  /* Weight scale */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* ─── Semantic Type Roles ────────────────────────── */
  --h1-size:   var(--text-3xl);
  --h1-weight: var(--weight-bold);
  --h1-leading: 1.2;

  --h2-size:   var(--text-2xl);
  --h2-weight: var(--weight-bold);
  --h2-leading: 1.25;

  --h3-size:   var(--text-lg);
  --h3-weight: var(--weight-semibold);
  --h3-leading: 1.3;

  --body-size:    var(--text-body);
  --body-weight:  var(--weight-regular);
  --body-leading: 1.45;

  --label-size:   var(--text-base);
  --label-weight: var(--weight-semibold);
  --label-color:  var(--cwdb-muted);

  --code-size:   0.82em;
  --code-family: var(--font-mono);

  /* ─── Surface Gradients (reusable) ──────────────── */
  --gradient-panel:  linear-gradient(160deg, rgba(20, 31, 47, 0.84), rgba(13, 20, 31, 0.84));
  --gradient-hero:   linear-gradient(135deg, rgba(22, 34, 52, 0.82), rgba(16, 24, 36, 0.82));
  --gradient-header: linear-gradient(180deg, rgba(32, 49, 73, 0.80), rgba(21, 32, 48, 0.80));
  --gradient-btn:    linear-gradient(180deg, rgba(23, 34, 51, 0.90), rgba(16, 24, 36, 0.92));
  --gradient-btn-primary: linear-gradient(180deg, rgba(27, 124, 150, 0.85), rgba(15, 84, 121, 0.94));
  --gradient-page-bg: radial-gradient(1200px 700px at 20% -10%, rgba(102, 214, 255, 0.15), transparent 60%);

  /* ─── Transition ─────────────────────────────────── */
  --transition-base: 0.20s ease;
}

/* ─── Semantic Utility Classes ───────────────────────────── */

/* Colors */
.cwdb-text        { color: var(--cwdb-text); }
.cwdb-muted       { color: var(--cwdb-muted); }
.cwdb-accent      { color: var(--cwdb-accent); }
.cwdb-accent-2    { color: var(--cwdb-accent-2); }
.cwdb-danger      { color: var(--cwdb-danger); }

/* Background fills */
.cwdb-bg          { background: var(--cwdb-bg); }
.cwdb-surface     { background: var(--cwdb-surface); }
.cwdb-surface-2   { background: var(--cwdb-surface-2); }

/* Type roles */
.cwdb-h1 {
  font-family: var(--font-sans);
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  line-height: var(--h1-leading);
  color: var(--cwdb-text);
  margin: 0;
}

.cwdb-h2 {
  font-family: var(--font-sans);
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  line-height: var(--h2-leading);
  color: var(--cwdb-text);
  margin: 0;
}

.cwdb-h3 {
  font-family: var(--font-sans);
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: var(--h3-leading);
  color: var(--cwdb-text);
  margin: 0;
}

.cwdb-body {
  font-family: var(--font-sans);
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: var(--body-leading);
  color: var(--cwdb-text);
}

.cwdb-label {
  font-family: var(--font-sans);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  color: var(--label-color);
  letter-spacing: 0.01em;
}

.cwdb-label-upper {
  font-size: var(--text-micro);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cwdb-muted);
}

.cwdb-tabular {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}

.cwdb-code {
  font-family: var(--font-mono);
  font-size: var(--code-size);
  color: var(--cwdb-accent);
  background: rgba(102, 214, 255, 0.10);
  border-radius: 4px;
  padding: 0.1em 0.35em;
}