/* ==========================================================================
   CarbonWeb — Colors & Type
   Source of truth: Carbon Web Design System Figma
   ========================================================================== */

/* Raleway is the primary brand face (used across all headings and body).
   Self-hosted variable fonts — see /fonts. */
@font-face {
  font-family: 'Raleway';
  src:
    url('fonts/Raleway-VariableFont_wght.ttf') format('truetype-variations'),
    url('fonts/Raleway-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Raleway';
  src:
    url('fonts/Raleway-Italic-VariableFont_wght.ttf') format('truetype-variations'),
    url('fonts/Raleway-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Montserrat — big stat numbers. Roboto Mono — code/labels.
   Loaded from Google Fonts (correct families, not substitutes) until
   self-hosted files are added to /fonts. */
@font-face {
  font-family: 'Montserrat';
  src: url('https://fonts.gstatic.com/s/montserrat/v29/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2')
    format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto Mono';
  src: url('https://fonts.gstatic.com/s/robotomono/v23/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vq_ROW4.woff2')
    format('woff2');
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- BRAND -------------------------------------------------------------- */
  --cw-teal: rgb(0, 176, 194); /* #00B0C2 — primary brand */
  --cw-teal-dark: rgb(0, 130, 143); /* #00828F — hover/press   */
  --cw-teal-18: rgba(0, 176, 194, 0.18); /* soft panels / sections */
  --cw-teal-soft: rgb(201, 250, 255); /* highlight tints         */
  --cw-green: rgb(105, 215, 87); /* #69D757 — gradient tail */
  --cw-green-soft: rgb(178, 255, 165);
  --cw-gradient-brand: linear-gradient(135deg, var(--cw-teal) 0%, var(--cw-green) 100%);

  /* --- NEUTRALS (greys run blue-cool) ------------------------------------- */
  --cw-black: rgb(0, 0, 0);
  --cw-ink: rgb(50, 48, 49); /* logo grey, near-black    */
  --cw-ink-2: rgb(51, 51, 51); /* headings on white        */
  --cw-ink-3: rgb(46, 46, 46); /* display text             */
  --cw-fg-1: rgb(51, 51, 51); /* primary text             */
  --cw-fg-2: rgb(104, 106, 134); /* body / secondary text    */
  --cw-fg-3: rgb(103, 104, 121);
  --cw-fg-4: rgb(150, 153, 166); /* tertiary / meta          */
  --cw-fg-5: rgb(163, 165, 181);

  --cw-bg-0: rgb(255, 255, 255); /* canvas                   */
  --cw-bg-1: rgb(246, 247, 251); /* section bg               */
  --cw-bg-2: rgb(245, 247, 251);
  --cw-bg-3: rgb(227, 229, 239); /* hairline fills           */
  --cw-bg-dark: rgb(46, 46, 57); /* dark footer bg           */

  --cw-border-1: rgb(225, 231, 240); /* card / nav border        */
  --cw-border-2: rgb(220, 223, 236);
  --cw-border-3: rgb(197, 199, 208);

  /* --- SEMANTIC / STATUS (carried from monday.com swatches used) --------- */
  --cw-success: rgb(0, 200, 117);
  --cw-success-dark: rgb(17, 104, 70);
  --cw-warning: rgb(253, 171, 61);
  --cw-info: rgb(0, 115, 234);
  --cw-info-2: rgb(87, 155, 252);
  --cw-accent-yellow: rgb(255, 203, 0);
  --cw-accent-pink: rgb(246, 43, 84); /* cover artwork only       */

  /* --- TYPOGRAPHY --------------------------------------------------------- */
  --cw-font-sans: 'Raleway', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  /* RULE: numbers are set in Montserrat, never Raleway. Use --cw-font-num
     (or the .cw-num utility) for any numeric display — stats, metrics,
     prices, counters, data figures. Raleway stays for words. */
  --cw-font-num: 'Montserrat', system-ui, sans-serif; /* numbers — Montserrat, not Raleway */
  --cw-font-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale — Raleway 700 for display/headings, 400 for body */
  --cw-display-size: 60px; /* hero display            */
  --cw-h1-size: 56px; /* page hero               */
  --cw-h2-size: 44px;
  --cw-h3-size: 36px;
  --cw-h4-size: 28px;
  --cw-h5-size: 24px;
  --cw-h6-size: 20px;
  --cw-title-size: 16px; /* H5 Title 16px (monday) */
  --cw-body-lg: 20px; /* P2 lead body           */
  --cw-body: 16px; /* P3 body                */
  --cw-body-sm: 14px; /* P4                     */
  --cw-caption: 12px; /* P5                     */
  --cw-micro: 10px;

  --cw-lh-tight: 1.15; /* @kind other */
  --cw-lh-heading: 1.3; /* @kind other */
  --cw-lh-body: 1.5; /* @kind other */
  --cw-lh-loose: 1.7; /* @kind other */

  /* --- SHAPE / ELEVATION ------------------------------------------------- */
  --cw-radius-pill: 100px; /* CTA buttons are fully rounded */
  --cw-radius-lg: 16px;
  --cw-radius-md: 12px; /* cards / banner panels */
  --cw-radius-sm: 7px; /* small cards (monday board card uses 7) */
  --cw-radius-xs: 4px;

  --cw-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04);
  --cw-shadow-sm: 0 1.5px 7.7px rgba(104, 106, 134, 0.3);
  --cw-shadow-md: 0 5px 8px -2px rgba(16, 24, 40, 0.03), 0 16px 21px -5px rgba(16, 24, 40, 0.08);
  --cw-shadow-lg: 0 20px 40px -10px rgba(16, 24, 40, 0.1);
  --cw-ring-focus: 0 0 0 3px rgba(0, 176, 194, 0.35);

  /* --- SPACING (8pt grid) ----------------------------------------------- */
  --cw-s-1: 4px;
  --cw-s-2: 8px;
  --cw-s-3: 12px;
  --cw-s-4: 16px;
  --cw-s-5: 24px;
  --cw-s-6: 32px;
  --cw-s-7: 48px;
  --cw-s-8: 64px;
  --cw-s-9: 82px; /* footer vertical rhythm */
  --cw-s-10: 120px; /* between-section        */

  /* --- LAYOUT ------------------------------------------------------------ */
  --cw-container: 1140px; /* footer content width */
  --cw-container-l: 1290px; /* generous marketing   */
  --cw-gutter: 150px; /* side padding @ 1440  */
  /* Authoring height of the header bar; the 0.9 zoom in Header.astro renders
     it at 76.5px / 57.6px, and monday.css compensates with those rendered
     values so .screen keeps filling the viewport. */
  --cw-nav-height: 85px;

  /* --- MOTION ------------------------------------------------------------ */
  --cw-ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --cw-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --cw-dur-fast: 120ms; /* @kind other */
  --cw-dur: 200ms; /* @kind other */
  --cw-dur-slow: 320ms; /* @kind other */
}

/* --- Base + semantic element styles ------------------------------------- */
html,
body {
  font-family: var(--cw-font-sans);
  color: var(--cw-fg-1);
  background: var(--cw-bg-0);
  -webkit-font-smoothing: antialiased;
}

h1,
.cw-h1 {
  font: 700 var(--cw-h1-size)/var(--cw-lh-heading) var(--cw-font-sans);
  color: var(--cw-ink-2);
  letter-spacing: -0.01em;
}
h2,
.cw-h2 {
  font: 700 var(--cw-h2-size)/var(--cw-lh-heading) var(--cw-font-sans);
  color: var(--cw-ink-2);
  letter-spacing: -0.01em;
}
h3,
.cw-h3 {
  font: 700 var(--cw-h3-size)/var(--cw-lh-heading) var(--cw-font-sans);
  color: var(--cw-ink-2);
}
h4,
.cw-h4 {
  font: 700 var(--cw-h4-size)/var(--cw-lh-heading) var(--cw-font-sans);
  color: var(--cw-ink-2);
}
h5,
.cw-h5 {
  font: 700 var(--cw-h5-size)/var(--cw-lh-heading) var(--cw-font-sans);
  color: var(--cw-ink-2);
}
h6,
.cw-h6 {
  font: 700 var(--cw-h6-size)/var(--cw-lh-heading) var(--cw-font-sans);
  color: var(--cw-ink-2);
}

.cw-display {
  font: 800 var(--cw-display-size)/var(--cw-lh-tight) var(--cw-font-sans);
  letter-spacing: -0.02em;
  color: var(--cw-ink-3);
}
.cw-eyebrow {
  font: 700 var(--cw-body-sm)/1.2 var(--cw-font-sans);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--cw-teal);
}
.cw-lead {
  font: 400 var(--cw-body-lg)/var(--cw-lh-loose) var(--cw-font-sans);
  color: var(--cw-fg-2);
}
p,
.cw-p {
  font: 400 var(--cw-body)/var(--cw-lh-loose) var(--cw-font-sans);
  color: var(--cw-fg-2);
}
.cw-p-sm {
  font: 400 var(--cw-body-sm)/var(--cw-lh-body) var(--cw-font-sans);
  color: var(--cw-fg-2);
}
.cw-caption {
  font: 500 var(--cw-caption)/1.4 var(--cw-font-sans);
  color: var(--cw-fg-4);
}
code,
.cw-code {
  font: 400 var(--cw-body-sm)/1.5 var(--cw-font-mono);
  color: var(--cw-ink-2);
  background: var(--cw-bg-1);
  padding: 1px 6px;
  border-radius: 4px;
}

/* Numbers use Montserrat, not Raleway. Apply to stats, metrics, prices,
   counters, and any numeric figure. font-feature-settings keeps tabular,
   lining figures so numbers align in columns. */
.cw-num {
  font-family: var(--cw-font-num);
  font-feature-settings:
    'tnum' 1,
    'lnum' 1;
}

a {
  color: var(--cw-teal);
  text-decoration: none;
}
a:hover {
  color: var(--cw-teal-dark);
}