/* ============================================================
   Wascer — Colors & Type
   Single source of truth for every Wascer surface (app, marketing).
   Copy-pasted from the production tailwind theme + globals.css and
   re-grouped for designers (raw tokens → semantic tokens → text
   styles). Safe for use in any HTML artefact.

   Values are kept in HEX wherever the brand uses HEX, and in
   HSL-channels where the production app reads `hsl(var(--token))`.
   ============================================================ */

/* -----------------------------------
   Fonts
   ----------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&family=Merriweather:wght@400;700;900&display=swap');

:root {
  /* ----- Brand ----- */
  --wascer-navy:        #0b1b2e;   /* logo mark, primary on light */
  --wascer-navy-2:      #122b52;   /* gradient companion */
  --wascer-blue:        #2d6cdf;   /* interactive / focus / link */
  --wascer-blue-soft:   #e6eefb;   /* tinted accent surface */
  --wascer-cyan:        #38bdf8;   /* highlight (sparingly) */
  --brand-gradient:     linear-gradient(180deg, #122b52 0%, #0a1f3d 100%);

  /* ----- Neutrals (warm slate, not pure gray) ----- */
  --gray-0:   #ffffff;
  --gray-50:  #f7f8fa;
  --gray-100: #f0f2f6;
  --gray-150: #eef1f6;
  --gray-200: #e2e5eb;
  --gray-300: #c9cfd9;
  --gray-400: #9aa3b2;
  --gray-500: #5b6779;
  --gray-600: #3b4658;
  --gray-700: #1f2a3c;
  --gray-800: #0e1a29;
  --gray-900: #0a1422;

  /* ----- Semantic — light theme ----- */
  --background:           var(--gray-50);
  --foreground:           var(--gray-800);
  --card:                 var(--gray-0);
  --card-foreground:      var(--gray-800);
  --popover:              var(--gray-0);
  --popover-foreground:   var(--gray-800);

  --primary:              var(--wascer-navy);
  --primary-foreground:   var(--gray-0);
  --secondary:            var(--gray-150);
  --secondary-foreground: var(--gray-800);
  --muted:                var(--gray-100);
  --muted-foreground:     var(--gray-500);
  --accent:               var(--wascer-blue-soft);
  --accent-foreground:    var(--wascer-blue);

  --border:               var(--gray-200);
  --input:                var(--gray-200);
  --ring:                 var(--wascer-blue);

  /* ----- Status / semantic feedback ----- */
  --success:           #16a34a;
  --success-soft:      #dcfce7;
  --success-foreground:#ffffff;
  --warning:           #d97706;
  --warning-soft:      #fef3c7;
  --warning-foreground:#78350f;
  --destructive:       #d14343;
  --destructive-soft:  #fee2e2;
  --destructive-foreground:#ffffff;
  --info:              var(--wascer-blue);
  --info-soft:         #dbeafe;

  /* Container/server lifecycle (used in the Wascer table) */
  --status-active:        #10b981;
  --status-active-soft:   #d1fae5;
  --status-warning:       #f59e0b;
  --status-warning-soft:  #fef3c7;
  --status-critical:      #d14343;
  --status-critical-soft: #fee2e2;
  --status-inactive:      #6b7280;
  --status-inactive-soft: #f3f4f6;
  --status-provisioning:      #2d6cdf;
  --status-provisioning-soft: #dbeafe;

  /* ----- Charts ----- */
  --chart-1: #2d6cdf;
  --chart-2: #4f8af0;
  --chart-3: #122b52;
  --chart-4: #1f3050;
  --chart-5: #0b1b2e;

  /* ----- Sidebar (themed) ----- */
  --sidebar:                    #ffffff;
  --sidebar-foreground:         #1a2438;
  --sidebar-primary:            var(--wascer-blue);
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent:             var(--gray-150);
  --sidebar-accent-foreground:  var(--gray-800);
  --sidebar-active:             var(--wascer-blue-soft);
  --sidebar-active-foreground:  var(--wascer-blue);
  --sidebar-muted:              #6b7e9c;
  --sidebar-border:             var(--gray-200);
  --sidebar-ring:               var(--wascer-blue);

  /* ----- Type ----- */
  --font-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-serif: 'Merriweather', Georgia, serif;

  --tracking-tight:   -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;

  /* ----- Geometry ----- */
  --radius:    0.5rem;       /* base — buttons, inputs */
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl:1rem;
  --radius-pill: 9999px;

  /* Spacing scale (Tailwind-aligned, 0.25rem step) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10:2.5rem;
  --space-12:3rem;
  --space-16:4rem;

  /* Shadows — quiet, single-direction */
  --shadow-2xs: 0 4px  8px -1px hsl(0 0% 0% / 0.05);
  --shadow-xs:  0 4px  8px -1px hsl(0 0% 0% / 0.05);
  --shadow-sm:  0 4px  8px -1px hsl(0 0% 0% / 0.10), 0 1px 2px -2px hsl(0 0% 0% / 0.10);
  --shadow:     0 4px  8px -1px hsl(0 0% 0% / 0.10), 0 1px 2px -2px hsl(0 0% 0% / 0.10);
  --shadow-md:  0 4px  8px -1px hsl(0 0% 0% / 0.10), 0 2px 4px -2px hsl(0 0% 0% / 0.10);
  --shadow-lg:  0 4px  8px -1px hsl(0 0% 0% / 0.10), 0 4px 6px -2px hsl(0 0% 0% / 0.10);
  --shadow-xl:  0 4px  8px -1px hsl(0 0% 0% / 0.10), 0 8px 10px -2px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0 4px  8px -1px hsl(0 0% 0% / 0.25);
  --shadow-ring: 0 0 0 3px rgb(45 108 223 / 0.18);
}

