/* ==========================================================================
   City Solution — Colors & Type
   Single source of truth for colors, fonts, and type scale.
   Import this CSS file into any City Solution mock or production surface.
   ========================================================================== */

/* ------------------- Web fonts ------------------- */
/* Wordmark in the City Solution logo is a friendly humanist geometric sans —
   closest free match: Nunito Sans (rounded humanist) for body / UI,
   and Manrope for display where slightly tighter geometry helps headlines. */
@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800&family=Manrope:wght@500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap");

:root {
  /* ===========================================================
     BRAND COLORS  — sampled directly from the City Solution logo
     =========================================================== */
  --cs-blue:        #0080C8;   /* primary — sampled from logo */
  --cs-blue-600:    #0070B0;   /* hover */
  --cs-blue-700:    #005F95;   /* press / deep */
  --cs-blue-400:    #2E9CD8;   /* light accent */
  --cs-blue-200:    #B8E0F0;   /* tint / chip backgrounds */
  --cs-blue-50:     #EAF5FB;   /* surface tint */

  --cs-charcoal:    #303030;   /* primary text — sampled from logo */
  --cs-charcoal-700:#1F1F1F;   /* near-black for max contrast */
  --cs-charcoal-500:#585858;
  --cs-charcoal-400:#8A8A8A;
  --cs-charcoal-300:#B5B5B5;
  --cs-charcoal-200:#D9D9D9;
  --cs-charcoal-100:#ECECEC;
  --cs-charcoal-50: #F6F6F6;

  --cs-white:       #FFFFFF;
  --cs-cream:       #FAF8F5;   /* warm neutral, useful for "human" sections */

  /* Accents — semantic only, used sparingly. Not in the core palette. */
  --cs-success:     #1F8F4E;   /* paid / reconciled */
  --cs-success-bg:  #E6F4EC;
  --cs-warn:        #C8810B;   /* due-soon / VAT reminder */
  --cs-warn-bg:     #FBF1DE;
  --cs-danger:      #C83030;   /* overdue */
  --cs-danger-bg:   #FBE8E8;
  --cs-info:        var(--cs-blue);
  --cs-info-bg:     var(--cs-blue-50);

  /* ===========================================================
     SEMANTIC TOKENS  — preferred names for product surfaces
     =========================================================== */
  --bg:             var(--cs-white);
  --bg-subtle:      var(--cs-charcoal-50);
  --bg-tint:        var(--cs-blue-50);
  --bg-inverse:     var(--cs-charcoal);

  --fg:             var(--cs-charcoal);
  --fg-muted:       var(--cs-charcoal-500);
  --fg-subtle:      var(--cs-charcoal-400);
  --fg-on-brand:    var(--cs-white);
  --fg-inverse:     var(--cs-white);

  --border:         var(--cs-charcoal-200);
  --border-strong:  var(--cs-charcoal-300);
  --border-subtle:  var(--cs-charcoal-100);

  --brand:          var(--cs-blue);
  --brand-hover:    var(--cs-blue-600);
  --brand-press:    var(--cs-blue-700);

  /* ===========================================================
     TYPE
     =========================================================== */
  --font-sans:    "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Manrope", "Nunito Sans", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Display / heading scale (1.25 modular, slightly compressed) */
  --fs-display:   clamp(40px, 5.6vw, 72px);
  --fs-h1:        clamp(32px, 4vw, 48px);
  --fs-h2:        clamp(26px, 3vw, 36px);
  --fs-h3:        22px;
  --fs-h4:        18px;
  --fs-body-lg:   18px;
  --fs-body:      16px;
  --fs-body-sm:   14px;
  --fs-caption:   12px;
  --fs-overline:  12px;

  --lh-tight:     1.1;
  --lh-snug:      1.25;
  --lh-normal:    1.5;
  --lh-loose:     1.7;

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

  --tracking-tight:    -0.02em;
  --tracking-normal:   0;
  --tracking-overline: 0.12em;

  /* ===========================================================
     RADII / SHADOWS / SPACING
     =========================================================== */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Soft, restrained shadows — no glow, no aggressive blue tint */
  --shadow-xs: 0 1px 2px rgba(48, 48, 48, 0.06);
  --shadow-sm: 0 2px 6px rgba(48, 48, 48, 0.06), 0 1px 2px rgba(48, 48, 48, 0.04);
  --shadow-md: 0 6px 18px rgba(48, 48, 48, 0.08), 0 2px 4px rgba(48, 48, 48, 0.04);
  --shadow-lg: 0 18px 40px rgba(48, 48, 48, 0.12), 0 4px 8px rgba(48, 48, 48, 0.05);
  --shadow-focus: 0 0 0 3px rgba(0, 128, 200, 0.25);

  /* Layout */
  --container: 1200px;
  --container-narrow: 880px;
}

/* ==========================================================================
   Element defaults — apply when this CSS is included as a global stylesheet.
   Skip the html/body block if you only want the variables.
   ========================================================================== */
html { font-family: var(--font-sans); color: var(--fg); background: var(--bg); }
body { font-size: var(--fs-body); line-height: var(--lh-normal); margin: 0; }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--fg); margin: 0 0 var(--space-4); letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); }
h1 { font-size: var(--fs-h1); font-weight: var(--fw-extrabold); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }

p { margin: 0 0 var(--space-4); color: var(--fg); text-wrap: pretty; }
.lede { font-size: var(--fs-body-lg); color: var(--fg-muted); line-height: var(--lh-normal); }

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-hover); text-decoration: underline; text-underline-offset: 3px; }
/* Card-style links (whole-tile clickables) shouldn't underline their text on hover */
.svc-card:hover, .post-card:hover, .brand:hover, .btn:hover { text-decoration: none; }
.svc-card:hover h3, .post-card:hover h3 { text-decoration: none; }

small, .caption { font-size: var(--fs-caption); color: var(--fg-muted); }
.overline { font-size: var(--fs-overline); font-weight: var(--fw-bold); letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--brand); }

code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; background: var(--bg-subtle); padding: 0.1em 0.35em; border-radius: var(--r-xs); }

/* Optional dark mode hook — flip semantic tokens, brand stays */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg: #141618;
    --bg-subtle: #1C1F22;
    --bg-tint: #0E2533;
    --fg: #ECECEC;
    --fg-muted: #B5B5B5;
    --fg-subtle: #8A8A8A;
    --border: #2A2E33;
    --border-subtle: #1F2226;
    --border-strong: #3A3F45;
  }
}