/* Brand fonts and tokens */
/* TODO: self-host fonts for offline use */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&family=Roboto:wght@400&display=swap');
@import url('https://fonts.cdnfonts.com/css/neptune');

:root {
  /* Colors */
  --kt-primary: #0057B7; /* Sapphire */
  --kt-primary-hover: #007DC5; /* Medium Blue */
  --kt-info: #009CDE; /* Azure */
  --kt-text: #002C5B; /* Navy */
  --kt-body: #111111; /* approved dark for long text */
  --kt-muted: #6D6E71; /* Ash */
  --kt-border: #D1D3D4; /* Light Gray */
  --kt-bg: #FFFFFF; /* White surfaces like cards */
  --kt-page-bg: #F4F6FA; /* Subtle gray backdrop */
  --kt-accent-green: #A4D65E;
  --kt-accent-yellow: #F4E501;
  --kt-accent-orange: #F68D2E;
  --kt-accent-red: #E03C31;
  --kt-green-100: color-mix(in srgb, var(--kt-accent-green) 18%, var(--kt-bg));
  --kt-green-300: color-mix(in srgb, var(--kt-accent-green) 55%, transparent);
  --kt-green-900: color-mix(in srgb, var(--kt-accent-green) 80%, black);
  --kt-red-100: color-mix(in srgb, var(--kt-accent-red) 18%, var(--kt-bg));
  --kt-red-300: color-mix(in srgb, var(--kt-accent-red) 55%, transparent);
  --kt-red-900: color-mix(in srgb, var(--kt-accent-red) 85%, black);

  /* Spacing */
  --space-1: 3px;
  --space-2: 6px;
  --space-3: 9px;
  --space-4: 12px;
  --space-5: 18px;
  --space-6: 24px;

  /* Radius */
  --radius-md: 12px;
  --radius-lg: 16px;

  /* Focus outline */
  --focus-outline: 2px solid var(--kt-info);
}

html, body {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.heading-1, .heading-2, .heading-3, .heading-4, .heading-5, .heading-6 {
  font-family: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

h1, .heading-1 { font-size: 2rem; }
h2, .heading-2 { font-size: 1.5rem; }
h3, .heading-3 { font-size: 1.25rem; }
h4, .heading-4 { font-size: 1.125rem; }
h5, .heading-5 { font-size: 1rem; }
h6, .heading-6 { font-size: 0.875rem; }

.kt-display {
  font-family: 'Neptune', 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

body {
  color: var(--kt-body);
  background: var(--kt-page-bg);
}

.text-muted { color: var(--kt-muted); }