.dark {
  --background:         var(--gray-900);
  --foreground:         #e6ecf5;
  --card:               #0f1e33;
  --card-foreground:    #e6ecf5;
  --popover:            #0f1e33;
  --popover-foreground: #e6ecf5;
  --primary:            #ffffff;
  --primary-foreground: var(--wascer-navy);
  --secondary:          #1b2c47;
  --secondary-foreground:#e6ecf5;
  --muted:              #14233b;
  --muted-foreground:   #8da2bf;
  --accent:             #1f3050;
  --accent-foreground:  #93b5f5;
  --border:             #1f3050;
  --input:              #1f3050;
  --ring:               var(--wascer-blue);

  --sidebar:                   #0e1a2c;
  --sidebar-foreground:        #e6ecf5;
  --sidebar-accent:            #1a2c4a;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-active:            #1a2c4a;
  --sidebar-active-foreground: #ffffff;
  --sidebar-border:            #1f3050;
}

/* -----------------------------------
   Text styles  (semantic typography)
   Apply as class names; numbers come from the production app
   plus the marketing site's display rules.
   ----------------------------------- */
.t-display {              /* hero — marketing only */
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
}
.t-h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.875rem;     /* 30 */
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
}
.t-h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.5rem;       /* 24 */
  line-height: 1.2;
}
.t-h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.125rem;     /* 18 */
  line-height: 1.3;
}
.t-card-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.875rem;     /* 14, leading-none, used by Card */
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}
.t-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.9375rem;    /* 15 */
  line-height: 1.55;
}
.t-body-sm {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.8125rem;    /* 13 */
  line-height: 1.5;
}
.t-caption {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.75rem;      /* 12 */
  line-height: 1.35;
  color: var(--muted-foreground);
}
.t-eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.6875rem;    /* 11 */
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-foreground);
}
.t-mono,
.t-code {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0;
}
.t-button {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.875rem;     /* shadcn button default */
  letter-spacing: 0;
}

/* -----------------------------------
   Utility singletons used across cards
   ----------------------------------- */
.wascer-card {
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.wascer-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
}