/* ==========================================================================
   Krisha Connect — design tokens
   Pulled 1:1 from the Flutter app theme (core/theme/app_colors.dart,
   app_text_styles.dart, app_spacing.dart) so the mockups match the real app.
   ========================================================================== */
:root {
  /* ---- Brand ---- */
  --brand-red: #EB1E25;
  --brand-red-dark: #C2161C;
  --brand-yellow: #FEF039;
  --brand-yellow-dark: #E6D200;
  --primary: var(--brand-red);
  --on-primary: #FFFFFF;
  --primary-container: #FFE4E4;
  --on-primary-container: #5C0306;

  /* ---- App neutrals / surfaces (light app UI) ---- */
  --app-bg: #F7F8FA;
  --surface: #FFFFFF;
  --surface-muted: #F1F3F5;
  --border: #E3E6EA;
  --border-strong: #CBD1D9;

  /* ---- Text ---- */
  --text: #1A1D21;
  --text-muted: #626B77;
  --text-faint: #98A1AD;
  --text-inverse: #FFFFFF;

  /* ---- Semantic ---- */
  --success: #16A34A;   --success-bg: #E7F6EC;
  --warning: #D97706;   --warning-bg: #FCF1E2;
  --info:    #2563EB;   --info-bg:    #E7EEFD;
  --danger:  #C62828;   --danger-bg:  #FBE9E9;
  --neutral: #6B7280;   --neutral-bg: #EEF0F2;
  --teal:    #0D9488;
  --violet:  #7C3AED;

  /* ---- Radius ---- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* ---- Spacing ---- */
  --s-xs: 4px;
  --s-sm: 8px;
  --s-md: 12px;
  --s-lg: 16px;
  --s-xl: 24px;

  /* ---- Type ---- */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans", sans-serif;

  /* ==== Premium dark "stage" palette (the presentation chrome) ==== */
  --stage-0: #0B0C0F;
  --stage-1: #121419;
  --stage-2: #1A1D24;
  --stage-3: #23272F;
  --stage-line: #2C313B;
  --stage-text: #F3F5F8;
  --stage-text-muted: #9AA3B2;
  --stage-text-faint: #6B7280;
  --glow-red: rgba(235, 30, 37, 0.55);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--stage-0);
  color: var(--stage-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}