/* ============================================================
   Cinc City — Colors & Type
   Modern · Urban · Engineered · Premium · Architectural
   ============================================================ */

/* Webfonts:
   Display & Body / UI: Manrope (local variable font — official brand typeface)
   Mono: JetBrains Mono (Google Fonts — technical accents, specs, dimensions) */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');

@font-face {
  font-family: 'Manrope';
  src: url('fonts/Manrope-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/Manrope-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ─── Charcoal ladder (primary brand color) ───────────────── */
  --cc-ink:          #14191D; /* deepest — primary headings, inverse surface */
  --cc-slate:        #2E353B; /* logo color — primary text */
  --cc-slate-soft:   #4A535B; /* secondary text */
  --cc-steel:        #6E7378; /* mid neutral, captions */
  --cc-graphite:     #8E9296; /* tertiary text */
  --cc-fog:          #BCC0C4; /* dividers (strong), disabled */
  --cc-mist:         #E2E5E8; /* hairline borders — neutral */
  --cc-cloud:        #ECEDEE; /* deeper sunken / strong section break */

  /* ─── Neutral surfaces (white-dominant) ─────────────────────── */
  --cc-white:        #FFFFFF; /* default page background */
  --cc-snow:         #FAFAFA; /* raised card surface */
  --cc-frost:        #F4F4F5; /* sunken band / alternate section */
  --cc-ice:          #FFFFFF; /* legacy alias — same as white */

  /* ─── Accent (restrained, neutral-leaning) ──────────────────── */
  --cc-graphite-accent: #1F252A; /* deep neutral accent — primary on light */
  --cc-rebar:        #B85226; /* rust accent, used sparingly */
  --cc-sage:         #5F8A6E; /* sustainability tag */

  /* Legacy steel-blue retained for old preview cards; not used in site/ */
  --cc-steel-blue:   #1F252A;
  --cc-steel-blue-deep: #14191D;
  --cc-steel-blue-soft: #E2E5E8;
  --cc-blueprint:    #1F252A;

  /* ─── Semantic ────────────────────────────────────────────── */
  --cc-success:      #2F7D4F;
  --cc-success-bg:   #E4F1E9;
  --cc-warning:      #B57100;
  --cc-warning-bg:   #F8E9CC;
  --cc-danger:       #B33A2A;
  --cc-danger-bg:    #F7DDD7;
  --cc-info:         #1F252A;
  --cc-info-bg:      #ECEDEE;

  /* Legacy aliases — older preview cards still reference these */
  --cc-slate-ink:    var(--cc-ink);
  --cc-bone:         var(--cc-ice);
  --cc-paper:        var(--cc-frost);
  --cc-concrete:     var(--cc-cloud);
  --cc-rebar-soft:   #F2BFA8;
  --cc-blueprint-soft: var(--cc-steel-blue-soft);
  --cc-survey:       var(--cc-sage);

  /* ─── Foreground / background tokens ─────────────────────── */
  --fg-1:            var(--cc-ink);         /* primary text, headings */
  --fg-2:            var(--cc-slate);       /* body */
  --fg-3:            var(--cc-slate-soft);  /* secondary */
  --fg-muted:        var(--cc-steel);       /* captions */
  --fg-on-dark:      var(--cc-snow);
  --fg-accent:       var(--cc-ink);

  --bg-page:         var(--cc-white);
  --bg-surface:      var(--cc-snow);
  --bg-raised:       var(--cc-white);
  --bg-sunken:       var(--cc-frost);
  --bg-inverse:      var(--cc-ink);

  --border-hair:     var(--cc-mist);
  --border-strong:   var(--cc-fog);
  --border-ink:      var(--cc-slate);

  /* ─── Type families ───────────────────────────────────────── */
  --font-display:    'Manrope', 'Helvetica Neue', system-ui, sans-serif;
  --font-body:       'Manrope', system-ui, -apple-system, sans-serif;
  --font-mono:       'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ─── Type scale ──────────────────────────────────────────── */
  --fs-display-2xl: 112px;
  --fs-display-xl:  88px;
  --fs-display-lg:  64px;
  --fs-h1:          48px;
  --fs-h2:          36px;
  --fs-h3:          24px;
  --fs-h4:          20px;
  --fs-body-lg:     18px;
  --fs-body:        16px;
  --fs-body-sm:     14px;
  --fs-caption:     12px;
  --fs-overline:    11px;

  --lh-tight:       1.02; /* @kind font */
  --lh-snug:        1.18; /* @kind font */
  --lh-normal:      1.45; /* @kind font */
  --lh-relaxed:     1.6; /* @kind font */

  --ls-display:     -0.035em;  /* tight tracking for oversized headlines */
  --ls-tight:       -0.015em;
  --ls-normal:      0; /* @kind font */
  --ls-overline:    0.18em;    /* wide-tracked uppercase eyebrows */

  /* ─── Spacing (4px base) ──────────────────────────────────── */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   24px;
  --sp-6:   32px;
  --sp-7:   48px;
  --sp-8:   64px;
  --sp-9:   96px;
  --sp-10:  128px;
  --sp-11:  160px;

  /* ─── Radii (sharp by default — engineered aesthetic) ─────── */
  --r-0:    0; /* @kind radius */
  --r-1:    2px;
  --r-2:    4px;     /* default */
  --r-3:    8px;     /* cards */
  --r-4:    12px;
  --r-full: 999px;

  /* ─── Shadows (subtle, architectural) ─────────────────────── */
  --sh-0:   none; /* @kind shadow */
  --sh-1:   0 1px 2px rgba(20, 25, 29, 0.05), 0 1px 1px rgba(20, 25, 29, 0.03);
  --sh-2:   0 2px 6px rgba(20, 25, 29, 0.05), 0 4px 14px rgba(20, 25, 29, 0.045);
  --sh-3:   0 8px 24px rgba(20, 25, 29, 0.07), 0 2px 6px rgba(20, 25, 29, 0.04);
  --sh-4:   0 24px 56px rgba(20, 25, 29, 0.12), 0 4px 12px rgba(20, 25, 29, 0.06);
  --sh-inset-line: inset 0 0 0 1px rgba(20, 25, 29, 0.07);

  /* ─── Motion ──────────────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.2, 0.8, 0.2, 1); /* @kind other */
  --ease-in:    cubic-bezier(0.4, 0, 1, 1); /* @kind other */
  --ease-in-out:cubic-bezier(0.45, 0, 0.2, 1); /* @kind other */
  --dur-1:  120ms; /* @kind other */
  --dur-2:  220ms; /* @kind other */
  --dur-3:  360ms; /* @kind other */
  --dur-4:  600ms; /* @kind other */

  /* ─── Layout ──────────────────────────────────────────────── */
  --container-max:  1320px;
  --container-pad:  clamp(20px, 4vw, 64px);
}

/* ============================================================
   Semantic role classes — drop on any element
   ============================================================ */

.cc-display-2xl, .cc-display-xl, .cc-display-lg,
.cc-h1, .cc-h2, .cc-h3, .cc-h4 {
  font-family: var(--font-display);
  color: var(--fg-1);
  font-weight: 700;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  margin: 0;
  text-wrap: balance;
}

.cc-display-2xl { font-size: var(--fs-display-2xl); font-weight: 700; }
.cc-display-xl  { font-size: var(--fs-display-xl);  font-weight: 700; }
.cc-display-lg  { font-size: var(--fs-display-lg);  font-weight: 600; }
.cc-h1          { font-size: var(--fs-h1);  font-weight: 600; line-height: var(--lh-snug); letter-spacing: var(--ls-tight); }
.cc-h2          { font-size: var(--fs-h2);  font-weight: 600; line-height: var(--lh-snug); letter-spacing: var(--ls-tight); }
.cc-h3          { font-size: var(--fs-h3);  font-weight: 500; line-height: var(--lh-snug); letter-spacing: var(--ls-tight); }
.cc-h4          { font-size: var(--fs-h4);  font-weight: 500; line-height: var(--lh-snug); letter-spacing: var(--ls-tight); }

.cc-lead {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  font-weight: 400;
  text-wrap: pretty;
}

.cc-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  font-weight: 400;
}

.cc-body-sm {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.cc-caption {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

.cc-overline {
  font-family: var(--font-body);
  font-size: var(--fs-overline);
  font-weight: 700;
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.cc-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: 0;
}

.cc-mono-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.04em;
  color: var(--fg-3);
  text-transform: uppercase;
}

.cc-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--cc-fog);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--dur-2) var(--ease-out);
}
.cc-link:hover { text-decoration-color: var(--cc-steel-blue); }