/* Premium Design Tokens — Industry Master */
/* Civic Atlas / Core-Line — light-first civic-daylight palette (the ONLY skin). */
/* Accent: Río de la Plata teal #007f8c. Severity LEDs tuned for white surfaces. */
/* Direction locked 2026-06-08 — see .planning/redesign/DECISION-civic-atlas-coreline.md */
/* Update by editing values here — aura-theme.css re-exports them to Vaadin. */
/* NOT generated: design-tokens/generate.mjs does not write this file. It used to copy   */
/* generated/design-tokens.css over it, which reverted the palette to the retired        */
/* pre-Civic blue; that copy step was removed. design-tokens.json feeds mobile only.     */
/* Dark mode RETIRED at Phase 437.1 (D-03); Civic light is the base, not an override. */

:root {
  /* ─── Primary — Civic teal (Río de la Plata) ──────────────────────── */
  --im-color-primary:           #007F8C;
  --im-color-primary-light:     #33A3AE;
  --im-color-primary-dark: light-dark(#005E68, #4FC3CE);
  --im-color-primary-surface: light-dark(#D7F1F3, #0C2E33);

  /* ─── Secondary — civic info blue ─────────────────────────────────── */
  --im-color-secondary:         #2F6FED;
  --im-color-secondary-light:   #5B8EF5;
  --im-color-secondary-surface: light-dark(#E7F0FF, #111E38);

  /* ─── Semantic status (Civic LEDs, AA on white) ──────────────────── */
  --im-color-success:           #16845B;
  --im-color-success-light:     #1FA873;
  --im-color-success-surface: light-dark(#DFF5EA, #0D2A20);
  --im-color-success-text: light-dark(#0F6344, #5FD3A0);

  --im-color-warning:           #B26A00;
  --im-color-warning-light:     #D08400;
  --im-color-warning-surface: light-dark(#FFF0D1, #2E2109);
  --im-color-warning-text: light-dark(#8A5200, #F0B84D);
  /* Sign face for the road-sign WARNING toast (notification.recipe.css). Deliberately
     BRIGHTER than --im-color-warning: that token is a mid-tone amber that fails 4.5:1
     BOTH ways at toast scale — 4.24:1 under white ink and 4.46:1 under black — so it
     cannot carry the bold sign text in either direction. Measured on this face with
     --im-color-text-primary #17212B: 10.78:1, and 8.30:1 at the darkest point of the
     card's gradient. Both clear the 6.51:1 of the green success sign this mirrors. */
  --im-color-warning-sign:      #FFCC00;

  --im-color-error:             #C73535;
  --im-color-error-light:       #E04A4A;
  --im-color-error-surface: light-dark(#FFE3E3, #331416);
  --im-color-error-text: light-dark(#9E2727, #F58B8B);

  --im-color-info:              #2F6FED;
  --im-color-info-surface: light-dark(#E7F0FF, #111E38);
  --im-color-info-text: light-dark(#1F54C0, #8FB4FF);

  /* ─── Neutral scale — Tailwind Slate ─────────────────────────────── */
  --im-color-neutral-50: light-dark(#F8FAFC, #0F172A);
  --im-color-neutral-100: light-dark(#F1F5F9, #1E293B);
  --im-color-neutral-200: light-dark(#E2E8F0, #334155);
  --im-color-neutral-300: light-dark(#CBD5E1, #475569);
  --im-color-neutral-400: light-dark(#94A3B8, #64748B);
  --im-color-neutral-500: light-dark(#64748B, #94A3B8);
  --im-color-neutral-600: light-dark(#475569, #CBD5E1);
  --im-color-neutral-700: light-dark(#334155, #E2E8F0);
  --im-color-neutral-800: light-dark(#1E293B, #F1F5F9);
  --im-color-neutral-900: light-dark(#0F172A, #F8FAFC);

  /* ─── Surfaces & text (Civic daylight) ───────────────────────────── */
  --im-color-background: light-dark(#F4F6F8, #0A0E14);  /* civic canvas (--bg) */
  --im-color-surface: light-dark(#FFFFFF, #10151F);  /* work-container panels */
  --im-color-on-primary:        #FFFFFF;
  --im-color-on-secondary:      #FFFFFF;
  --im-color-on-surface: light-dark(#17212B, #E6EDF5);  /* civic ink (--text) */
  --im-color-text-primary: light-dark(#17212B, #E6EDF5);
  --im-color-text-secondary: light-dark(#2C3A47, #C2CDDA);  /* civic --text-2, ~10.6:1 on white */
  --im-color-text-disabled: light-dark(#5C6B78, #8B96A9);  /* civic --text-mute, 4.7:1 on white */
  --im-color-border: light-dark(#C9D3DC, #26303F);  /* civic --border, visible card edges */
  --im-color-border-light: light-dark(#E4E9EE, #1B2431);  /* civic --border-soft */
  --im-color-divider: light-dark(#C9D3DC, #26303F);

  /* ─── Badges (Civic light tints) ─────────────────────────────────── */
  --im-color-badge-purple-bg: light-dark(#F0EBFF, #241B3D);
  --im-color-badge-purple-text: light-dark(#6D28D9, #C4A9FF);
  --im-color-badge-teal-bg: light-dark(#D7F1F3, #0C2E33);
  --im-color-badge-teal-text: light-dark(#005E68, #4FC3CE);
  --im-color-badge-indigo-bg: light-dark(#E7F0FF, #111E38);
  --im-color-badge-indigo-text: light-dark(#1F54C0, #8FB4FF);
  --im-color-badge-amber-bg: light-dark(#FFF0D1, #2E2109);
  --im-color-badge-amber-text: light-dark(#8A5200, #F0B84D);

  /* ─── Charts (accessible, vibrant on white) ──────────────────────── */
  --im-color-chart-1: #007F8C;
  --im-color-chart-2: #16845B;
  --im-color-chart-3: #B26A00;
  --im-color-chart-4: #6D28D9;
  --im-color-chart-5: #2F6FED;
  --im-color-chart-6: #C73535;

  /* ─── Map overlays ────────────────────────────────────────────────── */
  --im-color-map-geofence: #007F8C;
  --im-color-map-route:    #16845B;
  --im-color-map-alert:    #C73535;

  /* ─── Messaging-channel brand marks ───────────────────────────────── */
  /* These identify a THIRD-PARTY CHANNEL, not a platform state. They are deliberately
     NOT re-hued by the Civic palette: recolouring a channel mark makes the channel
     unrecognisable, which is the one thing it exists to prevent. Values are the
     channels' own brand colours; only voice/SMS/email/chat (which have no external
     brand) are drawn from the Civic scale. */
  --im-color-channel-whatsapp: #25D366;
  --im-color-channel-telegram: #0088CC;
  --im-color-channel-voice:    #16845B;
  --im-color-channel-sms:      #B26A00;
  --im-color-channel-email:    #2F6FED;
  --im-color-channel-chat:     #6D28D9;

  /* ─── Spacing ─────────────────────────────────────────────────────── */
  --im-spacing-xs:  4px;
  --im-spacing-s:   8px;
  --im-spacing-m:   16px;
  --im-spacing-l:   24px;
  --im-spacing-xl:  32px;
  --im-spacing-2xl: 48px;

  /* ─── Typography ──────────────────────────────────────────────────── */
  /* Mirrors --aura-font-family. The two files disagreed with fonts.css, which loads IBM Plex
     Sans; both said system-ui, so the webfont was downloaded and never used by default. */
  --im-typography-font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --im-typography-font-size-xs:   11px;
  --im-typography-font-size-s:    13px;
  --im-typography-font-size-m:    14px;
  --im-typography-font-size-l:    16px;
  --im-typography-font-size-xl:   20px;
  --im-typography-font-size-2xl:  24px;
  --im-typography-font-weight-normal:   400;
  --im-typography-font-weight-medium:   500;
  --im-typography-font-weight-semibold: 600;
  --im-typography-font-weight-bold:     700;
  --im-typography-line-height-tight:  1.25;
  --im-typography-line-height-normal: 1.5;

  /* ─── Border radius ───────────────────────────────────────────────── */
  --im-border-radius-s:    4px;
  --im-border-radius-m:    8px;
  --im-border-radius-l:    12px;
  --im-border-radius-xl:   16px;
  --im-border-radius-full: 9999px;

  /* ─── Elevation (light — crisp, low-spread shadows) ──────────────── */
  /* Elevation carries BOTH schemes. Until 2026-08-24 every value was a slate-tinted rgba shadow,
     invisible against a #0A0E14 ground -- dark mode had no depth model at all, which is why it
     resolved correctly and still looked flat. In dark a shadow alone cannot work (there is no
     lighter ground for it to fall on), so each level pairs a widening shadow with a hairline
     light RING: the ring separates a raised surface from the ground, the shadow only gives it
     distance. */
  /* Elevation carries BOTH schemes -- but the SHADOW cannot be wrapped in light-dark(), and the
     first attempt at this (2026-08-24) shipped exactly that mistake: light-dark() takes exactly two
     arguments, a multi-layer box-shadow contains commas of its own, and the result parsed as a
     4-argument function and was dropped entirely. Every card silently lost its shadow in BOTH
     schemes -- a change meant to fix dark that broke light too, invisibly, because an invalid
     declaration produces no warning.

     So the SCHEME lives in the colours, which are comma-free, and the geometry is written once:

       --im-shadow-ink   the falling shadow. Slate-tinted and faint on white; near-black and much
                         deeper on #0A0E14, where a soft shadow is simply invisible.
       --im-shadow-ring  a hairline ring, transparent in light and a faint light line in dark. On a
                         dark ground this ring -- not the shadow -- is what actually separates a
                         raised surface from what is behind it. Dark mode had NO depth model before
                         this; that is why it resolved correctly and still looked flat. */
  --im-shadow-ink:      light-dark(rgba(15, 23, 42, 0.10), rgba(0, 0, 0, 0.62));
  --im-shadow-ink-soft: light-dark(rgba(15, 23, 42, 0.06), rgba(0, 0, 0, 0.45));
  --im-shadow-ring:     light-dark(rgba(15, 23, 42, 0.04), rgba(255, 255, 255, 0.06));

  --im-elevation-none: none;
  --im-elevation-xs: 0 0 0 1px var(--im-shadow-ring), 0 1px 2px var(--im-shadow-ink-soft);
  --im-elevation-s:  0 0 0 1px var(--im-shadow-ring), 0 2px 5px var(--im-shadow-ink-soft);
  --im-elevation-m:  0 0 0 1px var(--im-shadow-ring), 0 5px 14px var(--im-shadow-ink);
  --im-elevation-l:  0 0 0 1px var(--im-shadow-ring), 0 10px 28px var(--im-shadow-ink);
  --im-elevation-xl: 0 0 0 1px var(--im-shadow-ring), 0 18px 46px var(--im-shadow-ink);

  /* ─── Density Scales (SEED-3283) ─────────────────────────────────── */
  --im-density-compact-row-height: 32px;
  --im-density-standard-row-height: 44px;
  --im-density-compact-padding: 4px 8px;
  --im-density-standard-padding: 8px 16px;
}

/* ─── Typography Discipline Engine (SEED-3283) ──────────────────────────
 * Monospace font family is strictly confined to technical tokens:
 * UUIDs, VIN/License plates, RFID hashes, GPS coordinates, ISO timestamps.
 * All headings, layout chrome, card titles and labels enforce proportional sans-serif. */
.im-mono,
[data-token="im-mono"] {
  font-family: var(--aura-font-family-mono, 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace) !important;
  font-feature-settings: "tnum" 1, "zero" 1;
  letter-spacing: -0.01em;
}

/* Standard proportional headings */
.im-heading,
.im-card-title,
.coreline-masthead__title,
.v-card-title {
  font-family: var(--aura-font-family, 'IBM Plex Sans', system-ui, -apple-system, sans-serif) !important;
  letter-spacing: -0.02em;
}