@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600&display=swap");

/**
 * Phone Station theme — brand navy #173d6e on shadcn tokens.
 * HSL channels without `hsl()` wrapper, same as shadcn.
 */

:root {
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
  --card-foreground: 240 10% 3.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 240 10% 3.9%;
  --primary: 214 65% 26%;
  --primary-foreground: 0 0% 98%;
  --secondary: 240 4.8% 95.9%;
  --secondary-foreground: 214 65% 26%;
  --muted: 240 4.8% 95.9%;
  --muted-foreground: 240 3.8% 46.1%;
  --accent: 214 32% 95%;
  --accent-foreground: 214 65% 26%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;
  --border: 220 16% 88%;
  --input: 220 12% 76%;
  --ring: 214 65% 26%;
  --success: 152 55% 28%;
  --success-soft: 152 48% 93%;
  --warning: 28 78% 32%;
  --warning-soft: 38 90% 92%;
  --shadow: 0 1px 2px hsl(220 30% 16% / 0.05), 0 8px 20px hsl(220 30% 16% / 0.05);
  --chart-1: 12 76% 61%;
  --chart-2: 173 58% 39%;
  --chart-3: 197 37% 24%;
  --chart-4: 43 74% 66%;
  --chart-5: 27 87% 67%;
  --radius: 0.5rem;
  --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;
  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 240 5.3% 26.1%;
  --sidebar-primary: 214 65% 26%;
  --sidebar-primary-foreground: 0 0% 98%;
  --sidebar-accent: 214 32% 94%;
  --sidebar-accent-foreground: 214 65% 26%;
  --sidebar-border: 220 9% 72%;
  --sidebar-ring: 214 65% 26%;
  --scrollbar-thumb: #173d6e5d;
  --scrollbar-background: hsl(var(--muted) / 50%);
  --font-sans: "Source Sans 3", Arial, Helvetica, sans-serif;
}

.dark,
[data-theme="dark"] {
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
  --card: 240 10% 3.9%;
  --card-foreground: 0 0% 98%;
  --popover: 240 10% 3.9%;
  --popover-foreground: 0 0% 98%;
  --primary: 214 65% 26%;
  --primary-foreground: 0 0% 98%;
  --secondary: 240 3.7% 15.9%;
  --secondary-foreground: 0 0% 98%;
  --muted: 240 3.7% 15.9%;
  --muted-foreground: 240 5% 64.9%;
  --accent: 214 40% 16%;
  --accent-foreground: 0 0% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 98%;
  --border: 240 5% 22%;
  --input: 240 5% 28%;
  --ring: 214 55% 55%;
  --success: 152 45% 62%;
  --success-soft: 152 30% 16%;
  --warning: 38 80% 68%;
  --warning-soft: 32 30% 16%;
  --shadow: 0 1px 2px hsl(0 0% 0% / 0.3), 0 8px 20px hsl(0 0% 0% / 0.25);
  --chart-1: 220 70% 50%;
  --chart-2: 160 60% 45%;
  --chart-3: 30 80% 55%;
  --chart-4: 280 65% 60%;
  --chart-5: 340 75% 55%;
  --sidebar-background: 214 40% 12%;
  --sidebar-foreground: 214 20% 92%;
  --sidebar-primary: 214 65% 26%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 214 35% 18%;
  --sidebar-accent-foreground: 214 20% 92%;
  --sidebar-border: 214 30% 18%;
  --sidebar-ring: 214 55% 55%;
  --scrollbar-thumb: #ededed20;
  --scrollbar-background: hsl(var(--muted) / 50%);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  border-color: hsl(var(--border));
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: var(--font-sans);
  font-weight: 400;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
}

body:not(.print-doc-body) h1,
body:not(.print-doc-body) h2,
body:not(.print-doc-body) h3,
body:not(.print-doc-body) h4 {
  font-weight: 600;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* Utility aliases used across pages */
.bg-background { background-color: hsl(var(--background)); }
.bg-card { background-color: hsl(var(--card)); }
.bg-muted { background-color: hsl(var(--muted)); }
.bg-muted-50 { background-color: hsl(var(--muted) / 0.5); }
.bg-primary { background-color: hsl(var(--primary)); }
.bg-secondary { background-color: hsl(var(--secondary)); }
.bg-accent { background-color: hsl(var(--accent)); }
.text-foreground { color: hsl(var(--foreground)); }
.text-muted-foreground { color: hsl(var(--muted-foreground)); }
.text-primary-foreground { color: hsl(var(--primary-foreground)); }
.border { border: 1px solid hsl(var(--border)); }
.rounded-md { border-radius: calc(var(--radius) - 2px); }
.rounded-lg { border-radius: var(--radius); }
.rounded-full { border-radius: 9999px; }
.shadow-none { box-shadow: none; }
.muted { color: hsl(var(--muted-foreground)); }