/* ============================================================
   Hakili — Shared Design Tokens
   Used by both the Intake App and CEO Dashboard.
   Import via: @import url('../shared/tokens.css');
   ============================================================ */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
  /* ── Color Palette ── */
  /* Primary: Deep navy to slate */
  --bg-primary:     hsl(222, 47%, 8%);
  --bg-secondary:   hsl(222, 40%, 11%);
  --surface:        hsl(222, 30%, 14%);
  --surface-hover:  hsl(222, 28%, 18%);
  --surface-raised: hsl(222, 26%, 20%);
  --border:         hsl(222, 20%, 22%);
  --border-subtle:  hsl(222, 15%, 18%);

  /* Accent: Warm amber/gold */
  --accent:         hsl(38, 92%, 50%);
  --accent-hover:   hsl(38, 92%, 58%);
  --accent-muted:   hsla(38, 92%, 50%, 0.15);
  --accent-subtle:  hsla(38, 92%, 50%, 0.08);
  --accent-glow:    hsla(38, 92%, 50%, 0.25);

  /* Text */
  --text-primary:   hsl(210, 40%, 96%);
  --text-secondary: hsl(215, 20%, 65%);
  --text-muted:     hsl(215, 15%, 45%);
  --text-on-accent: hsl(222, 47%, 8%);

  /* Semantic colors */
  --success:        hsl(152, 69%, 45%);
  --success-muted:  hsla(152, 69%, 45%, 0.12);
  --warning:        hsl(38, 92%, 50%);
  --warning-muted:  hsla(38, 92%, 50%, 0.12);
  --error:          hsl(0, 72%, 56%);
  --error-muted:    hsla(0, 72%, 56%, 0.12);
  --info:           hsl(210, 80%, 56%);
  --info-muted:     hsla(210, 80%, 56%, 0.12);

  /* Morning / Evening identity */
  --morning:        hsl(38, 92%, 50%);
  --morning-bg:     hsla(38, 92%, 50%, 0.08);
  --evening:        hsl(250, 65%, 60%);
  --evening-bg:     hsla(250, 65%, 60%, 0.08);

  /* ── Typography ── */
  --font-heading:   'Outfit', system-ui, -apple-system, sans-serif;
  --font-body:      'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:      'JetBrains Mono', 'Fira Code', monospace;

  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.8125rem;  /* 13px */
  --text-base:  0.9375rem;  /* 15px */
  --text-md:    1rem;       /* 16px */
  --text-lg:    1.125rem;   /* 18px */
  --text-xl:    1.3125rem;  /* 21px */
  --text-2xl:   1.625rem;   /* 26px */
  --text-3xl:   2.125rem;   /* 34px */
  --text-4xl:   2.75rem;    /* 44px */

  --leading-tight:  1.25;
  --leading-normal: 1.55;
  --leading-relaxed: 1.75;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide:  0.025em;

  /* ── Spacing (4px base) ── */
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */

  /* ── Border Radius ── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-full: 9999px;

  /* ── Shadows (layered for depth) ── */
  --shadow-sm:
    0 1px 2px hsla(222, 50%, 4%, 0.3),
    0 1px 3px hsla(222, 50%, 4%, 0.15);
  --shadow-md:
    0 2px 4px hsla(222, 50%, 4%, 0.25),
    0 4px 12px hsla(222, 50%, 4%, 0.2);
  --shadow-lg:
    0 4px 8px hsla(222, 50%, 4%, 0.2),
    0 8px 24px hsla(222, 50%, 4%, 0.25),
    0 16px 48px hsla(222, 50%, 4%, 0.15);
  --shadow-glow:
    0 0 20px hsla(38, 92%, 50%, 0.15),
    0 0 60px hsla(38, 92%, 50%, 0.05);

  /* ── Transitions ── */
  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Glassmorphism ── */
  --glass-bg:       hsla(222, 30%, 14%, 0.6);
  --glass-bg-solid: hsla(222, 30%, 14%, 0.85);
  --glass-border:   hsla(222, 20%, 30%, 0.4);
  --glass-blur:     16px;

  /* ── Z-Index Scale ── */
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   1000;
  --z-toast:   2000;
}

/* ── Base Reset & Defaults ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color-scheme: dark;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--bg-primary);
  min-height: 100dvh;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  color: var(--accent-hover);
}

/* ── Utility Classes ── */
.visually-hidden {
  position: absolute !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  white-space: nowrap !important;
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Database Connection Status Pill ── */
.db-status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  border: 1px solid var(--border-subtle);
  background: var(--surface);
  transition: all var(--transition-fast);
  margin-top: var(--space-2);
}

.db-status-pill .status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-secondary);
}

.db-status-pill.loading .status-dot {
  background: var(--info);
  animation: pulse-status 1.5s infinite ease-in-out;
}

.db-status-pill.synced {
  border-color: hsla(142, 70%, 45%, 0.3);
  color: var(--success);
  background: hsla(142, 70%, 45%, 0.05);
}

.db-status-pill.synced .status-dot {
  background: var(--success);
}

.db-status-pill.local {
  border-color: hsla(38, 92%, 50%, 0.3);
  color: var(--accent);
  background: hsla(38, 92%, 50%, 0.05);
}

.db-status-pill.local .status-dot {
  background: var(--accent);
}

.db-status-pill.lowdata {
  border-color: hsla(200, 80%, 50%, 0.3);
  color: var(--info);
  background: hsla(200, 80%, 50%, 0.05);
}

.db-status-pill.lowdata .status-dot {
  background: var(--info);
}

.db-status-pill.error {
  border-color: hsla(350, 80%, 50%, 0.3);
  color: var(--error);
  background: hsla(350, 80%, 50%, 0.05);
}

.db-status-pill.error .status-dot {
  background: var(--error);
}

/* ── Shared Footer ── */
.app-footer {
  text-align: center;
  padding: var(--space-6) var(--space-4);
  margin-top: var(--space-8);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--text-xs);
}

.app-footer a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--transition-fast), opacity var(--transition-fast);
}

.app-footer a:hover {
  opacity: 0.85;
  text-decoration: underline;
}

@keyframes pulse-status {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}