/* ============================================================
   Leobit Internal Tools — Foundations (design tokens)
   Adapted from the Leobit design system (colors_and_type.css).
   Bundled Source Sans Pro (latin, OFL) — Futura falls back to the sans stack.
   ============================================================ */

@font-face {
  font-family: "Source Sans Pro"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("fonts/source-sans-pro-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans Pro"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("fonts/source-sans-pro-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans Pro"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("fonts/source-sans-pro-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans Pro"; font-weight: 900; font-style: normal; font-display: swap;
  src: url("fonts/source-sans-pro-latin-900-normal.woff2") format("woff2");
}

:root {
  /* ---------- Brand primaries (gradient green) ---------- */
  --leobit-green-start: #97CF00;
  --leobit-green-end:   #24B400;
  --leobit-green:       #60B23A;
  --brand-gradient: linear-gradient(90deg, #97CF00 0%, #24B400 100%);

  /* Green tints */
  --green-20: #EAF5CC; --green-30: #D3F0CC; --green-70: #97CF00; --green-100: #24B400;

  /* Data-viz accents */
  --blue-100: #4AA0B5; --blue-bg: #EDF6F8;
  --red-100: #DB423B; --yellow-100: #DFB300; --yellow-100-dark: #F9C700;
  --link-blue: #3F77E6;

  /* Black palette (light) */
  --black-100:#0F0F0F; --black-90:#1E1E1E; --black-80:#4B4B4B; --black-70:#626262;
  --black-60:#787878; --black-50:#8E8E8E; --black-40:#A5A5A5; --black-30:#BCBCBC; --black-20:#D2D2D2;

  /* White / grey */
  --white:#FFFFFF; --grey-100:#F5F5F5; --grey-200:#E9E9E9; --grey-300:#E7E7E7;

  /* Semantic — light (default) */
  --bg: var(--white); --bg-muted: var(--grey-100); --bg-elevated: var(--white); --bg-inverse: var(--black-90);
  --fg: var(--black-90); --fg-muted: var(--black-50); --fg-subtle: var(--black-40);
  --fg-disabled: var(--black-30); --fg-inverse: var(--white); --fg-on-brand: var(--white);
  --border: var(--black-20); --border-strong: var(--black-90); --border-muted: var(--grey-200);
  --accent: var(--leobit-green-end); --accent-soft: var(--green-20);
  --success-bg: var(--green-30); --success-fg: var(--leobit-green-end);
  --warning-bg: #FEF7DB; --warning-fg: var(--yellow-100);
  --danger-bg: #FBE5E4; --danger-fg: var(--red-100);
  --info-bg: var(--blue-bg); --info-fg: var(--blue-100);

  /* Grade palette (matches the design's GRADE map) */
  --grade-a-bg:#E6F6E0; --grade-a-fg:#14660A;
  --grade-b-bg:#EEF7DC; --grade-b-fg:#3F6B12;
  --grade-c-bg:#FDF4D6; --grade-c-fg:#7A5E00;
  --grade-d-bg:#FBEBDB; --grade-d-fg:#8A4408;
  --grade-f-bg:#FBE5E4; --grade-f-fg:#97231E;

  /* Spacing / radii / borders */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px;
  --radius-0:0px; --radius-sm:5px; --radius-pill:999px; --border-w:1px;

  --shadow-sm:0 1px 2px rgba(0,0,0,0.08);
  --shadow-md:0 2px 8px rgba(0,0,0,0.08),0 1px 2px rgba(0,0,0,0.15);
  --shadow-lg:0 8px 24px rgba(0,0,0,0.15),0 2px 4px rgba(0,0,0,0.24);

  /* Type */
  --font-sans: "Source Sans Pro","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-display: "Futura Now Headline","Futura","Source Sans Pro",system-ui,sans-serif;
  --font-mono: ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

  --ease-out: cubic-bezier(0.2,0.8,0.2,1);
  --dur-fast:120ms; --dur-base:200ms;
}

/* ---------- Dark theme (explicit or auto) ---------- */
:root[data-theme="dark"], .leobit-dark {
  --bg:#1E1E1E; --bg-muted:#161616; --bg-elevated:#1B1B1B; --bg-inverse:#FFFFFF;
  --fg:#FFFFFF; --fg-muted:#9F9F9F; --fg-subtle:#6F6F6F; --fg-disabled:#575757;
  --fg-inverse:#1E1E1E; --fg-on-brand:#FFFFFF;
  --border:#3F3F3F; --border-strong:#FFFFFF; --border-muted:#1A1A1A;
  --accent-soft:rgba(36,180,0,0.15);
  --success-bg:rgba(36,180,0,0.2); --warning-bg:rgba(249,199,0,0.18); --warning-fg:var(--yellow-100-dark);
  --danger-bg:rgba(219,66,59,0.18); --info-bg:rgba(74,160,181,0.2);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg:#1E1E1E; --bg-muted:#161616; --bg-elevated:#1B1B1B; --bg-inverse:#FFFFFF;
    --fg:#FFFFFF; --fg-muted:#9F9F9F; --fg-subtle:#6F6F6F; --fg-disabled:#575757;
    --fg-inverse:#1E1E1E; --fg-on-brand:#FFFFFF;
    --border:#3F3F3F; --border-strong:#FFFFFF; --border-muted:#1A1A1A;
    --accent-soft:rgba(36,180,0,0.15);
    --success-bg:rgba(36,180,0,0.2); --warning-bg:rgba(249,199,0,0.18); --warning-fg:var(--yellow-100-dark);
    --danger-bg:rgba(219,66,59,0.18); --info-bg:rgba(74,160,181,0.2);
  }
}

/* ---------- Grade badge helper (shared) ---------- */
.leo-grade { display:inline-flex; align-items:center; justify-content:center; font-weight:700; }
.leo-grade.g-a { background:var(--grade-a-bg); color:var(--grade-a-fg); }
.leo-grade.g-b { background:var(--grade-b-bg); color:var(--grade-b-fg); }
.leo-grade.g-c { background:var(--grade-c-bg); color:var(--grade-c-fg); }
.leo-grade.g-d { background:var(--grade-d-bg); color:var(--grade-d-fg); }
.leo-grade.g-f { background:var(--grade-f-bg); color:var(--grade-f-fg); }
.leo-grade.g-none { background:var(--grey-200); color:var(--fg-subtle); }