/* ============================================================
   APPROVE IT — base.css
   Reset, root tokens, typography, global utilities
   ============================================================ */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Brand colors (from brand book) */
  --turquoise: #04DBB4;
  --turquoise-deep: #02A88B;
  --turquoise-soft: #DAF7F0;
  --teal: #042B31;
  --teal-2: #0a3d45;
  --white: #FFFFFF;
  --paper: #F4F1EA;
  --paper-2: #EAE4D6;
  --ink: #042B31;
  --ink-soft: #5A6A6E;
  --gray: #A6A9AA;
  --gray-soft: #DEDED9;
  --lavender: #BBAADD;
  --lavender-soft: #EFEAF6;
  --coral: #FF6F61;
  --coral-soft: #FFE5E1;

  /* Fonts */
  --sans: 'Cairo', system-ui, sans-serif;
  --serif: 'Fraunces', Georgia, serif;

  /* Logical properties helpers — flip with RTL */
  --start: left;
  --end: right;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--turquoise);
  color: var(--teal);
}

/* Hide visually but keep for screen readers */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Animations */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.15); opacity: 0; }
}