/* cliptomap web theme — matches the mobile app (cliptomap-mobile
   utils/theme.ts, light palette): warm cream pages, white cards with sand
   edges, the brand teal / green / amber, warm brown-black text, Geist.

   Single source of truth for colours, fonts and component shapes. The
   matching Vuetify theme (colours + the variables that tint every Vuetify
   border and shadow) is assets/js/theme.js — keep the two in sync.

   LOAD ORDER: after vuetify.min.css, vuetify3-compat.css and styles.css, and
   before a page's inline <style>, so a page can still override locally. */
/* The Geist font is loaded by a <link> in each page's <head>, so it doesn't
   wait for this file (an @import here would). */

:root {
  /* Brand — identical to the app */
  --primary:       #1E6F7B;
  --primary-base:  #1E6F7B;
  --primary-deep:  #17545D;  /* the app's screen headers */
  --primary-soft:  #D6EEE8;
  --secondary:     #5FA777;
  --accent:        #E9B44C;
  --danger:        #D45C4A;

  /* Warm neutrals — the app's text / muted / subtle */
  --text:          #2A261F;
  --ink:           #2A261F;
  --muted:         #7A6F61;
  --subtle:        #A79D8F;

  /* Surfaces. Names follow this site: --surface is a card. The app calls
     its cream page colour "surface"; here that is --page. */
  --page:          #FFF7ED;
  --page-band:     #FAF1E4;  /* alternate section background */
  --surface:       #FFFFFF;
  --surface-alt:   #F4E6D3;  /* sand: tiles, tracks, code */
  --border:        #EEE2D1;  /* card edges (the app's settings groups) */
  --border-strong: #E2D3BF;
  --divider:       #F3EADF;
  --row-hover:     #FAF4EC;
  --icon-tile:     #DDEFEB;
  --shadow:        rgba(64, 45, 24, 0.12);

  --font: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-card: 20px;
  --radius-btn:  14px;
  --radius-pill: 999px;

  /* Vuetify 4 reads its fonts from these. */
  --v-font-body:    var(--font);
  --v-font-heading: var(--font);

  /* Shadows copied from Vuetify 3 (vuetify3-compat.css elevation-*) read
     these; warm brown instead of black, as in the app. */
  --v-shadow-key-umbra-opacity:    rgba(64, 45, 24, 0.14);
  --v-shadow-key-penumbra-opacity: rgba(64, 45, 24, 0.10);
  --v-shadow-key-ambient-opacity:  rgba(64, 45, 24, 0.08);
}

