/* ================================================================
   CloudColleague — Foundations
   Colors + Typography tokens for both base + semantic use.
   ================================================================ */

/* Poppins SemiBold (600) is a first-class brand weight — see assets/font-report.md.
   Inter is reserved for the dark CTA panel + dark testimonial card body.
   Outfit loads only as a Malinton-substitute for the wordmark; in the live
   Figma it appears only in hidden layers. */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Inter:wght@400;700&family=Outfit:wght@500&display=swap");

:root {
  /* -------- COLOR — Brand sky scale --------
     Derived from Figma usage. The hero/CTA blue is sky-600.
     The page lives on a sky-tinted near-white. */
  --sky-50:  #F7FAFF;   /* page bg              */
  --sky-100: #E0F2FE;   /* chips, soft pills    */
  --sky-200: #BAE6FD;   /* borders on pills     */
  --sky-300: #8DB2DC;   /* muted accent         */
  --sky-400: #38BDF8;   /* gradient stop        */
  --sky-500: #41A4F9;   /* gradient stop        */
  --sky-600: #0284C7;   /* PRIMARY brand        */
  --sky-700: #0369A1;   /* hover / heading link */
  --sky-800: #075985;
  --sky-900: #082F49;   /* deep navy panels     */
  --sky-950: #0A3057;   /* footer wash          */

  /* Cyan/cloud highlight used in radial gradients */
  --cloud-tint: rgba(110, 200, 255, 0.22);
  --cloud-tint-soft: rgba(17, 183, 244, 0.06);

  /* -------- COLOR — Neutral / text scale -------- */
  --neutral-0:   #FFFFFF;
  --neutral-25:  #FCFCFD;
  --neutral-50:  #F9FAFB;
  --neutral-100: #F2F4F7;
  --neutral-200: #EAECF0;
  --neutral-300: #D0D5DD;
  --neutral-400: #98A2B3;
  --neutral-500: #667085;   /* secondary body  */
  --neutral-600: #475467;   /* body            */
  --neutral-700: #344054;   /* strong body     */
  --neutral-800: #1D2939;   /* heading default */
  --neutral-900: #101828;   /* heading bold    */
  --neutral-950: #0B2A52;   /* navy heading    */

  /* -------- COLOR — Semantic accents -------- */
  --accent-yellow: #FFB638;     /* star ratings, highlights      */
  --accent-yellow-soft: #FFD27A;
  --accent-green: #0D992F;      /* success / verified            */
  --accent-green-soft: #E4FFD9;
  --accent-amber: #E6A402;      /* warning, badges               */
  --danger: #D92D20;

  /* -------- COLOR — Semantic tokens -------- */
  --bg-page:        var(--sky-50);
  --bg-surface:     var(--neutral-0);
  --bg-surface-2:   #F8FAFC;
  --bg-panel-dark:  var(--sky-900);
  --bg-chip:        var(--sky-100);

  --fg-primary:     var(--neutral-900);
  --fg-heading:     var(--neutral-800);
  --fg-heading-navy:var(--neutral-950);
  --fg-body:        var(--neutral-600);
  --fg-muted:       var(--neutral-500);
  --fg-on-brand:    var(--neutral-0);
  --fg-on-dark-50:  rgba(255,255,255,0.6);
  --fg-on-dark-75:  rgba(255,255,255,0.75);

  --border-default: var(--neutral-300);
  --border-soft:    var(--neutral-200);
  --border-sky:     var(--sky-200);
  --border-brand-10: rgba(11, 85, 214, 0.1);

  --brand:          var(--sky-600);
  --brand-hover:    var(--sky-700);
  --brand-on:       var(--neutral-0);

  /* -------- COLOR — Signature gradients -------- */
  --grad-hero: linear-gradient(180deg, #62C0FE 0%, #41A4F9 100%);
  --grad-cta-button: linear-gradient(180deg, #57C3FF 0%, #2B8FF2 100%);
  --grad-page-cloud:
    radial-gradient(60% 50% at 15% 10%, rgba(17,183,244,0.06) 0%, rgba(17,183,244,0) 63%),
    radial-gradient(50% 40% at 85% 0%, rgba(110,200,255,0.22) 0%, rgba(110,200,255,0) 60%);
  --grad-cta-dark:
    radial-gradient(60% 60% at 10% 0%, rgba(8,183,225,0.45) 0%, rgba(17,100,244,0) 60%),
    radial-gradient(50% 50% at 90% 100%, rgba(110,200,255,0.25) 0%, rgba(110,200,255,0) 60%),
    var(--sky-900);

  /* -------- ELEVATION — shadows -------- */
  --shadow-xs:  0 1px 2px 0 rgba(16,24,40,0.05);
  --shadow-sm:  0 1px 3px 0 rgba(16,24,40,0.10), 0 1px 2px 0 rgba(16,24,40,0.06);
  --shadow-md:  0 4px 8px -2px rgba(16,24,40,0.10), 0 2px 4px -2px rgba(16,24,40,0.06);
  --shadow-lg:  0 12px 16px -4px rgba(16,24,40,0.08), 0 4px 6px -2px rgba(16,24,40,0.03);
  --shadow-xl:  0 20px 24px -4px rgba(16,24,40,0.08), 0 8px 8px -4px rgba(16,24,40,0.03);
  --shadow-2xl: 0 24px 48px -12px rgba(16,24,40,0.18);
  --shadow-soft-card: 32px 32px 64px 0 rgba(52,64,84,0.08);   /* signature card glow */
  --shadow-nav:  0 4px 154px 0 rgba(0,0,0,0.10);              /* floating nav blur */
  --shadow-cta-glow: 0 12px 26px -12px rgba(17,100,244,0.55),
                     inset 0 1px 0 1px rgba(255,255,255,0.18);

  /* -------- RADIUS -------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-4xl: 44px;
  --radius-pill: 999px;

  /* -------- SPACING — 4-unit base scale -------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-11: 44px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-30: 120px;

  /* -------- TYPE — Families -------- */
  --font-sans:    "Poppins", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-quote:   "Inter", "Poppins", sans-serif;       /* used in dark testimonial / CTAs */
  --font-display: "Outfit", "Poppins", sans-serif;       /* light-weight display alt */
  --font-brand:   "Outfit", "Poppins", sans-serif;
  /* NOTE: brand wordmark in the Figma is "Malinton Trial Version" — a private
     trial font we cannot ship. Outfit Medium @ 20px / -2% tracking is the
     closest free substitute. Flagged in README. */

  /* -------- TYPE — Base scale (px / line-height) -------- */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  36px;
  --text-5xl:  44px;
  --text-6xl:  48px;
  --text-7xl:  64px;

  /* Tracking */
  --tracking-tight: -0.02em;       /* H1–H3 */
  --tracking-snug:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:  0.02em;

  /* Line-heights */
  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-base:  1.5;
  --lh-relaxed: 1.6;
}

/* ================================================================
   SEMANTIC TYPOGRAPHY — apply directly to tags or via class
   ================================================================ */
html, body { font-family: var(--font-sans); color: var(--fg-primary); background: var(--bg-page); }

.cc-hero,
h1.cc-h1 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-7xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--sky-900);
}

