/* Base styles: variables, resets, typography */

:root {
   color-scheme: light dark;
   /* Brand Colors (from palette.jpg) */
   --brand-deep-pockets: rgb(13 35 31);
   --brand-evergreen: rgb(20 56 49);
   --brand-safe-harbor: rgb(43 86 85);
   --brand-teal: rgb(0 183 135);
   --brand-mint: rgb(110 211 182);
   --brand-blue: hsl(210deg 60% 50%);
   --brand-faint: light-dark(var(--brand-safe-harbor), hsl(from var(--brand-teal) h calc(s - 80) calc(l + 20)));
   /* Accent Colors */
   --color-accent: var(--brand-teal);
   --color-accent-hover: var(--brand-mint);
   --color-secondary-accent: rgb(246 115 115);
   /* Status Colors */
   --color-warning: rgb(245 158 11);
   --color-warning-hover: rgb(234 88 12);
   --color-error-hover: rgb(170 34 34);
   --color-neutral: rgb(107 114 128);

   --font-size-sm: 0.875rem;

   --shadow: 0 2px 8px rgb(0 0 0 / 10%);
   --shadow-md: 0 4px 12px rgb(0 0 0 / 15%);

   --radius: 9px;
   --radius-sm: 6px;
   --radius-lg: 15px;
   /* Layout dimensions */
   --header-height: 56px;
   --main-padding: 1.2rem;
   --logo-particle-spread: 100px;
   /* width as ratio of height */
   --logo-particle-aspect: 4.09;
}

/* Theme overrides via data attribute */
[data-theme="light"] { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }

/* Reset */
*:not(ul) {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

/* Form elements don't inherit font by default */
button, input, select, textarea { font: inherit; }

code {
   background: var(--color-surface);
   padding: 0.125rem 0.375rem;
   border-radius: var(--radius-sm);
   font-size: var(--font-size-sm);
}

.status-healthy { color: var(--brand-teal); }
.status-disabled { color: var(--color-neutral); }
.status-error { color: var(--color-error); }
.status-warning { color: var(--color-warning); }
.status-info { color: var(--color-info); }