/* =============================================================================
   SWEGON TAC — CUSTOM STYLE OVERRIDES
   -----------------------------------------------------------------------------
   This file lets the Swegon brand team customize the look & feel of the
   TAC Knowledge Base WITHOUT touching the application source code.

   HOW IT WORKS
   - The site uses HSL design tokens (CSS variables).
   - Override any variable below by changing its value.
   - Colors MUST stay in HSL format: "H S% L%"  (no "hsl(...)" wrapper).
   - Save the file and send it back — we'll drop it into /public/ and it will
     be loaded automatically by index.html.

   TIP: Use an online HEX→HSL converter, then paste only the 3 numbers.
   Example:  #00794D  →  163 100% 24%
   ========================================================================== */

:root {
  /* ---------- BRAND COLORS ---------- */
  /* Primary brand color (Swegon green). Used for buttons, links, highlights. */
  --primary: 163 100% 24%;
  --primary-foreground: 0 0% 100%;

  /* Secondary / soft brand tint (backgrounds, hover states) */
  --secondary: 160 30% 96%;
  --secondary-foreground: 163 100% 24%;

  /* Accent color (sidebar active state, subtle highlights) */
  --accent: 163 60% 94%;
  --accent-foreground: 163 100% 20%;

  /* Focus ring color (keyboard navigation outline) */
  --ring: 163 100% 24%;

  /* ---------- PAGE SURFACES ---------- */
  /* Main page background and default text color */
  --background: 0 0% 100%;
  --foreground: 210 11% 15%;

  /* Card / panel background */
  --card: 0 0% 100%;
  --card-foreground: 210 11% 15%;

  /* Muted backgrounds (subtle sections, disabled states) */
  --muted: 210 20% 96%;
  --muted-foreground: 210 11% 45%;

  /* Borders & input outlines */
  --border: 214 20% 90%;
  --input: 214 20% 90%;

  /* ---------- ALARM / STATUS COLORS ---------- */
  /* Priority A — Severe (red) */
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;

  /* Priority B — Warning (amber/yellow) */
  --warning: 45 93% 47%;
  --warning-foreground: 0 0% 100%;

  /* Priority i — Info (blue) */
  --info: 207 90% 54%;
  --info-foreground: 0 0% 100%;

  /* ---------- SIDEBAR (left navigation) ---------- */
  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 210 11% 30%;
  --sidebar-primary: 163 100% 24%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 163 40% 95%;
  --sidebar-accent-foreground: 163 100% 20%;
  --sidebar-border: 214 20% 90%;

  /* ---------- SHAPE ---------- */
  /* Global border-radius (0 = sharp, 0.5rem = default, 1rem = very rounded) */
  --radius: 0.5rem;
}

/* ---------- DARK MODE OVERRIDES ----------
   Only edit if you want to customize the dark theme too. */
.dark {
  --primary: 163 80% 40%;
  --primary-foreground: 0 0% 100%;
  --background: 210 11% 10%;
  --foreground: 210 20% 96%;
  --card: 210 11% 13%;
  --card-foreground: 210 20% 96%;
  --border: 210 11% 20%;
  --sidebar-background: 210 11% 12%;
  --sidebar-primary: 163 80% 40%;
  --sidebar-accent: 163 30% 18%;
}

/* =============================================================================
   TYPOGRAPHY
   -----------------------------------------------------------------------------
   Change the font family used across the whole site.
   To use a Google Font, uncomment the @import line and update the family name.
   ========================================================================== */

/* @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap'); */

/*
body {
  font-family: 'Roboto', system-ui, sans-serif !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Roboto', system-ui, sans-serif !important;
  letter-spacing: -0.01em;
}
*/

/* =============================================================================
   FREE-FORM CUSTOM RULES
   -----------------------------------------------------------------------------
   Add any extra CSS below. Examples are commented out — uncomment to enable.
   ========================================================================== */

/* Example: make the top header taller */
/*
header {
  height: 5rem !important;
}
*/

/* Example: add a subtle shadow under the header */
/*
header {
  box-shadow: 0 2px 8px hsl(0 0% 0% / 0.06);
}
*/

/* Example: change the hover color of navigation links */
/*
.swegon-nav-link:hover {
  color: hsl(var(--primary)) !important;
  background-color: hsl(var(--accent));
  border-radius: var(--radius);
}
*/

/* Example: rounder buttons */
/*
button {
  border-radius: 9999px !important;
}
*/

/* Example: customize cards */
/*
.swegon-card {
  border: 2px solid hsl(var(--primary) / 0.2);
}
*/