@charset "UTF-8";
/* =====================================================
   🎨 Kanian Design Tokens – Single Source of Truth
===================================================== */
:root {
  /* ===== Layout ===== */
  --header-h: clamp(56px, 7vh, 84px);
  /* ===== Core Colors ===== */
  --primary: #0055a5;
  --primary-dark: #003d80;
  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface-alt: #f0f2f5;
  --surface-hover: #e9ecef;
  --text: #212529;
  --text-muted: #6c757d;
  --heading: var(--text);
  --card-bg: #ffffff;
  --card-border: #e0e0e0;
  /* ===== Header ===== */
  --header-bg: #123B6A;
  --header-text: #ffffff;
  --accent-color: #0e2e52;
  /* ===== States ===== */
  --success: #198754;
  --warning: #ffc107;
  --danger: #dc3545;
  --info: #0dcaf0;
  /* ===== Radius ===== */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  /* ===== Shadows ===== */
  --elevation-low: 0 2px 6px rgba(0,0,0,0.05);
  --elevation-medium: 0 6px 16px rgba(0,0,0,0.08);
  --elevation-high: 0 12px 24px rgba(0,0,0,0.12);
  /* ===== Typography ===== */
  --font-size-base: 0.95rem;
  --font-size-sm: 0.85rem;
  /* ===== Spacing ===== */
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xxl: 48px;
  /* ===== Buttons ===== */
  --btn-primary-bg: var(--primary);
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: #6c757d;
  --btn-secondary-hover: #5a6775;
}

/* =====================================================
   🧠 Semantic Tokens – Usage Layer
===================================================== */
:root {
  /* Surfaces */
  --surface-page: var(--bg);
  --surface-card: var(--card-bg);
  --surface-muted: var(--surface-alt);
  /* Text */
  --text-body: var(--text);
  --text-heading: var(--heading);
  --text-muted-semantic: var(--text-muted);
  /* Borders */
  --border-default: var(--card-border);
  /* Focus */
  --focus-ring: var(--primary);
  /* ===== Status Tokens ===== */
  --status-open-bg: var(--surface-muted);
  --status-open-text: var(--text-heading);
  --status-progress-bg: #fff8e1;
  --status-progress-text: #b26a00;
  --status-review-bg: #ede7f6;
  --status-review-text: #4527a0;
  --status-closed-bg: #e8f5e9;
  --status-closed-text: #2e7d32;
  --status-cancelled-bg: #ffebee;
  --status-cancelled-text: #c62828;
  --status-archived-bg: var(--surface-muted);
  --status-archived-text: var(--text-muted);
}

body {
  font-family: system-ui;
  margin: 0;
  padding: 0;
  color: #111;
  background: #fff;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 20px;
}

.section {
  margin: 100px 0;
}

.hero {
  margin-top: 120px;
}

h1 {
  font-size: 2.4rem;
  line-height: 1.3;
}

h2 {
  font-size: 1.8rem;
}

.btn-primary {
  background: black;
  color: white;
  padding: 12px 20px;
  text-decoration: none;
  display: inline-block;
}

.btn-secondary {
  border: 1px solid black;
  padding: 12px 20px;
  text-decoration: none;
  display: inline-block;
}

.hero-logo {
  margin-bottom: 30px;
}

.hero-logo img {
  height: 50px;
}

.subtitle {
  font-size: 1.2rem;
  margin-top: 20px;
  color: #444;
}

.hero-core-message {
  margin-top: 15px;
  font-weight: 600;
}

.hero-cta {
  margin-top: 30px;
  display: flex;
  gap: 12px;
}

.hero {
  margin-top: 120px;
}

.hero-logo {
  margin-bottom: 30px;
}

.hero-logo img {
  height: 50px;
}

.subtitle {
  font-size: 1.2rem;
  margin-top: 20px;
  color: #444;
  max-width: 700px;
}

.hero-core-message {
  margin-top: 15px;
  font-weight: 600;
}

.hero-cta {
  margin-top: 30px;
  display: flex;
  gap: 12px;
}

@media (max-width: 768px) {
  .container {
    padding: 20px;
  }
  h1 {
    font-size: 2rem;
  }
}

/*# sourceMappingURL=public.css.map */