/* =========================================================================
   Clock-Work — Colors & Type Foundations
   A serious tool for solo tradesmen. Calm, dense, factual. No warmth-for-
   warmth's-sake. The brand's friendliness lives in the LOGO and the COPY,
   not in the chrome.
   ========================================================================= */

/* ---------- Fonts (Google Fonts substitutions — flag to user) ---------- */
/* IBM Plex Sans — humanist sans with a engineered feel. Reads as a tool,
   not a consumer app. Caveat is loaded ONLY for the logo wordmark. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Caveat:wght@600;700&display=swap');

:root {
  /* =====================================================================
     COLOR — Brand
     Sampled from the production logo (logo_final_smoothed.png). All steps
     derived from #2559E6 in HSL space.
     ===================================================================== */
  --cw-blue-50:  #EEF2FE;
  --cw-blue-100: #DBE3FC;
  --cw-blue-200: #B5C3F8;
  --cw-blue-300: #889EF1;
  --cw-blue-400: #5C7AEC;
  --cw-blue-500: #2559E6;   /* primary brand — matches the logo */
  --cw-blue-600: #1E47BD;
  --cw-blue-700: #1A3998;
  --cw-blue-800: #172E72;
  --cw-blue-900: #14224F;

  /* =====================================================================
     COLOR — Neutrals (trace of warmth so it doesn't feel sterile)
     A whisper of yellow in the gray. No cream.
     ===================================================================== */
  --cw-bg:        #F4F4F2;  /* app canvas */
  --cw-bg-2:      #ECEBE7;  /* sunken */
  --cw-surface:   #FFFFFF;  /* cards */
  --cw-surface-2: #FAFAF7;  /* inputs, hover */
  --cw-ink-900:   #1A1A1F;  /* primary text */
  --cw-ink-700:   #3F3F47;
  --cw-ink-500:   #6B6B74;
  --cw-ink-300:   #A1A1A8;
  --cw-line:      #E5E5E0;  /* hairlines */
  --cw-line-strong:#CDCDC5;

  /* =====================================================================
     COLOR — Category tag colors (used as small dots + chip fills for
     tagging tasks, trades, customers — NOT as paper). Muted on purpose.
     ===================================================================== */
  --cw-tag-blue-bg:    #E3EBFB;  --cw-tag-blue:   #1E47BD;
  --cw-tag-purple-bg:  #ECE5FA;  --cw-tag-purple: #6B4FCB;
  --cw-tag-teal-bg:    #DDEEEB;  --cw-tag-teal:   #1E7A6B;
  --cw-tag-amber-bg:   #F5E8D0;  --cw-tag-amber:  #9A6F1B;
  --cw-tag-rose-bg:    #F4DDE0;  --cw-tag-rose:   #A33B4D;
  --cw-tag-slate-bg:   #E4E4E2;  --cw-tag-slate:  #4F5560;

  /* =====================================================================
     COLOR — Semantic (muted, like a manila folder, not a hazard sign)
     ===================================================================== */
  --cw-success:    #1E7A4F;
  --cw-success-bg: #DEEEE3;
  --cw-warn:       #9A6F1B;
  --cw-warn-bg:    #F5E8D0;
  --cw-danger:     #A8342A;
  --cw-danger-bg:  #F1D9D6;
  --cw-info:       var(--cw-blue-500);
  --cw-info-bg:    var(--cw-blue-50);

  /* =====================================================================
     SEMANTIC color tokens (use these)
     ===================================================================== */
  --bg:           var(--cw-bg);
  --bg-sunken:    var(--cw-bg-2);
  --surface:      var(--cw-surface);
  --surface-2:    var(--cw-surface-2);
  --fg-1:         var(--cw-ink-900);
  --fg-2:         var(--cw-ink-700);
  --fg-3:         var(--cw-ink-500);
  --fg-muted:     var(--cw-ink-300);
  --fg-on-brand:  #FFFFFF;
  --border:       var(--cw-line);
  --border-strong:var(--cw-line-strong);
  --brand:        var(--cw-blue-500);
  --brand-hover:  var(--cw-blue-600);
  --brand-press:  var(--cw-blue-700);
  --focus-ring:   var(--cw-blue-300);

  /* =====================================================================
     TYPE — Families
     UI:     IBM Plex Sans — the whole product, headings to body
     Mono:   IBM Plex Mono — SKUs, times, money, table cells of numbers
     Logo:   Caveat — ONLY for the logo wordmark. Never in product chrome.
     ===================================================================== */
  --font-ui:      "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-logo:    "Caveat", "Bradley Hand", cursive;   /* logo only */

  /* TYPE — Scale (denser than before — tradesmen want information, not air) */
  --fs-xs:    0.6875rem; /* 11 — meta */
  --fs-sm:    0.8125rem; /* 13 — captions, table cells */
  --fs-base:  0.9375rem; /* 15 — body */
  --fs-md:    1rem;      /* 16 — emphasised body */
  --fs-lg:    1.125rem;  /* 18 — h4 */
  --fs-xl:    1.3125rem; /* 21 — h3 */
  --fs-2xl:   1.625rem;  /* 26 — h2 */
  --fs-3xl:   2rem;      /* 32 — h1 / page title */
  --fs-4xl:   2.5rem;    /* 40 — marketing display */

  --lh-tight: 1.2;
  --lh-snug:  1.35;
  --lh-body:  1.5;

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

  /* =====================================================================
     SPACING — 4px base
     ===================================================================== */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* =====================================================================
     RADIUS — tight & functional
     ===================================================================== */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   10px;
  --r-xl:   14px;
  --r-pill: 999px;

  /* =====================================================================
     SHADOW — almost none. Hairlines do most of the work.
     ===================================================================== */
  --sh-1: 0 1px 0 rgba(0,0,0,0.03);
  --sh-2: 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.05);
  --sh-3: 0 4px 12px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.05);
  --sh-focus: 0 0 0 3px rgba(55,96,255,0.22);

  /* =====================================================================
     MOTION — functional, not playful
     ===================================================================== */
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast:   100ms;
  --dur-base:   180ms;
  --dur-slow:   240ms;
}

