/* =============================================
   FlatApp Landing - Design Tokens
   Extracted from web_cockpit/core/core.css
   ============================================= */

:root {
  --primary: #FD825A;
  --primary-light: #ff9a7a;
  --primary-dark: #e06a42;
  /* Agency / cockpit accent — used to differentiate the agency side
     from the renter side without leaning further on brand orange. */
  --cockpit-ink: #1F2933;
  --cockpit-ink-soft: rgba(31,41,51,0.06);
  --bg: #FAFAFA;
  --bg-white: #FFFFFF;
  --bg-input: #F5F5F5;
  --bg-container: #FBFBFB;
  --bg-sidebar: #1a1a1a;
  --text: #222222;
  --text-light: #757575;
  --text-hint: #9E9E9E;
  --text-white: #FFFFFF;
  --border: #E0E0E0;
  --border-light: #F0F0F0;
  --accent: #2196F3;
  --green: #4CAF50;
  --red: #F44336;
  --orange: #FF9800;
  --light-grey: #E1E0E0;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
  --radius: 20px;
  --radius-sm: 12px;
  --radius-xs: 8px;
  --font-body: 'Roboto Condensed', sans-serif;
}

[data-theme="dark"] {
  --bg: #000000;
  --bg-white: #121212;
  --bg-input: #212121;
  --bg-container: #1A1A1A;
  --bg-sidebar: #0a0a0a;
  --text: #F4F4F4;
  --text-light: #BDBDBD;
  --text-hint: #9E9E9E;
  --border: #424242;
  --border-light: #2A2A2A;
  --light-grey: #333333;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.4);
  /* Agency accent flips to a light blue-gray in dark mode so the
     #1F2933 ink doesn't blend into the dark background. */
  --cockpit-ink: #B7C7DB;
  --cockpit-ink-soft: rgba(183, 199, 219, 0.12);
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background 0.3s, color 0.3s;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }