/*
 * Design tokens of the Sangtuda driver web app — the SAME light green design as the Android app
 * (android app/app/src/main/java/.../ui/theme/Color.kt + Type.kt + Scale.kt).
 *
 * UNITS: 1rem = 10dp of the Android design. The root font size follows the screen the same way the app's
 * ProvideAdaptiveDensity does: the interface is drawn for a 400 dp wide phone and grows / shrinks by
 * clamp(shortSide / 400, 0.82, 1.25). So `2.4rem` here is the `24.dp` of the app, `1.6rem` is `16.sp`.
 */
@import url('../fonts/roboto.css');

@font-face{font-family:'Material Icons';font-style:normal;font-weight:400;font-display:block;src:url('../fonts/material-icons.woff2') format('woff2')}
@font-face{font-family:'Material Icons Outlined';font-style:normal;font-weight:400;font-display:block;src:url('../fonts/material-icons-outlined.woff2') format('woff2')}

:root{
  /* surfaces */
  --bg:#F3F8F4;
  --bg-deep:#EAF3EC;
  --surface:#FFFFFF;
  --surface-hi:#EDF4EF;
  --surface-lo:#E1EAE4;
  --outline:#E1EAE4;
  --veil:#16261D;

  /* brand green: --taxi for text/icons (4.5:1 on white), --taxi-fill for filled controls */
  --taxi:#15803D;
  --taxi-fill:#16A34A;
  --taxi-deep:#0E7C38;
  --taxi-light:#34D17A;
  --on-taxi:#FFFFFF;
  --mint:#16A34A;
  --sky:#2563EB;
  --violet:#7C3AED;
  --coral:#E11D48;
  --amber:#F59E0B;
  --gold:#F5A524;

  /* soft tints of the accents */
  --green-soft:#E4F5EA;
  --blue-soft:#E5EDFD;
  --amber-soft:#FEF3DC;
  --red-soft:#FDE7EC;
  --violet-soft:#EFE8FD;

  /* text */
  --text-hi:#0F1B14;
  --text-mid:#4B5B52;
  --text-lo:#67756D;

  --gradient:linear-gradient(90deg,#1DB257,#16A34A,#12923F);
  --card-shadow:#7F9C88;
  --scrim:rgba(15,27,20,.6);

  /* shape */
  --r-card:2.4rem;
  --r-btn:1.8rem;
  --r-field:1.6rem;

  /* the phone's safe areas (notch, home bar) */
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
  --safe-right:env(safe-area-inset-right,0px);

  /* the height of the tab bar (80 dp) */
  --bar-h:8rem;

  --font:'Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;

  /* motion */
  --ease:cubic-bezier(.4,0,.2,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
}

html{
  /* 1rem = 10dp; the app scale clamp(shortSide/400, .82, 1.25) */
  font-size:clamp(8.2px,calc(min(100vw,100vh) / 40),12.5px);
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

/* the admin panel is a desktop design: a normal root size */
html.admin{font-size:10px}
@media (max-width:760px){html.admin{font-size:clamp(8.6px,calc(100vw / 38),11px)}}