/* ---- Page -------------------------------------------------------------- */
html,
body {
  background: var(--page);
}
body {
  font-family: var(--font);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* styles.css's dotted grid overlay: the app's pages are plain cream. */
body::before {
  content: none;
}
.v-application {
  font-family: var(--font) !important;
  color: var(--text);
}
::selection {
  background: var(--primary-soft);
  color: var(--text);
}

/* ---- Type: bold and tight, like the app's titles ------------------------ */
.v-application h1, .v-application h2, .v-application h3,
.text-h1, .text-h2, .text-h3, .text-h4 {
  letter-spacing: -0.025em !important;
}
.v-application h4, .v-application h5, .v-application h6,
.text-h5, .text-h6 {
  letter-spacing: -0.012em !important;
}
.text-body-1, .text-body-2, .text-subtitle-1, .text-subtitle-2, .text-caption {
  letter-spacing: normal !important;
}

/* ---- Buttons: sentence case, bold, rounded -------------------------------
   Vuetify 3 (and the compat layer) set UPPERCASE with wide tracking, and
   many buttons add text-capitalize ("Try It Now"); the app writes labels in
   sentence case, as the source text already is. */
.v-btn {
  text-transform: none;
  letter-spacing: -0.005em;
  text-indent: 0;
  font-weight: 700;
}
.v-btn.text-capitalize {
  text-transform: none !important;
}
.v-btn:not(.v-btn--icon):not(.v-tab):not(.v-btn-group .v-btn) {
  border-radius: 12px;
}
.v-btn--size-large:not(.v-btn--icon):not(.v-tab),
.v-btn--size-x-large:not(.v-btn--icon):not(.v-tab) {
  border-radius: var(--radius-btn);
}
.v-btn--size-small:not(.v-btn--icon),
.v-btn--size-x-small:not(.v-btn--icon) {
  border-radius: 10px;
}
/* No shadows on buttons, anywhere (the user's call, 2026-10-05). Beats
   Vuetify's raised (elevated) buttons, elevation classes and hover glows, and
   covers plain buttons, tabs and the map's zoom buttons. */
.v-btn,
.v-btn:hover,
.v-btn:focus,
.v-btn:focus-visible,
.v-btn:active,
button,
button:hover,
[role="button"],
[role="tab"],
.leaflet-bar {
  box-shadow: none !important;
}

/* Vuetify's rounded-lg is 8px; the app's controls and cards are rounder. */
.v-btn.rounded-lg { border-radius: 12px !important; }
.v-card.rounded-lg { border-radius: var(--radius-lg) !important; }

/* ---- Cards: white, sand edge, rounder ----------------------------------- */
.v-card {
  border-radius: var(--radius-card);
}
.v-card--variant-elevated,
.v-card--variant-flat {
  border: 1px solid var(--border);
}
/* Material's tight 1–2px elevations read as a hard bottom edge; the app
   lifts cards with a soft, wide, warm shadow (its "soft" and "card"
   styles). Only cards — buttons, menus and bars keep Vuetify's. */
.v-card.elevation-1,
.v-card.elevation-2 {
  box-shadow: 0 6px 18px -10px rgba(64, 45, 24, 0.28), 0 1px 2px rgba(64, 45, 24, 0.05) !important;
}
.v-card.elevation-3,
.v-card.elevation-4,
.v-card.elevation-5,
.v-card.elevation-6 {
  box-shadow: 0 12px 28px -14px rgba(64, 45, 24, 0.34), 0 2px 4px rgba(64, 45, 24, 0.05) !important;
}
.v-card.elevation-8,
.v-card.elevation-10,
.v-card.elevation-12,
.v-card.elevation-16,
.v-card.elevation-24 {
  box-shadow: 0 20px 44px -18px rgba(64, 45, 24, 0.40), 0 3px 8px rgba(64, 45, 24, 0.06) !important;
}

/* ---- Tonal (tinted) chips, alerts, cards, buttons ------------------------
   Vuetify tints with 12% of the colour over whatever is behind — on cream
   that turns teal a muddy grey-green. The app's teal tint is always its
   mint primary-soft; other colours tint over white. */
.v-chip--variant-tonal,
.v-alert--variant-tonal,
.v-card--variant-tonal,
.v-btn--variant-tonal {
  background-color: #FFFFFF;
}
.v-chip--variant-tonal.text-primary,
.v-alert--variant-tonal.text-primary,
.v-card--variant-tonal.text-primary,
.v-btn--variant-tonal.text-primary {
  background-color: var(--primary-soft);
}
/* Amber is a fill colour; as text on its own light tint it is unreadable
   (≈1.9:1), so warning notices write in a dark amber over an amber tint. */
.v-alert--variant-tonal.text-warning {
  color: #7A4F0E !important;
}
.v-alert--variant-tonal.text-warning > .v-alert__underlay {
  background: var(--accent);
  opacity: 0.18;
}
.v-chip--variant-tonal.text-primary > .v-chip__underlay,
.v-alert--variant-tonal.text-primary > .v-alert__underlay,
.v-card--variant-tonal.text-primary > .v-card__underlay,
.v-btn--variant-tonal.text-primary > .v-btn__underlay {
  opacity: 0;
}

/* ---- Fields ------------------------------------------------------------- */
.v-field {
  border-radius: var(--radius-md);
}
.v-field--variant-outlined:not(.v-field--focused):not(.v-field--error) .v-field__outline {
  color: var(--border-strong);
  --v-field-border-opacity: 1;
}
.v-field--variant-outlined:not(.v-field--focused):not(.v-field--error):hover .v-field__outline {
  color: #CDBBA2;
}

.v-chip {
  font-weight: 600;
}

/* Dividers are drawn in the text colour at --v-border-opacity, which
   theme.js raises (0.3) so sand borders show; keep dividers as light as
   the app's. */
.v-divider {
  opacity: 0.12;
}

/* ---- Bars --------------------------------------------------------------- */
/* The app's tab bar is frosted cream with a warm edge; the web top bar
   follows. (color="white" renders .bg-white.) */
.v-app-bar.bg-white,
.v-app-bar.v-toolbar {
  background-color: rgba(255, 247, 237, 0.94) !important;
}

/* ---- Vuetify's neutral greys → the app's warm ones ---------------------- */
.bg-grey-lighten-5 { background-color: #FFFBF6 !important; color: var(--text) !important; }
.bg-grey-lighten-4 { background-color: var(--page-band) !important; color: var(--text) !important; }
.bg-grey-lighten-3 { background-color: var(--surface-alt) !important; color: var(--text) !important; }
.bg-grey-lighten-2 { background-color: var(--border-strong) !important; color: var(--text) !important; }
.bg-grey-darken-4  { background-color: #2A261F !important; color: #FFF7ED !important; }
.text-grey-lighten-1 { color: var(--subtle) !important; }
.text-grey-lighten-2 { color: #C9BCA9 !important; }
.text-grey-lighten-4 { color: var(--surface-alt) !important; }
.text-grey-darken-4  { color: var(--text) !important; }