/* ==========================================================
   DriverTime / Fleet Unified module CSS
   base.css — tokens, reset, typography, accessibility

   COLORBLIND-SAFE DESIGN:
   - Blue/Orange as primary pair (safe for all types)
   - Never rely on color alone — always combine with
     icons, shapes, patterns, or text labels
   - Minimum 4.5:1 contrast ratio (WCAG AA)
   - Distinct border patterns per state (solid/dashed/dotted)
   ========================================================== */

:root {
  /* ─── Surface colors ─── */
  --bg:           #0d1520;
  --bg-subtle:    #111d2e;
  --panel:        #15223a;
  --card-bg:      #182740;
  --card-raised:  #1d3050;

  /* ─── Text ─── */
  --text:         #e8edf3;
  --text-strong:  #ffffff;
  --muted:        #8b9db5;
  --muted-2:      #5d7089;

  /* ─── Borders ─── */
  --border:       rgba(140, 170, 210, 0.15);
  --border-strong: rgba(140, 170, 210, 0.28);

  /* ─── Primary (Blue — universellt synlig) ─── */
  --primary:      #4d9fff;
  --primary-bg:   rgba(77, 159, 255, 0.12);
  --primary-glow: rgba(77, 159, 255, 0.25);

  /* ─── Success / Active (Teal+Blue — synlig vid deuteranopi) ─── */
  --ok:           #2ec4b6;
  --ok-bg:        rgba(46, 196, 182, 0.12);
  --ok-text:      #5ee4d6;

  /* ─── Warning (Orange — säker vid alla typer) ─── */
  --warning:      #ffa630;
  --warning-bg:   rgba(255, 166, 48, 0.12);
  --warning-text: #ffbe6a;

  /* ─── Danger (Red-orange + mönster — synlig vid protanopi) ─── */
  --danger:       #ff6b4a;
  --danger-bg:    rgba(255, 107, 74, 0.12);
  --danger-text:  #ff9580;

  /* ─── Accent (for interactive elements) ─── */
  --accent:       var(--primary);
  --accent-2:     var(--ok);

  /* ─── Elevation ─── */
  --shadow-1:     0 4px 16px rgba(0, 0, 0, 0.3),
                  0 1px 4px rgba(0, 0, 0, 0.2);
  --shadow-2:     0 8px 32px rgba(0, 0, 0, 0.4),
                  0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-glow:  0 0 24px rgba(77, 159, 255, 0.15);

  /* ─── Radii ─── */
  --r-4:   4px;
  --r-8:   8px;
  --r-12:  12px;
  --r-16:  16px;
  --r-20:  20px;
  --r-full: 999px;

  /* ─── Spacing (4px scale) ─── */
  --s-2:   2px;
  --s-4:   4px;
  --s-6:   6px;
  --s-8:   8px;
  --s-10:  10px;
  --s-12:  12px;
  --s-16:  16px;
  --s-20:  20px;
  --s-24:  24px;
  --s-30:  30px;
  --s-32:  32px;
  --s-40:  40px;

  /* ─── Typography ─── */
  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',
          Roboto, Arial, 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas,
          'Liberation Mono', monospace;

  --fs-xs:   0.7rem;
  --fs-sm:   0.8rem;
  --fs-base: 0.95rem;
  --fs-md:   1.05rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  2rem;

  --lh-tight:  1.2;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  /* ─── Focus ─── */
  --focus:        rgba(77, 159, 255, 0.8);
  --focus-offset: 3px;

  /* ─── Motion ─── */
  --ease:     cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --duration: 0.2s;
}

/* ==========================================================
   RESET
   ========================================================== */

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

html {
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-base);
  background: var(--bg);
  color: var(--text);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video, canvas {
  max-width: 100%;
  height: auto;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; /* tar bort 300ms tap-fördröjning på Android/iOS */
  cursor: pointer;
}

a { color: inherit; text-decoration: none; }

h1, h2, h3 {
  margin: 0 0 var(--s-12) 0;
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--text-strong);
}

h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-md); }

fieldset {
  border: 1px solid var(--border);
  border-radius: var(--r-12);
  padding: var(--s-16);
  margin: 0 0 var(--s-16) 0;
}

legend {
  padding: 0 var(--s-8);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary);
}

label {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  margin-bottom: var(--s-12);
  font-size: var(--fs-sm);
  color: var(--muted);
  font-weight: 500;
}

input, select {
  padding: var(--s-10) var(--s-12);
  border-radius: var(--r-8);
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  color: var(--text);
  font-size: var(--fs-base);
  transition: border-color var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease);
}

input:focus, select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-bg);
  outline: none;
}

input[readonly] {
  opacity: 0.6;
  cursor: default;
}

/* ==========================================================
   FOCUS & ACCESSIBILITY
   ========================================================== */

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: var(--focus-offset);
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--s-16);
  padding: var(--s-8) var(--s-16);
  background: var(--primary);
  color: #fff;
  border-radius: var(--r-8);
  z-index: 10001;
  font-weight: 600;
}

.skip-link:focus {
  top: var(--s-8);
}

/* ==========================================================
   iOS: förhindra automatisk zoom vid inputfokus.
   Safari zoomar sidan om input-font-size < 16px.
   Gäller bara touch-enheter (mobil/surfplatta).
   ========================================================== */
@media (hover: none) and (pointer: coarse) {
  input, select, textarea {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Screen reader only */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ==========================================================
   COLORBLIND UTILITY CLASSES
   State indicators using shape + color + text
   ========================================================== */

/* Icons are added via ::before pseudo-elements
   so they're always paired with colors */

.indicator--ok::before     { content: "✓ "; }
.indicator--warning::before { content: "△ "; }
.indicator--danger::before  { content: "✕ "; }
.indicator--info::before    { content: "ℹ "; }
.indicator--active::before  { content: "● "; }