/* =====================================================================
   BLISS ADMIN OPS · Design System — colors_and_type.css
   Theme: "Buzul" (light, cool, airy) · futuristic 8-bit
   Surface: internal e-scooter operations platform (bliss-admin-ops.com)
   Load this file FIRST, before any component stylesheet.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700;800&display=swap');

:root {
  /* ---- Type families ---- */
  --font-display: 'Press Start 2P', monospace;   /* pixel face — wordmark + tiny eyebrows ONLY */
  --font-sans:    'Space Grotesk', system-ui, -apple-system, sans-serif; /* UI + body + headings */
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;             /* numbers, IDs, data */

  /* ---- Type scale (px) ---- */
  --h1-size: 26px;  --h1-weight: 700;  --h1-tracking: -0.5px;
  --h2-size: 20px;  --h2-weight: 700;  --h2-tracking: -0.3px;
  --h3-size: 16px;  --h3-weight: 700;  --h3-tracking: -0.2px;
  --h4-size: 13.5px;--h4-weight: 700;  --h4-tracking: 0;
  --body-size: 14px;        --body-weight: 500;
  --body-sm-size: 12.5px;   --body-sm-weight: 500;
  --caption-size: 11px;     --caption-weight: 600;
  --label-size: 10.5px;     --label-weight: 700;   --overline-tracking: 1.4px;
  --button-size: 13px;      --button-weight: 700;

  /* ---- Brand / core color (Buzul) ---- */
  --bls-bg:        #E7F0F5;  /* cool page background */
  --bls-bg-grid:   rgba(20,56,78,.03); /* faint pixel-grid overlay tint */
  --bls-panel:     #FFFFFF;  /* card / surface fill */
  --bls-panel-2:   #F4F9FB;  /* inset / subtle fill */

  --bls-ink:       #14384E;  /* primary text + structural borders */
  --bls-ink-2:     #5E7B8A;  /* secondary text */
  --bls-ink-3:     #90A7B4;  /* faint / placeholder */
  --bls-line:      #D3E2EB;  /* default borders / dividers */
  --bls-line-2:    #E6F0F5;  /* lightest hairline */

  /* accent — teal/cyan, the "futuristic" signal color */
  --bls-accent:      #1FA6C6;
  --bls-accent-deep: #157E97; /* hover / pressed accent */
  --bls-accent-soft: #D6EEF4; /* tinted fills, hovers, active nav */

  /* gold — from the logo "B"; secondary highlight, reward/charge states */
  --bls-gold:      #E9A92B;
  --bls-gold-deep: #C98E1C;
  --bls-gold-soft: #F8EACB;

  /* powder — from the logo shield; brand washes / hero surfaces */
  --bls-powder:      #9FD0E8;
  --bls-powder-soft: #DCEFF7;

  /* ---- Semantic state color ---- */
  --bls-ok:    #1F9E78;  --bls-ok-bg:   #DAF1E8;
  --bls-warn:  #D9941F;  --bls-warn-bg: #F7EBCF;
  --bls-low:   #DD7A2A;  --bls-low-bg:  #F7E2D0;  /* low battery / attention */
  --bls-err:   #D14640;  --bls-err-bg:  #F7DCDB;
  --bls-info:  #1FA6C6;  --bls-info-bg: #D6EEF4;

  /* battery ramp (segmented meters) */
  --bls-batt-full: #1F9E78;
  --bls-batt-mid:  #D9941F;
  --bls-batt-low:  #DD7A2A;
  --bls-batt-dead: #D14640;
  --bls-batt-off:  #CBDDE8;

  /* ---- Spacing (8pt grid) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;

  /* ---- Radius — square is the 8-bit signature. Keep near-zero. ---- */
  --r-0: 0px;     /* default: pixel-sharp corners */
  --r-xs: 2px;    /* faint softening — chips/inputs only if needed */
  --r-sm: 3px;
  --pixel-step: 4px; /* notch size for stepped/pixel-corner clips */

  /* ---- Borders ---- */
  --bw: 2px;          /* default structural border width */
  --bw-thin: 1.5px;   /* hairline dividers, badge outlines */

  /* ---- Hard pixel shadows (no blur — offset block) ---- */
  --sh-sm: 2px 2px 0 rgba(20,56,78,.10);
  --sh:    3px 3px 0 rgba(20,56,78,.12);
  --sh-md: 4px 4px 0 rgba(20,56,78,.14);
  --sh-lg: 6px 6px 0 rgba(20,56,78,.16);
  --sh-xl: 0 14px 40px rgba(20,56,78,.22); /* modals only — soft for elevation */
  --ring:  0 0 0 3px rgba(31,166,198,.28); /* focus ring */

  /* ---- Motion ---- */
  --ease: cubic-bezier(.22, 1, .36, 1);  /* house curve */
  --ease-snap: cubic-bezier(.3, .9, .3, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 380ms;
}

