/* OurGreenCar — Restrained Nordic utility
   Flat surfaces. Solid colors. No gradients, no glass blur, no glow.
   Editorial type contrast does the visual work, not effects.
   Instrument Sans + Archivo */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* Brand — OurGreenCar primary. Slightly less saturated, more grounded */
  --ogc-green:     #0A8F62;
  --ogc-green-600: #086A48;
  --ogc-green-400: #3FB088;
  --ogc-green-100: #D5EBE0;
  --ogc-green-50:  #ECF5EF;

  /* Accent (Tweaks-overrideable) */
  --accent:     var(--ogc-green);
  --accent-600: var(--ogc-green-600);
  --accent-100: var(--ogc-green-100);
  --accent-50:  var(--ogc-green-50);

  /* Surfaces — warm paper, flat */
  --bg:       #F4EFE3;
  --bg-1:     #ECE5D4;
  --bg-2:     #DFD6C1;
  --surface:  #FBF6EB;
  --surface-2:#F1E9D7;
  --ink:      #14181A;
  --ink-2:    #232928;
  --text:     #2A302C;
  --muted:    #525A55;        /* AA on bg + surface */
  --muted-2:  #6F7872;        /* AA on bg + surface (small text only) */
  --line:     #C9BFA9;
  --line-2:   #DBD1BB;
  --frame:    #14181A;

  /* Glass / wash — kept as variables, but resolved to solid colors */
  --wash:     transparent;
  --glass:    var(--surface);
  --glass-strong: var(--surface);
  --glass-soft: var(--surface);
  --glass-border: rgba(20,24,26,.10);
  --field-bg: var(--surface);
  --field-shadow: none;

  /* Semantic — single tone, no glow */
  --required: #C45A26;
  --danger:   #B22A20;
  --warning:  #8E5A0B;
  --info:     #2A567C;
  --pin:      #B22A20;

  /* Type */
  --font:         'Instrument Sans', -apple-system, ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Archivo', 'Instrument Sans', system-ui, sans-serif;
  --fs-base:   15px;
  --fs-scale:  1;

  /* Radii — keep modest, not pillowy */
  --r-sm:  4px;
  --r:    8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* Density */
  --pad:   20px;
  --pad-y: 16px;
  --gap:   14px;
  --row-h: 52px;

  /* Shadows — one flat, very subtle elevation. No glow. */
  --shadow-card:  0 1px 0 rgba(20,24,26,.06);
  --shadow-sheet: 0 -1px 0 rgba(20,24,26,.08);
  --shadow-float: 0 1px 0 rgba(20,24,26,.08);
  --shadow-glow:  none;

  /* Cards — flat by default */
  --card-bg:     var(--surface);
  --card-border: 1px solid var(--line-2);
  --card-shadow: none;
}

/* Density */
[data-density="compact"]     { --pad:14px; --pad-y:11px; --gap:9px;  --row-h:44px; }
[data-density="comfortable"] { --pad:24px; --pad-y:20px; --gap:18px; --row-h:60px; }

/* Dark */
[data-theme="dark"] {
  --bg:       #14181A;
  --bg-1:     #1A1F1F;
  --bg-2:     #232928;
  --surface:  #1E2423;
  --surface-2:#252C2A;
  --ink:      #ECEAE0;
  --ink-2:    #D7D8CF;
  --text:     #C0C4BB;
  --muted:    #8A938B;
  --muted-2:  #626A64;
  --line:     #2C3331;
  --line-2:   #252B2A;
  --frame:    #0A0D0C;
  --glass:    var(--surface);
  --glass-strong: var(--surface);
  --glass-soft: var(--surface);
  --glass-border: rgba(255,255,255,.10);
  --card-border: 1px solid var(--line);
  --field-bg: var(--surface);
  --field-shadow: none;
  --shadow-card:  0 1px 0 rgba(0,0,0,.4);
  --shadow-sheet: 0 -1px 0 rgba(0,0,0,.5);
  --shadow-float: 0 1px 0 rgba(0,0,0,.5);
  --shadow-glow:  none;
}

/* Card style Tweaks */
[data-card="flat"]      { --card-shadow:none; --card-border:1px solid var(--line-2); --card-bg:var(--surface); }
[data-card="elevated"]  { --card-shadow:var(--shadow-card); --card-border:1px solid var(--line-2); --card-bg:var(--surface); }
[data-card="outlined"]  { --card-shadow:none; --card-border:1.5px solid var(--ink); --card-bg:var(--bg); }
[data-card="tinted"]    { --card-shadow:none; --card-border:1px solid var(--line-2); --card-bg:var(--surface-2); }

/* Dark mode card overrides */
[data-theme="dark"][data-card="flat"]     { --card-bg:var(--surface); --card-border:1px solid var(--line); }
[data-theme="dark"][data-card="elevated"] { --card-bg:var(--surface); --card-border:1px solid var(--line); --card-shadow:0 1px 0 rgba(0,0,0,.4); }
[data-theme="dark"][data-card="outlined"] { --card-bg:var(--surface); --card-border:1.5px solid var(--line); }
[data-theme="dark"][data-card="tinted"]   { --card-bg:var(--surface-2); }

/* Base — solid background, no gradients, no decorative pseudo elements */
.ogc-app {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  font-family: var(--font);
  font-size: calc(var(--fs-base) * var(--fs-scale));
  font-weight: 400;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.ogc-app *, .ogc-app *::before, .ogc-app *::after { box-sizing: border-box; }
.ogc-app button  { font-family: inherit; }
.ogc-app input, .ogc-app textarea { font-family: inherit; }
.ogc-app p { margin: 0; }

.leaflet-div-icon.ogc-leaflet-icon {
  background: transparent;
  border: 0;
}

/* Display type — Archivo, no tracking gimmicks */
.ogc-app h1, .ogc-app h2, .ogc-app h3 {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-wrap: balance;
  text-transform: none;
}
.ogc-app h1 { font-size: 32px; font-weight: 700; }
.ogc-app h2 { font-size: 22px; font-weight: 700; }
.ogc-app h3 { font-size: 17px; font-weight: 600; }

/* Focus — simple outline */
.ogc-app button:focus-visible,
.ogc-app input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Placeholder text */
.ogc-app input::placeholder,
.ogc-app textarea::placeholder { color: var(--muted-2); opacity: 1; }

/* Hide scrollbars */
.ogc-scroll::-webkit-scrollbar { width: 0; height: 0; }

/* Animations — kept minimal. Pulse only on the user location pin (real function). */
@keyframes ogcPulse    { 0% { transform:scale(1); opacity:.5; } 100% { transform:scale(2.2); opacity:0; } }
@keyframes ogcSpin     { to   { transform:rotate(360deg); } }
@keyframes ogcSlideUp  { from { transform:translateY(8px); opacity:0; } to { transform:none; opacity:1; } }
@keyframes ogcFade     { from { opacity:0; } to { opacity:1; } }

.ogc-anim-up   { animation: ogcSlideUp  .18s ease-out both; }
.ogc-anim-in   { animation: ogcSlideUp  .18s ease-out both; }
.ogc-anim-fade { /* removed — was causing capture issues; instant transitions feel snappier anyway */ }

@media (prefers-reduced-motion: reduce) {
  .ogc-anim-up,
  .ogc-anim-in,
  .ogc-anim-fade {
    animation: none;
  }
}