h1, .cc-h1-bold {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-6xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--neutral-800);
}

h2, .cc-h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-4xl);
  line-height: 44px;
  letter-spacing: var(--tracking-tight);
  color: var(--neutral-900);
}

h3, .cc-h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-3xl);
  line-height: 38px;
  letter-spacing: var(--tracking-snug);
  color: var(--neutral-800);
}

h4, .cc-h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: 30px;
  color: var(--neutral-800);
}

h5, .cc-h5 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: 28px;
  color: var(--neutral-800);
}

/* Body copy */
p, .cc-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-md);
  line-height: 24px;
  color: var(--fg-body);
}

.cc-body-lg {
  font-size: var(--text-lg);
  line-height: 28px;
}

.cc-body-xl {
  font-size: var(--text-xl);
  line-height: 30px;
}

.cc-eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-sm);
  line-height: 20px;
  letter-spacing: var(--tracking-wide);
  color: var(--sky-700);
  text-transform: uppercase;
}

.cc-caption {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: 18px;
  color: var(--neutral-300);
}

/* Link */
.cc-link {
  color: var(--sky-600);
  font-weight: 500;
  text-decoration: none;
}
.cc-link:hover { color: var(--sky-700); text-decoration: underline; }

/* Brand wordmark */
.cc-wordmark {
  font-family: var(--font-brand);
  font-weight: 500;
  font-size: 20px;
  line-height: 100%;
  letter-spacing: -0.01em;
  color: var(--sky-600);
}