/* =====================================================================
   BASE / RESET (scope under .bls-root so it never leaks to host chrome)
   ===================================================================== */
.bls-root, .bls-root * { box-sizing: border-box; }
.bls-root {
  font-family: var(--font-sans);
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  color: var(--bls-ink);
  background: var(--bls-bg);
  /* faint pixel grid that ties the whole brand to the 8-bit motif */
  background-image:
    linear-gradient(var(--bls-bg-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--bls-bg-grid) 1px, transparent 1px);
  background-size: 9px 9px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.bls-root img { image-rendering: pixelated; } /* logo + pixel art stay crisp */

/* =====================================================================
   SEMANTIC TYPE
   ===================================================================== */
.bls-wordmark { font-family: var(--font-display); letter-spacing: .5px; line-height: 1; }
.bls-eyebrow  { font-family: var(--font-display); font-size: 7px; letter-spacing: 2px;
                color: var(--bls-accent); text-transform: uppercase; }

.bls-h1 { font-family: var(--font-sans); font-size: var(--h1-size); font-weight: var(--h1-weight); letter-spacing: var(--h1-tracking); line-height: 1.15; margin: 0; }
.bls-h2 { font-family: var(--font-sans); font-size: var(--h2-size); font-weight: var(--h2-weight); letter-spacing: var(--h2-tracking); line-height: 1.2;  margin: 0; }
.bls-h3 { font-family: var(--font-sans); font-size: var(--h3-size); font-weight: var(--h3-weight); letter-spacing: var(--h3-tracking); line-height: 1.25; margin: 0; }
.bls-h4 { font-family: var(--font-sans); font-size: var(--h4-size); font-weight: var(--h4-weight); line-height: 1.3; margin: 0; }

.bls-body   { font-size: var(--body-size); font-weight: var(--body-weight); line-height: 1.5; }
.bls-body-sm{ font-size: var(--body-sm-size); font-weight: var(--body-sm-weight); line-height: 1.45; }
.bls-muted  { color: var(--bls-ink-2); }
.bls-caption{ font-size: var(--caption-size); font-weight: var(--caption-weight); color: var(--bls-ink-2); }

/* ALL-CAPS section label — sits above fields & card headers */
.bls-label  { font-size: var(--label-size); font-weight: var(--label-weight);
              letter-spacing: var(--overline-tracking); text-transform: uppercase; color: var(--bls-ink-2); }

/* monospace data — IDs, counts, percentages, timestamps */
.bls-mono   { font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums; }
.bls-num    { font-family: var(--font-mono); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.5px; }

/* =====================================================================
   ANIMATION LIBRARY
   Retro feel = mix the house ease with hard steps() for "digital" motion.
   ===================================================================== */
@keyframes bls-fade-up   { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes bls-fade-in   { from { opacity: 0; } to { opacity: 1; } }
@keyframes bls-slide-left{ from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
@keyframes bls-pop       { 0% { opacity: 0; transform: scale(.7); } 70% { transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }
@keyframes bls-modal-in  { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes bls-toast-in  { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes bls-overlay-in{ from { opacity: 0; } to { opacity: 1; } }

/* digital / 8-bit motions — stepped, choppy on purpose */
@keyframes bls-blink     { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }          /* use steps(1) */
@keyframes bls-spin-step { to { transform: rotate(360deg); } }                         /* use steps(8) */
@keyframes bls-pulse     { 0% { box-shadow: 0 0 0 0 rgba(31,166,198,.45); } 100% { box-shadow: 0 0 0 10px rgba(31,166,198,0); } }
@keyframes bls-pulse-err { 0% { box-shadow: 0 0 0 0 rgba(209,70,64,.45); } 100% { box-shadow: 0 0 0 10px rgba(209,70,64,0); } }
@keyframes bls-seg-fill  { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* use steps(N) */
@keyframes bls-scan      { from { background-position-y: 0; } to { background-position-y: 4px; } }
@keyframes bls-bar-grow  { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes bls-shimmer   { from { background-position: -200% 0; } to { background-position: 200% 0; } }
@keyframes bls-bounce-y  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* utility entry classes */
.bls-anim-up    { animation: bls-fade-up var(--dur-slow) var(--ease) both; }
.bls-anim-in    { animation: bls-fade-in var(--dur) var(--ease) both; }
.bls-anim-left  { animation: bls-slide-left var(--dur-slow) var(--ease) both; }
.bls-anim-pop   { animation: bls-pop 260ms var(--ease-snap) both; }
/* stagger helpers — add .bls-stagger to a parent, set --i on children */
.bls-stagger > * { animation: bls-fade-up var(--dur-slow) var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }

@media (prefers-reduced-motion: reduce) {
  .bls-root *, .bls-root *::before, .bls-root *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}