/* BaseBotics Design System - Colors & Typography */

/* Webfonts: IBM Plex Serif (display) + IBM Plex Mono (body/UI) */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,300;0,400;0,500;0,600;1,400&family=IBM+Plex+Serif:ital,wght@0,400;0,600;1,400&display=swap');

:root {
  /* ---------- COLOR TOKENS ---------- */

  /* Backgrounds */
  --bg-0: #080A0F;          /* Deep Black - primary canvas */
  --bg-1: #0D1017;          /* Elevated Dark - secondary surface */
  --bg-2: #111620;          /* Card Dark - tertiary surface */

  /* Foregrounds */
  --fg-1: #E8EAED;          /* Warm white - primary text */
  --fg-2: #B8BFC9;          /* Secondary body — lighter for dark-bg readability */
  --fg-3: #8E96A6;          /* Captions / fine print — above old #6B7280, still below fg-2 */
  --fg-max: #FFFFFF;        /* Pure white - rare emphasis */
  --fg-shadow: #000000;     /* True black - shadows only */

  /* Accents */
  --accent: #2ECC71;        /* Emerald green - primary CTA */
  --accent-deep: #27AE60;   /* Deep green - hover */
  --accent-pressed: #219A52;/* Pressed */
  --accent-amber: #F39C12;  /* Warm amber - warning/secondary */
  --accent-blue: #3498DB;   /* Signal blue - info/data */
  --accent-purple: #A78BFA; /* Violet - flow / data viz */
  --accent-red: #E74C3C;    /* Negative red - errors */

  /* Surfaces & overlays */
  --border: rgba(255, 255, 255, 0.06);
  --border-accent: rgba(46, 204, 113, 0.25);
  --glass: rgba(13, 16, 23, 0.55);
  --tint-accent-soft: rgba(46, 204, 113, 0.03);
  --tint-accent-mid: rgba(46, 204, 113, 0.06);
  --tint-accent-badge: rgba(46, 204, 113, 0.12);

  /* Semantic aliases */
  --positive: var(--accent);
  --warning: var(--accent-amber);
  --negative: var(--accent-red);
  --info: var(--accent-blue);

  /* ---------- TYPOGRAPHY TOKENS ---------- */
  --font-display: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', 'Courier New', monospace;

  /* Type scale */
  --t-display-size: 58px;   --t-display-lh: 64px;   --t-display-ls: -0.03em;
  --t-h2-size: 36px;        --t-h2-lh: 40px;        --t-h2-ls: -0.02em;
  --t-h3-size: 20px;        --t-h3-lh: 30px;
  --t-large-size: 20px;     --t-large-lh: 25px;
  --t-body-size: 14px;      --t-body-lh: 21px;
  --t-button-size: 14px;    --t-button-lh: 21px;    --t-button-ls: 0.02em;
  --t-badge-size: 11px;     --t-badge-lh: 16px;     --t-badge-ls: 0.15em;
  --t-input-size: 13px;     --t-input-lh: 20px;
  --t-caption-size: 11px;   --t-caption-lh: 16px;   --t-caption-ls: 0.05em;
  --t-data-size: 42px;      --t-data-lh: 48px;      --t-data-ls: -0.03em;

  /* ---------- SPACING ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 28px; --s-8: 32px;
  --s-10: 40px; --s-12: 48px; --s-14: 56px; --s-16: 64px;
  --s-20: 80px; --s-30: 120px;

  /* ---------- RADII ---------- */
  --r-badge: 4px;
  --r-nav: 6px;
  --r-button: 8px;
  --r-card: 12px;
  --r-feature: 16px;

  /* ---------- ELEVATION ---------- */
  --shadow-sm: 0px 2px 6px rgba(0, 0, 0, 0.16);
  --shadow-md: 0px 3px 10px rgba(0, 0, 0, 0.24);
  --shadow-lg: 0px 4px 20px rgba(46, 204, 113, 0.3);
  --shadow-xl: 0px 8px 32px rgba(46, 204, 113, 0.25);

  /* ---------- MOTION ---------- */
  --ease-micro: 0.2s ease;
  --ease-component: 0.3s ease;
  --ease-reveal: 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- SEMANTIC ELEMENT STYLES ---------- */

html, body {
  background: var(--bg-0);
  color: var(--fg-1);
  font-family: var(--font-mono);
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-display-size);
  line-height: var(--t-display-lh);
  letter-spacing: var(--t-display-ls);
  color: var(--fg-1);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-h2-size);
  line-height: var(--t-h2-lh);
  letter-spacing: var(--t-h2-ls);
  color: var(--fg-1);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--t-h3-size);
  line-height: var(--t-h3-lh);
  color: var(--fg-1);
  margin: 0;
}

p, .body {
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  color: var(--fg-2);
}

.large {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-large-size);
  line-height: var(--t-large-lh);
  color: var(--fg-1);
}

.caption {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--t-caption-size);
  line-height: var(--t-caption-lh);
  letter-spacing: var(--t-caption-ls);
  color: var(--fg-3);
}

.label {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.data-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--t-data-size);
  line-height: var(--t-data-lh);
  letter-spacing: var(--t-data-ls);
  color: var(--accent);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: var(--t-body-size);
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--ease-micro);
}
a:hover { color: var(--accent-deep); text-decoration: underline; }

em, .accent-italic {
  font-style: italic;
  color: var(--accent);
}