/* ============================================================
   Wiseair Design System — Tokens
   Source: Wiseair Brand Guidelines (Inter typeface, dot-based
   mark, slate/azure palette) + dashboard codebase global.css
   ============================================================ */

@font-face {
  font-family: 'Inter';
  src: url('fonts/InterVariable.ttf') format('truetype-variations'),
       url('fonts/InterVariable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/InterVariable-Italic.ttf') format('truetype-variations'),
       url('fonts/InterVariable-Italic.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- Brand color palette (page 30) ---------- */
  --wa-black:      #1D2130;  /* Brand Black — refined, hint of blue */
  --wa-slate:      #383F5D;  /* Brand Slate — logo color, dark grey */
  --wa-blue:       #586CC9;  /* Bright Blue — vibrant accent */
  --wa-azure:      #D6E6FF;  /* Light Blue — soft, approachable */
  --wa-light-grey: #ECEFF2;  /* Light Grey — neutral surface */
  --wa-white:      #FAFAFA;  /* Brand White — base background */
  --wa-pure-white: #FFFFFF;

  /* ---------- Semantic surfaces (light) ---------- */
  --background:           var(--wa-white);
  --foreground:           var(--wa-black);
  --fg-1:                 var(--wa-black);  /* primary text */
  --fg-2:                 var(--wa-slate);  /* secondary text / muted */
  --fg-3:                 #6b7280;          /* tertiary / placeholder */
  --bg-1:                 var(--wa-white);
  --bg-2:                 var(--wa-light-grey);
  --bg-3:                 var(--wa-pure-white);
  --card:                 var(--wa-white);
  --card-foreground:      var(--wa-black);
  --popover:              var(--wa-white);
  --popover-foreground:   var(--wa-black);
  --primary:              var(--wa-slate);
  --primary-foreground:   var(--wa-white);
  --secondary:            var(--wa-light-grey);
  --secondary-foreground: var(--wa-black);
  --muted:                var(--wa-light-grey);
  --muted-foreground:     var(--wa-slate);
  --accent:               var(--wa-azure);
  --accent-foreground:    var(--wa-black);
  --border:               var(--wa-light-grey);
  --input:                var(--wa-light-grey);
  --ring:                 var(--wa-blue);

  /* ---------- Status colors (dashboard) ---------- */
  --destructive:           #ef4444;
  --destructive-foreground: var(--wa-white);
  --warning:               #ffb366;
  --warning-foreground:    #1f1300;
  --success:               #22c55e;
  --success-foreground:    #f0fdf4;
  --info:                  var(--wa-blue);

  /* ---------- Data viz / chart palette ---------- */
  --chart-1: var(--wa-blue);
  --chart-2: var(--wa-slate);
  --chart-3: var(--wa-azure);
  --chart-4: var(--wa-light-grey);
  --chart-5: var(--wa-black);

  /* category colors used in dashboard (mobility measures) */
  --cat-carpooling:        #10b981; /* emerald */
  --cat-car-sharing:       #0ea5e9; /* sky */
  --cat-bike-sharing:      #f59e0b; /* amber */
  --cat-bike-to-work:      #84cc16; /* lime */
  --cat-shuttle:           #f43f5e; /* rose */
  --cat-public-transport:  #6366f1; /* indigo */
  --cat-scooter:           #14b8a6; /* teal */
  --cat-moped:             #ec4899; /* pink */
  --cat-other:             #64748b; /* slate */

  /* ---------- Typography ---------- */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale — Minor Third (1.200), 16px base, per page 26 */
  --fs-13: 0.8125rem;  /* 13px — caption */
  --fs-16: 1rem;       /* 16px — body */
  --fs-19: 1.1875rem;  /* 19px */
  --fs-23: 1.4375rem;  /* 23px */
  --fs-28: 1.75rem;    /* 28px */
  --fs-33: 2.0625rem;  /* 33px */
  --fs-40: 2.5rem;     /* 40px */
  --fs-48: 3rem;       /* 48px */
  --fs-60: 3.75rem;    /* 60px */
  --fs-76: 4.75rem;    /* 76px */
  --fs-90: 5.625rem;   /* 90px — display */

  /* Font weight roles (per Brand Guidelines page 27) */
  --fw-light:   300;  /* titles — elegant, airy */
  --fw-regular: 400;  /* body, captions */
  --fw-medium:  500;
  --fw-bold:    700;  /* CTAs — draw attention */

  /* Line heights */
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* Letter spacing — payoff uses 4% (page 16) */
  --ls-tight:   -0.02em;
  --ls-normal:  0;
  --ls-payoff:  0.04em;
  --ls-wide:    0.08em;

  /* ---------- Radii ---------- */
  --radius:    0.5rem;     /* 8px — base (shadcn lg token) */
  --radius-sm: 0.25rem;    /* 4px */
  --radius-md: 0.375rem;   /* 6px */
  --radius-lg: 0.5rem;     /* 8px */
  --radius-xl: 0.75rem;    /* 12px — StatusCard */
  --radius-2xl: 1rem;
  --radius-pill: 9999px;

  /* ---------- Spacing (4px base scale) ---------- */
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.25rem;  /* 20 */
  --space-6: 1.5rem;   /* 24 */
  --space-8: 2rem;     /* 32 */
  --space-10: 2.5rem;  /* 40 */
  --space-12: 3rem;    /* 48 */
  --space-16: 4rem;    /* 64 */

  /* ---------- Elevation ---------- */
  --shadow-xs: 0 1px 2px rgba(29, 33, 48, 0.04);
  --shadow-sm: 0 1px 3px rgba(29, 33, 48, 0.05), 0 1px 2px rgba(29, 33, 48, 0.03);
  --shadow-md: 0 4px 12px rgba(29, 33, 48, 0.06), 0 1px 3px rgba(29, 33, 48, 0.04);
  --shadow-lg: 0 10px 32px rgba(29, 33, 48, 0.08), 0 2px 6px rgba(29, 33, 48, 0.04);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.02);
  --shadow-focus: 0 0 0 3px rgba(88, 108, 201, 0.18);

  /* ---------- Motion ---------- */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   150ms;
  --dur-normal: 200ms;
  --dur-slow:   300ms;

  /* ---------- Layout — 12-col grid (page 38) ---------- */
  --grid-cols: 12;
  --grid-margin: 3%;
  --grid-gutter: 1.5%;
}

