/*
  ============================================================
  KINDNESS AT WORK — Brand Theme Override
  Leadership Scorecard Rebranding
  ============================================================

  This file overrides the default teal color scheme with
  the confirmed Kindness at Work brand palette:

  Sapphire:        #1B4F8A  (hsl ~213 70% 32%)
  Champagne Gold:  #D4AF72  (hsl ~38 54% 64%)
  Deep Navy:       #1A2535  (hsl ~218 36% 16%)
  ============================================================
*/

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ══════════════════════════════════════════════════════
   ROOT COLOR TOKENS — Light Mode
   Replaces teal (183 70% 23%) with Sapphire (213 70% 32%)
   ════════════════════════════════════════════════════ */
:root {
  /* Primary — Sapphire */
  --primary:                213 70% 32%;   /* #1B4F8A */
  --primary-foreground:     0 0% 98%;

  /* Accent — Champagne Gold tint */
  --accent:                 38 54% 90%;    /* gold pale */
  --accent-foreground:      38 54% 28%;   /* dark gold text */

  /* Ring (focus) */
  --ring:                   213 70% 32%;

  /* Chart colors — Sapphire family with gold highlight */
  --chart-1:                213 70% 32%;   /* Sapphire */
  --chart-2:                213 55% 50%;   /* Mid blue */
  --chart-3:                152 40% 38%;   /* Sage (kept) */
  --chart-4:                38 54% 64%;    /* Champagne Gold */
  --chart-5:                218 36% 28%;   /* Dark navy */

  /* Background warmer white */
  --background:             214 20% 97%;
  --foreground:             218 36% 16%;   /* Deep Navy text */

  /* Card */
  --card:                   0 0% 100%;
  --card-foreground:        218 36% 16%;

  /* Muted */
  --muted:                  213 20% 93%;
  --muted-foreground:       213 15% 48%;

  /* Secondary */
  --secondary:              213 20% 93%;
  --secondary-foreground:   218 36% 25%;

  /* Border & input */
  --border:                 213 18% 87%;
  --input:                  213 18% 87%;

  /* Sidebar */
  --sidebar:                0 0% 100%;
  --sidebar-foreground:     218 36% 16%;
  --sidebar-border:         213 18% 87%;
  --sidebar-accent:         213 20% 93%;
  --sidebar-accent-foreground: 213 70% 32%;
  --sidebar-ring:           213 70% 32%;
}

/* ── Dark mode ── */
.dark {
  --primary:                213 50% 58%;   /* lighter sapphire on dark */
  --primary-foreground:     218 36% 10%;

  --accent:                 38 35% 22%;
  --accent-foreground:      38 54% 72%;

  --ring:                   213 50% 58%;

  --chart-1:                213 50% 62%;
  --chart-2:                213 45% 72%;
  --chart-3:                152 45% 58%;
  --chart-4:                38 54% 66%;
  --chart-5:                213 35% 75%;

  --sidebar:                218 20% 12%;
  --sidebar-foreground:     213 12% 85%;
  --sidebar-border:         218 14% 22%;
  --sidebar-accent:         218 16% 18%;
  --sidebar-accent-foreground: 213 50% 70%;
  --sidebar-ring:           213 50% 58%;
}

/* ══════════════════════════════════════════════════════
   TYPOGRAPHY — Swap to brand fonts
   ════════════════════════════════════════════════════ */
