/* ============================================================
   theblockchainoracle — design tokens
   Drop this into any project as the root stylesheet.
   All component classes in components.css consume these vars.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* ---------- Colour ---------- */
  --tbo-ink:        #0E0E0C;   /* primary text, almond */
  --tbo-ink-90:    rgba(14,14,12,0.90);
  --tbo-ink-70:    rgba(14,14,12,0.70);
  --tbo-ink-55:    rgba(14,14,12,0.55);
  --tbo-ink-30:    rgba(14,14,12,0.30);
  --tbo-ink-12:    rgba(14,14,12,0.12);
  --tbo-ink-06:    rgba(14,14,12,0.06);

  --tbo-bone:       #F4F1EA;   /* primary surface */
  --tbo-bone-2:     #ECE8DF;   /* page background */
  --tbo-bone-3:     #E4E0D5;   /* divider/quiet */

  /* Vertical accents — one per sub-brand */
  --tbo-oxblood:    #722F37;   /* Predict */
  --tbo-lapis:      #1E3A8A;   /* Intelligence */
  --tbo-ochre:      #C9A14A;   /* Tokens */
  --tbo-terracotta: #B85C3C;   /* Crypto */
  --tbo-sage:       #5A6B4E;   /* Stable */
  --tbo-graphite:   #3B3B3B;   /* Regulatory */
  --tbo-forest:     #1F8A5B;   /* Data */
  --tbo-signal:     #3A4FC4;   /* Payments */

  /* Semantic */
  --tbo-accent:     var(--tbo-oxblood); /* default brand accent */
  --tbo-success:    var(--tbo-forest);
  --tbo-warning:    var(--tbo-ochre);
  --tbo-danger:     var(--tbo-oxblood);
  --tbo-info:       var(--tbo-signal);

  --tbo-bg:         var(--tbo-bone-2);
  --tbo-surface:    var(--tbo-bone);
  --tbo-surface-2:  #FBF8F1;
  --tbo-fg:         var(--tbo-ink);
  --tbo-fg-muted:   var(--tbo-ink-55);
  --tbo-border:     var(--tbo-ink-12);
  --tbo-border-strong: var(--tbo-ink-30);

  /* ---------- Type ---------- */
  --tbo-font-display: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tbo-font-body:    "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tbo-font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Display scale — for headings (DM Sans 500/600, tight tracking) */
  --tbo-fs-display-xl: 96px;
  --tbo-fs-display-l:  72px;
  --tbo-fs-display-m:  56px;
  --tbo-fs-display-s:  40px;

  --tbo-fs-h1: 40px;
  --tbo-fs-h2: 32px;
  --tbo-fs-h3: 24px;
  --tbo-fs-h4: 20px;

  --tbo-fs-body-l: 18px;
  --tbo-fs-body:   16px;
  --tbo-fs-body-s: 14px;

  --tbo-fs-caption: 12px;
  --tbo-fs-micro:   11px;

  --tbo-lh-display: 0.95;
  --tbo-lh-heading: 1.15;
  --tbo-lh-body:    1.55;
  --tbo-lh-tight:   1.25;

  --tbo-tracking-display: -0.035em;
  --tbo-tracking-heading: -0.02em;
  --tbo-tracking-body:    -0.005em;
  --tbo-tracking-caption: 0.14em;   /* uppercase eyebrow */

  --tbo-fw-regular: 400;
  --tbo-fw-medium:  500;
  --tbo-fw-semi:    600;
  --tbo-fw-bold:    700;

  /* ---------- Spacing (4px base) ---------- */
  --tbo-space-0:  0;
  --tbo-space-1:  4px;
  --tbo-space-2:  8px;
  --tbo-space-3:  12px;
  --tbo-space-4:  16px;
  --tbo-space-5:  20px;
  --tbo-space-6:  24px;
  --tbo-space-7:  32px;
  --tbo-space-8:  40px;
  --tbo-space-9:  56px;
  --tbo-space-10: 72px;
  --tbo-space-11: 96px;

  /* ---------- Radii ---------- */
  --tbo-radius-0: 0px;
  --tbo-radius-1: 4px;
  --tbo-radius-2: 8px;
  --tbo-radius-3: 12px;
  --tbo-radius-4: 16px;
  --tbo-radius-pill: 999px;

  /* ---------- Borders ---------- */
  --tbo-border-1: 1px solid var(--tbo-border);
  --tbo-border-2: 1px solid var(--tbo-border-strong);

  /* ---------- Shadows (very restrained) ---------- */
  --tbo-shadow-1: inset 0 0 0 1px var(--tbo-border);
  --tbo-shadow-2: 0 1px 0 var(--tbo-ink-12), 0 0 0 1px var(--tbo-border);
  --tbo-shadow-3: 0 8px 24px -8px rgba(14,14,12,0.18), 0 1px 0 var(--tbo-border);

  /* ---------- Motion ---------- */
  --tbo-ease:      cubic-bezier(0.2, 0, 0, 1);
  --tbo-dur-fast:  120ms;
  --tbo-dur:       200ms;
  --tbo-dur-slow:  320ms;

  /* ---------- Layout ---------- */
  --tbo-container: 1200px;
  --tbo-gutter:    var(--tbo-space-6);

  color-scheme: light;
}

/* Dark scheme — swap surfaces only; accents keep their hue */
:root[data-theme="dark"],
.tbo-dark {
  --tbo-bg:        var(--tbo-ink);
  --tbo-surface:   #181816;
  --tbo-surface-2: #232320;
  --tbo-fg:        var(--tbo-bone);
  --tbo-fg-muted:  rgba(244,241,234,0.55);
  --tbo-border:    rgba(244,241,234,0.12);
  --tbo-border-strong: rgba(244,241,234,0.30);
  color-scheme: dark;
}

/* Vertical brand modifiers — apply on a section/page wrapper to switch accent */
.tbo-brand-general     { --tbo-accent: var(--tbo-ink); }
.tbo-brand-predict     { --tbo-accent: var(--tbo-oxblood); }
.tbo-brand-intelligence{ --tbo-accent: var(--tbo-lapis); }
.tbo-brand-tokens      { --tbo-accent: var(--tbo-ochre); }
.tbo-brand-crypto      { --tbo-accent: var(--tbo-terracotta); }
.tbo-brand-stable      { --tbo-accent: var(--tbo-sage); }
.tbo-brand-regulatory  { --tbo-accent: var(--tbo-graphite); }
.tbo-brand-data        { --tbo-accent: var(--tbo-forest); }
.tbo-brand-payments    { --tbo-accent: var(--tbo-signal); }

/* Page baseline */
html, body {
  background: var(--tbo-bg);
  color: var(--tbo-fg);
  font-family: var(--tbo-font-body);
  font-size: var(--tbo-fs-body);
  line-height: var(--tbo-lh-body);
  letter-spacing: var(--tbo-tracking-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}