/* ============================================================
   METER Design System — colors & type foundations
   Source of truth: Library [METER] 2.fig
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("fonts/NunitoSans.ttf") format("truetype-variations"),
       url("fonts/NunitoSans.ttf") format("truetype");
}
@font-face {
  font-family: "Nunito Sans";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("fonts/NunitoSans-Italic.ttf") format("truetype-variations"),
       url("fonts/NunitoSans-Italic.ttf") format("truetype");
}
/* Nunito Sans is the sole type family across the system (display, body, UI, labels). */

:root {
  /* ---------- Brand palette ---------- */
  --meter-purple-900: #390050;   /* Brand primary — logo, primary buttons, border-primary */
  --meter-purple-700: #780DA3;   /* Accent / neutral text (on light neutral fill) */
  --meter-purple-500: #8A38F5;   /* Helper / guides (used in figma dashed guides) */
  --meter-purple-400: #9747FF;   /* Helper / guides */
  --meter-violet-600: #4A00FF;   /* Secondary electric accent (spacing / radius guides) */
  --meter-violet-100: #D1DBFF;   /* Fill for accent demo surfaces */

  /* ---------- Neutrals ---------- */
  --meter-ink:        #08020B;   /* text-primary — near-black w/ violet hint */
  --meter-ink-2:      #0B0706;   /* text-primary alt (headlines) */
  --meter-ink-3:      #0D0D11;   /* modal-linear deep */
  --meter-black:      #000000;
  --meter-white:      #FFFFFF;
  --meter-mist:       #FBFAFC;   /* surface-secondary — near-white w/ violet cast */
  --meter-mist-2:     #FEFDFC;   /* surface / page background */
  --meter-lavender-50:#F6F2F8;   /* surface tint */
  --meter-lavender-100:#F1ECF2;  /* soft divider / chip bg */
  --meter-lavender-200:#E2E2E9;  /* border — light */
  --meter-lavender-300:#D7D3D8;  /* border — default */
  --meter-lavender-500:#A5A2A6;  /* text-secondary */
  --meter-slate-700:  #1F2937;   /* line — outline on cells */

  /* ---------- Status ---------- */
  --meter-success:    #2CC790;   /* status-success */
  --meter-warning:    #F9CE52;   /* status-warning */
  --meter-error:      #F45760;   /* status-error */

  /* ---------- Semantic — Surface ---------- */
  --surface-primary:   var(--meter-white);
  --surface-secondary: var(--meter-mist);
  --surface-brand:     var(--meter-purple-900);
  --surface-muted:     var(--meter-lavender-50);

  /* ---------- Semantic — Text ---------- */
  --text-primary:   var(--meter-ink);
  --text-secondary: var(--meter-lavender-500);
  --text-invert:    var(--meter-mist);
  --text-brand:     var(--meter-purple-900);
  --text-link:      var(--meter-purple-700);

  /* ---------- Semantic — Border ---------- */
  --border-primary:   var(--meter-purple-900);
  --border-secondary: var(--meter-lavender-300);
  --border-ghost:     var(--meter-lavender-100);

  /* ---------- Semantic — Modal / Overlay ---------- */
  --modal-scrim-30:  rgba(13,13,17,0.20);
  --modal-linear:    linear-gradient(180deg, rgba(13,13,17,0) 56%, rgba(13,13,17,0.8) 100%);
  --glass-tint:      rgba(251,250,252,0.08); /* Glass-Effect surface (iOS-style) */

  /* ---------- Radii (from Layout & Spacing frame) ---------- */
  --radius-xs:  5px;    /* dashed guide containers */
  --radius-sm:  8px;    /* small chips / pagination items */
  --radius-md:  16px;   /* inputs, small cards */
  --radius-lg:  20px;   /* buttons, cards, glass */
  --radius-xl:  30.4px; /* tailwind 7.6× scale used in guide */
  --radius-pill:9999px;

  /* ---------- Spacing (Tailwind scale, 4px base) ---------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;   /* Card padding (Card main, Glass) */
  --space-8:  32px;
  --space-10: 40px;   /* column gutter */
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-32: 128px;  /* Page gutter in docs frames */

  /* ---------- Shadow / Elevation ---------- */
  --shadow-card-lg:
    0 8px 10px -6px rgba(0,0,0,0.10),
    0 20px 25px -5px rgba(0,0,0,0.10); /* from Layout frame */
  --shadow-sm: 0 1px 2px rgba(8,2,11,0.06);
  --shadow-md: 0 4px 12px rgba(8,2,11,0.08);
  --shadow-glow-brand: 0 10px 30px -10px rgba(57,0,80,0.35);

  /* ---------- Typography — families ---------- */
  /* Single-family system. Nunito Sans across display, body, UI and labels. */
  --font-display: "Nunito Sans", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-body:    "Nunito Sans", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-ui:      "Nunito Sans", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-doc:     "Nunito Sans", system-ui, -apple-system, Segoe UI, sans-serif;

  /* ---------- Type tokens (web) ---------- */
  --lh-tight: 1.2;
  --lh-body:  1.45;
  --lh-loose: 1.6;

  /* Display scale — Nunito Sans Bold/SemiBold */
  --fs-h0: 64px;  /* Nunito Sans SemiBold 64 */
  --fs-h1: 40px;
  --fs-h2: 32px;
  --fs-h3: 28px;
  --fs-h4: 24px;
  --fs-h5: 20px;
  --fs-h6: 18px;

  /* Body scale — Nunito Sans Regular */
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-body-sm: 14px;
  --fs-caption: 12px;

  /* UI scale — Jost */
  --fs-btn-lg: 18px;
  --fs-btn-md: 16px;
  --fs-btn-sm: 14px;
  --fs-btn-xs: 12px;
}

/* ---------- Semantic element defaults ---------- */
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background: var(--surface-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -0.01em; color: var(--text-primary); }
h2, .h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-tight); letter-spacing: -0.01em; }
h3, .h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); line-height: var(--lh-tight); }
h4, .h4 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4); line-height: var(--lh-tight); }
h5, .h5 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h5); line-height: var(--lh-tight); }
h6, .h6 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h6); line-height: var(--lh-tight); }

.h0 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h0); line-height: var(--lh-tight); letter-spacing: -0.02em; }

p, .body { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-primary); }
.body-lg { font-size: var(--fs-body-lg); }
.body-sm { font-size: var(--fs-body-sm); }
.caption { font-size: var(--fs-caption); line-height: var(--lh-tight); color: var(--text-secondary); }

.kicker {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--fs-btn-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-brand);
}

.ui      { font-family: var(--font-ui); font-weight: 600; }
.ui-bold { font-family: var(--font-ui); font-weight: 700; }

a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--meter-purple-900); text-decoration: underline; }