/* =========================================================================
   Dark mode — same brand, calmer at night.
   Activate with <html data-theme="dark"> or [data-theme="dark"] on any
   ancestor. Brand blue is held constant; everything neutral inverts.
   ========================================================================= */
[data-theme="dark"] {
  /* Brand lifts one step so the logo's #2559E6 stays legible on dark */
  --cw-blue-500: #4A7BFF;
  --cw-blue-600: #2559E6;
  --cw-blue-700: #1E47BD;

  /* Neutrals — warm-tinted near-black, ladder of dark grays */
  --cw-bg:        #161618;
  --cw-bg-2:      #1D1D20;
  --cw-surface:   #232327;
  --cw-surface-2: #2A2A2E;
  --cw-ink-900:   #ECECEE;
  --cw-ink-700:   #B6B6BC;
  --cw-ink-500:   #7A7A82;
  --cw-ink-300:   #545459;
  --cw-line:      #2F2F35;
  --cw-line-strong:#44444B;

  /* Category tags — desaturated, dark backgrounds with lifted fg */
  --cw-tag-blue-bg:   #1E2A4D;  --cw-tag-blue:   #8CA8FF;
  --cw-tag-purple-bg: #2A2147;  --cw-tag-purple: #B3A0F0;
  --cw-tag-teal-bg:   #1A332E;  --cw-tag-teal:   #7CCEBE;
  --cw-tag-amber-bg:  #3A2E15;  --cw-tag-amber:  #E6BB6A;
  --cw-tag-rose-bg:   #3B1F23;  --cw-tag-rose:   #E69BA8;
  --cw-tag-slate-bg:  #2A2A2E;  --cw-tag-slate:  #B0B0B8;

  /* Semantic — same hues, dark-mode treatment */
  --cw-success:    #6FCB95;
  --cw-success-bg: #1A2F22;
  --cw-warn:       #E6BB6A;
  --cw-warn-bg:    #3A2E15;
  --cw-danger:     #E58A82;
  --cw-danger-bg:  #3D1E1B;
  --cw-info:       var(--cw-blue-500);
  --cw-info-bg:    #1E2A4D;

  /* Shadows in dark mode are heavier blacks but still subtle */
  --sh-1: 0 1px 0 rgba(0,0,0,0.5);
  --sh-2: 0 1px 2px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.5);
  --sh-3: 0 6px 16px rgba(0,0,0,0.55), 0 12px 28px rgba(0,0,0,0.45);
  --sh-focus: 0 0 0 3px rgba(83,119,255,0.35);

  color-scheme: dark;
}

/* =========================================================================
   Semantic element styles
   ========================================================================= */
.cw-body {
  font-family: var(--font-ui);
  font-size:   var(--fs-base);
  line-height: var(--lh-body);
  color:       var(--fg-1);
  background:  var(--bg);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01" 1;  /* IBM Plex stylistic tweaks */
}

.cw-h1, h1.cw {
  font-family: var(--font-ui);
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  font-weight: var(--fw-semi);
  letter-spacing: -0.015em;
  color: var(--fg-1);
}
.cw-h2, h2.cw {
  font-family: var(--font-ui);
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  font-weight: var(--fw-semi);
  letter-spacing: -0.01em;
  color: var(--fg-1);
}
.cw-h3, h3.cw {
  font-family: var(--font-ui);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semi);
  color: var(--fg-1);
}
.cw-h4, h4.cw {
  font-family: var(--font-ui);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semi);
  color: var(--fg-1);
}

.cw-p     { font-size: var(--fs-base); line-height: var(--lh-body); color: var(--fg-2); }
.cw-lead  { font-size: var(--fs-md);   line-height: var(--lh-body); color: var(--fg-1); }
.cw-meta  { font-size: var(--fs-sm);   line-height: 1.4;            color: var(--fg-3); }
.cw-overline {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.cw-code, code.cw, kbd.cw {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-sunken);
  padding: 0.1em 0.4em;
  border-radius: var(--r-xs);
  color: var(--fg-1);
}
.cw-num {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
  font-weight: 500;
  letter-spacing: -0.005em;
}