.dark {
  --background:           var(--wa-black);
  --foreground:           var(--wa-white);
  --fg-1:                 var(--wa-white);
  --fg-2:                 var(--wa-azure);
  --fg-3:                 #94a3b8;
  --bg-1:                 var(--wa-black);
  --bg-2:                 var(--wa-slate);
  --bg-3:                 #2a3045;
  --card:                 var(--wa-slate);
  --card-foreground:      var(--wa-white);
  --popover:              var(--wa-slate);
  --popover-foreground:   var(--wa-white);
  --primary:              var(--wa-blue);
  --primary-foreground:   var(--wa-white);
  --secondary:            var(--wa-slate);
  --secondary-foreground: var(--wa-azure);
  --muted:                var(--wa-slate);
  --muted-foreground:     var(--wa-azure);
  --accent:               var(--wa-blue);
  --accent-foreground:    var(--wa-white);
  --border:               var(--wa-slate);
  --input:                var(--wa-slate);
  --ring:                 var(--wa-azure);
}

/* ============================================================
   Semantic typography classes
   ============================================================ */
body, .wa-body {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wa-display { font-size: var(--fs-90); font-weight: var(--fw-light); line-height: var(--lh-tight);  letter-spacing: var(--ls-tight); }
.wa-h1      { font-size: var(--fs-60); font-weight: var(--fw-light); line-height: var(--lh-tight);  letter-spacing: var(--ls-tight); }
.wa-h2      { font-size: var(--fs-40); font-weight: var(--fw-light); line-height: var(--lh-snug);   letter-spacing: -0.01em; }
.wa-h3      { font-size: var(--fs-28); font-weight: var(--fw-light); line-height: var(--lh-snug); }
.wa-h4      { font-size: var(--fs-23); font-weight: var(--fw-regular); line-height: var(--lh-snug); }
.wa-title   { font-size: var(--fs-19); font-weight: var(--fw-regular); line-height: var(--lh-snug); }
.wa-body-lg { font-size: var(--fs-19); font-weight: var(--fw-regular); line-height: var(--lh-normal); }
.wa-body    { font-size: var(--fs-16); font-weight: var(--fw-regular); line-height: var(--lh-normal); }
.wa-body-sm { font-size: var(--fs-13); font-weight: var(--fw-regular); line-height: var(--lh-normal); color: var(--fg-2); }
.wa-caption { font-size: var(--fs-13); font-weight: var(--fw-regular); line-height: var(--lh-snug); color: var(--fg-2); }
.wa-cta     { font-size: var(--fs-16); font-weight: var(--fw-bold); letter-spacing: 0.01em; }
.wa-payoff  { font-weight: var(--fw-light); letter-spacing: var(--ls-payoff); }
.wa-mono    { font-family: var(--font-mono); font-size: var(--fs-13); }