/* ============================================================
   CRYSTAL CLEAR WINDOWS — Foundations
   colors_and_type.css
   Single source of truth for color + type tokens.
   Fonts: Bricolage Grotesque (display) + Hanken Grotesk (text),
   loaded from Google Fonts. See README "VISUAL FOUNDATIONS".
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&family=Hanken+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* ---------------------------------------------------------
     RAW COLOR RAMPS
     --------------------------------------------------------- */

  /* Sky — primary brand blue (clear-day sky / fresh water) */
  --sky-50:  #ecf7fe;
  --sky-100: #d3edfd;
  --sky-200: #a8dbfa;
  --sky-300: #72c4f4;
  --sky-400: #3aa8ea;
  --sky-500: #138cdb;   /* primary */
  --sky-600: #0a6fb8;
  --sky-700: #0a5993;
  --sky-800: #0d4a78;
  --sky-900: #0f3e64;

  /* Ink — deep navy text + UI structure (wet glass at dusk) */
  --ink-50:  #f2f6fa;
  --ink-100: #e2e9f1;
  --ink-200: #c4d2e0;
  --ink-300: #97aec5;
  --ink-400: #6383a4;
  --ink-500: #3f6087;
  --ink-600: #2c4868;
  --ink-700: #1d3551;
  --ink-800: #122740;
  --ink-900: #0b1d31;   /* near-black navy */

  /* Frost — cool neutral greys (clean glass, soft light) */
  --frost-0:   #ffffff;
  --frost-50:  #f5f9fc;
  --frost-100: #eef4f9;
  --frost-200: #e2ecf3;
  --frost-300: #cfdde8;
  --frost-400: #aebecd;

  /* Sunshine — warm accent (sparkle, sun, star ratings). Use sparingly. */
  --sun-300: #ffdd7a;
  --sun-400: #ffcb45;
  --sun-500: #f7b500;
  --sun-600: #d99700;

  /* Semantic status hues */
  --green-100: #d9f3e4;
  --green-500: #18a05a;
  --green-600: #0f7d45;
  --amber-100: #fdeccd;
  --amber-500: #e8910b;
  --red-100:   #fbdcdc;
  --red-500:   #d83a3a;
  --red-600:   #b42a2a;

  /* ---------------------------------------------------------
     SEMANTIC COLOR TOKENS
     --------------------------------------------------------- */
  --brand:           var(--sky-500);
  --brand-strong:    var(--sky-600);
  --brand-stronger:  var(--sky-700);
  --brand-tint:      var(--sky-50);
  --brand-tint-2:    var(--sky-100);
  --accent:          var(--sun-400);
  --accent-strong:   var(--sun-500);

  /* Surfaces */
  --bg:            var(--frost-50);   /* page background */
  --bg-elevated:   var(--frost-0);    /* cards, sheets */
  --bg-sunken:     var(--frost-100);  /* wells, insets */
  --bg-brand:      var(--sky-500);    /* brand-filled sections */
  --bg-ink:        var(--ink-900);    /* dark sections / footer */

  /* Foreground / text */
  --fg1: var(--ink-900);   /* primary text + headings */
  --fg2: var(--ink-600);   /* secondary text */
  --fg3: var(--ink-400);   /* tertiary / captions / placeholder */
  --fg-on-brand:  #ffffff;
  --fg-on-ink:    var(--frost-100);
  --fg-on-ink-2:  var(--ink-300);

  /* Borders / lines */
  --line:        var(--frost-200);
  --line-strong: var(--frost-300);
  --line-brand:  var(--sky-200);
  --ring:        color-mix(in oklch, var(--sky-500) 45%, transparent);

  /* Status */
  --success: var(--green-500);
  --success-bg: var(--green-100);
  --warning: var(--amber-500);
  --warning-bg: var(--amber-100);
  --danger:  var(--red-500);
  --danger-bg: var(--red-100);
  --info:    var(--sky-500);

  /* ---------------------------------------------------------
     TYPE FAMILIES
     --------------------------------------------------------- */
  --font-display: 'Bricolage Grotesque', 'Trebuchet MS', system-ui, sans-serif;
  --font-text:    'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Weights */
  --w-regular: 400;  /* @kind font */
  --w-medium:  500;  /* @kind font */
  --w-semibold:600;  /* @kind font */
  --w-bold:    700;  /* @kind font */
  --w-display: 800;  /* @kind font */

  /* Type scale (fluid-ish, fixed px here for tokens) */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  64px;
  --text-6xl:  82px;

  --leading-tight: 1.05;
  --leading-snug:  1.2;
  --leading-normal:1.5;
  --leading-relaxed:1.65;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-eyebrow:0.14em;

  /* ---------------------------------------------------------
     SPACING (4px base)
     --------------------------------------------------------- */
  --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
     --------------------------------------------------------- */
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* ---------------------------------------------------------
     SHADOWS — soft, sky-tinted (never pure black)
     --------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(11, 41, 66, 0.06);
  --shadow-sm: 0 2px 6px -1px rgba(13, 74, 120, 0.10);
  --shadow-md: 0 8px 22px -8px rgba(13, 100, 170, 0.22);
  --shadow-lg: 0 22px 48px -16px rgba(13, 100, 170, 0.30);
  --shadow-xl: 0 36px 70px -24px rgba(13, 74, 120, 0.34);
  --shadow-brand: 0 14px 30px -10px rgba(19, 140, 219, 0.45);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.7);

  /* ---------------------------------------------------------
     MOTION
     --------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);  /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);  /* @kind other */
  --dur-fast: 130ms;  /* @kind other */
  --dur: 220ms;  /* @kind other */
  --dur-slow: 360ms;  /* @kind other */
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   Apply directly, or copy the rules into component styles.
   ============================================================ */
.cc-eyebrow {
  font-family: var(--font-text);
  font-weight: var(--w-bold);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand-strong);
}

.cc-display {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: var(--text-6xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}

.cc-h1 {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}

.cc-h2 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg1);
}

.cc-h3 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg1);
}

.cc-lead {
  font-family: var(--font-text);
  font-weight: var(--w-regular);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--fg2);
}

.cc-body {
  font-family: var(--font-text);
  font-weight: var(--w-regular);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg2);
}

.cc-small {
  font-family: var(--font-text);
  font-weight: var(--w-medium);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg3);
}

.cc-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-snug);
  color: var(--fg2);
}