body {
  font-family: 'DM Sans', 'Helvetica Neue', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3,
.font-serif {
  font-family: 'DM Serif Display', Georgia, serif !important;
}

/* ══════════════════════════════════════════════════════
   AXIS / RADAR CHART — match brand colors
   ════════════════════════════════════════════════════ */
.axis-slider [role=slider] {
  background: hsl(213 70% 32%) !important;
  border-color: hsl(213 70% 32%) !important;
}

.axis-slider [role=slider]:focus {
  box-shadow: 0 0 0 4px hsl(213 70% 32% / 0.2) !important;
}

/* Recharts radar — sapphire fill */
.recharts-radar-polygon path {
  stroke: hsl(var(--primary)) !important;
  fill: hsl(var(--primary) / 0.18) !important;
}

/* ══════════════════════════════════════════════════════
   SCORE BADGES — Refined for brand
   ════════════════════════════════════════════════════ */
.score-good {
  border-color: hsl(213 70% 32% / 0.25);
  background-color: hsl(213 70% 32% / 0.08);
  color: hsl(213 70% 32%);
}

/* "Excellent" — use Champagne Gold */
.score-great {
  border-color: hsl(38 54% 64% / 0.4) !important;
  background-color: hsl(38 54% 64% / 0.12) !important;
  color: hsl(38 40% 34%) !important;
}

.score-great:is(.dark *) {
  border-color: hsl(38 54% 40%) !important;
  background-color: hsl(38 45% 15%) !important;
  color: hsl(38 54% 72%) !important;
}

/* ══════════════════════════════════════════════════════
   NAVIGATION — Sapphire branding
   ════════════════════════════════════════════════════ */
header {
  border-bottom-color: hsl(213 18% 87%) !important;
}

/* Nav active link */
nav a[class*="bg-primary"] {
  background-color: hsl(213 70% 32% / 0.1) !important;
  color: hsl(213 70% 32%) !important;
}

/* ══════════════════════════════════════════════════════
   LOGO AREA — Brand identity mark
   ════════════════════════════════════════════════════ */
/* The pentagon SVG logo */
header svg polygon {
  fill: hsl(213 70% 32% / 0.12) !important;
}

/* ══════════════════════════════════════════════════════
   INTRO SCREEN — axis pills
   ════════════════════════════════════════════════════ */
/* Axis name chips on intro */
.rounded-full.border-border {
  border-color: hsl(213 18% 87%) !important;
  color: hsl(213 15% 48%) !important;
}

/* ══════════════════════════════════════════════════════
   CARD BORDERS — subtle sapphire tint
   ════════════════════════════════════════════════════ */
.shadcn-card {
  border-color: hsl(213 20% 88%) !important;
}

/* ══════════════════════════════════════════════════════
   FOOTER LINK
   ════════════════════════════════════════════════════ */
footer a {
  color: hsl(213 70% 42%) !important;
}

footer a:hover {
  color: hsl(213 70% 28%) !important;
}

/* ══════════════════════════════════════════════════════
   HOVER ELEVATION — refined shadow
   ════════════════════════════════════════════════════ */
.hover-elevate:hover {
  box-shadow: 0 4px 20px hsl(213 70% 32% / 0.12) !important;
}

/* ══════════════════════════════════════════════════════
   PROGRESS BARS — DK score bars use axis colors
   (these are inline styled, so no override needed)
   ════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════
   TOOLTIP CONTENT
   ════════════════════════════════════════════════════ */
.recharts-tooltip-wrapper .recharts-default-tooltip {
  border-color: hsl(213 18% 87%) !important;
  border-radius: 8px !important;
  font-family: 'DM Sans', sans-serif !important;
}

/* ══════════════════════════════════════════════════════
   BRANDED HEADER STRIP (appended to top of page)
   ════════════════════════════════════════════════════ */
.kaw-brand-strip {
  background: hsl(213 70% 32%);
  color: white;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.kaw-brand-strip .kaw-back-link {
  color: white;
  text-decoration: none;
  font-weight: 600;
  transition: opacity 0.15s ease;
}

.kaw-brand-strip .kaw-back-link:hover {
  opacity: 0.8;
}

/* ══════════════════════════════════════════════════════
   INTRO HEADLINE — use serif for h1
   ════════════════════════════════════════════════════ */
h1.font-serif {
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

/* ══════════════════════════════════════════════════════
   BUTTON REFINEMENT
   ════════════════════════════════════════════════════ */
button[class*="bg-primary"],
a[class*="bg-primary"] {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
}

/* ══════════════════════════════════════════════════════
   AXIS TAB BUTTONS — active state
   ════════════════════════════════════════════════════ */
button[class*="border-primary"] {
  border-color: hsl(213 70% 32%) !important;
}

button[class*="bg-primary/5"] {
  background-color: hsl(213 70% 32% / 0.06) !important;
}

button[class*="ring-primary"] {
  --tw-ring-color: hsl(213 70% 32% / 0.2) !important;
}