/* ============================================================
   CRYOGEN DESIGN SYSTEM — Colors & Type
   --------------------------------------------------------
   Brand: Cryogen IT Consulting
   Tagline: Your partner in digital transformation
   Theme: ice, frost, depth — modern blues & indigos
   ============================================================ */

/* ---------- Webfonts ---------- */
/* Display: Space Grotesk (geometric, techy, slightly wide)
   Body:    Manrope        (clean, neutral, modern)
   Mono:    JetBrains Mono (code, technical surfaces) */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Manrope:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* ================================================
     COLOR — BRAND (sampled from logo)
     ================================================ */
  --brand-ice:        #40C8F8;   /* lighter logo cyan — frost */
  --brand-cyan:       #00B0F0;   /* deeper logo cyan — primary */
  --brand-cyan-deep:  #0093D3;   /* pressed / hover-deep   */

  /* ICE — primary scale (cool cyan-blue, brand ramp) */
  --ice-50:   #F0FAFE;
  --ice-100:  #DCF2FB;
  --ice-200:  #B9E5F7;
  --ice-300:  #7CD0F0;
  --ice-400:  #40C8F8;   /* brand-ice */
  --ice-500:  #00B0F0;   /* brand-cyan — PRIMARY */
  --ice-600:  #0093D3;
  --ice-700:  #0B6E9E;
  --ice-800:  #0A4F71;
  --ice-900:  #0B3650;
  --ice-950:  #08233A;

  /* INDIGO — secondary scale (deeper, for gradients & accents) */
  --indigo-50:  #EEF1FF;
  --indigo-100: #DEE3FF;
  --indigo-200: #C3CBFF;
  --indigo-300: #9CA6FF;
  --indigo-400: #7B7FFB;
  --indigo-500: #5B5BE5;   /* secondary */
  --indigo-600: #4A45CA;
  --indigo-700: #3D38A4;
  --indigo-800: #2E2A7A;
  --indigo-900: #1F1C55;
  --indigo-950: #131134;

  /* SLATE — cool neutrals (bluish-gray, ice-tinted) */
  --slate-0:    #FFFFFF;
  --slate-50:   #F6F8FB;
  --slate-100:  #EEF2F7;
  --slate-200:  #DEE5EE;
  --slate-300:  #C3CEDB;
  --slate-400:  #94A3B8;
  --slate-500:  #64748B;
  --slate-600:  #475569;
  --slate-700:  #334155;
  --slate-800:  #1E293B;
  --slate-900:  #0F172A;
  --slate-950:  #060B19;

  /* SEMANTIC */
  --success:    #10B981;
  --success-bg: #ECFDF5;
  --warning:    #F59E0B;
  --warning-bg: #FFFBEB;
  --danger:     #EF4444;
  --danger-bg:  #FEF2F2;
  --info:       var(--ice-500);
  --info-bg:    var(--ice-50);

  /* ================================================
     COLOR — SEMANTIC TOKENS (use these in components)
     ================================================ */
  --bg:           var(--slate-0);
  --bg-subtle:    var(--slate-50);
  --bg-muted:     var(--slate-100);
  --bg-inverse:   var(--ice-950);

  --surface:      var(--slate-0);
  --surface-alt:  var(--slate-50);
  --surface-deep: var(--ice-950);     /* deep-frost panels  */

  --fg:           var(--slate-900);    /* primary text */
  --fg-muted:     var(--slate-600);    /* secondary text */
  --fg-subtle:    var(--slate-500);    /* tertiary / meta */
  --fg-faint:     var(--slate-400);    /* placeholder */
  --fg-inverse:   var(--slate-0);
  --fg-on-brand:  var(--slate-0);

  --border:        var(--slate-200);
  --border-strong: var(--slate-300);
  --border-brand:  var(--ice-500);

  --accent:         var(--ice-500);
  --accent-hover:   var(--ice-600);
  --accent-active:  var(--ice-700);
  --accent-soft:    var(--ice-50);
  --accent-fg:      var(--slate-0);

  /* ================================================
     SIGNATURE GRADIENTS — ice & depth
     ================================================ */
  --gradient-ice:     linear-gradient(135deg, var(--ice-400)  0%, var(--ice-500) 50%, var(--indigo-500) 100%);
  --gradient-frost:   linear-gradient(180deg, var(--ice-50)   0%, var(--slate-0) 100%);
  --gradient-depth:   linear-gradient(160deg, var(--indigo-900) 0%, var(--ice-900) 60%, var(--ice-700) 100%);
  --gradient-arctic:  linear-gradient(135deg, #0EA5E9 0%, #0284C7 30%, #4F46E5 100%);
  --gradient-aurora:  radial-gradient(80% 60% at 20% 0%, rgba(64,200,248,0.25), transparent 60%),
                      radial-gradient(60% 60% at 90% 20%, rgba(91,91,229,0.25), transparent 60%),
                      linear-gradient(180deg, var(--ice-950), var(--indigo-950));

  /* ================================================
     TYPOGRAPHY
     ================================================ */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale — modular (1.25 major-third) */
  --text-xs:   0.75rem;     /* 12 */
  --text-sm:   0.875rem;    /* 14 */
  --text-base: 1rem;        /* 16 */
  --text-md:   1.125rem;    /* 18 */
  --text-lg:   1.375rem;    /* 22 */
  --text-xl:   1.75rem;     /* 28 */
  --text-2xl:  2.25rem;     /* 36 */
  --text-3xl:  3rem;        /* 48 */
  --text-4xl:  3.75rem;     /* 60 */
  --text-5xl:  4.75rem;     /* 76 */

  /* Weights */
  --w-light:    300;
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;

  /* Line heights */
  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.45;
  --lh-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tightest: -0.03em;
  --tracking-tight:    -0.015em;
  --tracking-normal:    0;
  --tracking-wide:      0.04em;
  --tracking-widest:    0.18em;   /* wordmark-style caps */

  /* ================================================
     SPACING — 4px grid
     ================================================ */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

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

  /* ================================================
     SHADOWS — soft, cool-tinted (frost not warm)
     ================================================ */
  --shadow-xs:  0 1px 2px rgba(11, 54, 80, 0.06);
  --shadow-sm:  0 2px 4px rgba(11, 54, 80, 0.06), 0 1px 2px rgba(11, 54, 80, 0.04);
  --shadow-md:  0 6px 16px -4px rgba(11, 54, 80, 0.10), 0 2px 6px rgba(11, 54, 80, 0.06);
  --shadow-lg:  0 18px 36px -12px rgba(11, 54, 80, 0.18), 0 6px 12px -6px rgba(11, 54, 80, 0.10);
  --shadow-xl:  0 32px 64px -20px rgba(11, 54, 80, 0.25), 0 12px 24px -12px rgba(11, 54, 80, 0.12);
  --shadow-glow:  0 0 0 3px rgba(0, 176, 240, 0.08);
  --shadow-ring:  0 0 0 1px rgba(11, 54, 80, 0.06), 0 1px 0 rgba(255,255,255,0.6) inset;

  /* ================================================
     MOTION
     ================================================ */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);     /* signature ease — frost settling */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-in:     cubic-bezier(0.5, 0, 0.75, 0);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;

  /* ================================================
     LAYOUT
     ================================================ */
  --container:        1200px;
  --container-narrow: 880px;
  --container-wide:   1440px;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */

html, body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: var(--text-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: var(--text-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

h4, .h4 {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
  color: var(--fg);
}

p, .p {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
  text-wrap: pretty;
}

.lead {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--text-md);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
}

.eyebrow {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--accent);
}

.meta {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--fg-subtle);
  line-height: var(--lh-normal);
}

code, .code, kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-muted);
  color: var(--fg);
  padding: 0.15em 0.4em;
  border-radius: var(--r-xs);
}

.display-xl {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: clamp(3rem, 6vw, var(--text-5xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

.wordmark {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}