/* ============================================================
   REINDEER OFFICIAL DESIGN TOKENS (LIGHT PALETTE LOCKED)
   Matches Android res/values/colors.xml & Website/index.html
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800;900&display=swap');

:root {
  color-scheme: only light;
  forced-color-adjust: none;

  /* Reindeer Authentic Palette */
  --bg-app: #FEFCE4;                    /* Authentic warm yogurt / cream background */
  --bg-surface: #FFFFFF;                /* High contrast white cards */
  --bg-surface-secondary: #F7F5DA;      /* Input background */
  --bg-surface-elevated: #FFFFFF;
  --bg-scrim: rgba(17, 17, 17, 0.50);

  /* Signature Electric Neon Lime */
  --brand-lime: #C5F228;
  --brand-lime-hover: #9ACD00;
  --brand-lime-light: #DFFF66;
  --brand-lime-dark: #2A330A;

  /* Typography & High-Contrast Solids */
  --text-primary: #111111;
  --text-secondary: #555555;
  --text-muted: #757575;
  --text-faint: #9E9E9E;
  --text-inverse: #FFFFFF;

  /* Borders & Rules */
  --rule: rgba(17, 17, 17, 0.12);
  --rule-strong: #111111;
  --rule-focus: #111111;

  /* Semantic Feedback */
  --status-pending: #F59E0B;
  --status-active: #C5F228;
  --status-success: #10B981;
  --status-error: #EF4444;
  --status-error-bg: #FEE2E2;

  /* Radii */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 9999px;

  /* Shadows (Clean, non-fuzzy, tactile) */
  --shadow-sm: 0 1px 3px rgba(17, 17, 17, 0.08);
  --shadow-card: 0 4px 16px rgba(17, 17, 17, 0.08);
  --shadow-floating: 0 8px 32px rgba(17, 17, 17, 0.16);

  /* Layout Constants */
  --topbar-height: 60px;
  --font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--bg-app);
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

a {
  color: inherit;
  text-decoration: none;
}