/* ============================================================
   Ubongo Cloud 2.1 — Design Tokens
   Single source of truth for the visual system.
   ============================================================ */

:root {
  /* --- Fonts --- */
  --font-display: 'Archivo Black', sans-serif;      /* hero, H1 — can be ALL CAPS */
  --font-body:    'Plus Jakarta Sans', sans-serif;  /* everything else */
  --font-mono:    'JetBrains Mono', monospace;       /* code workspace only */

  /* --- Base: warm neutrals --- */
  --ink:    #101114;
  --cream:  #F7F3EC;   /* primary warm background */
  --paper:  #FFFFFF;   /* cards, work surfaces */
  --cloud:  #EFEAE1;   /* section backgrounds */
  --mist:   #D9D3C7;   /* borders, dividers */
  --muted:  #5E5E5E;   /* secondary text (darkened from #6B6B6B for AA contrast on cream) */

  /* --- Accent set --- */
  --indigo:   #5B5BE6;  /* primary brand accent, links, focus */
  --indigo-dark: #3F3FB0;
  --coral:    #F76C5E;  /* premium / warm highlights */
  --lavender: #B4A7F5;  /* soft fills, secondary data */
  --green:    #00A86B;  /* M-Pesa green — money / credits / success ONLY */
  --green-dark: #007A4E;
  --navy:     #2B2D5C;  /* deep data, contrast */
  --danger:   #E5484D;  /* errors, low balance */

  /* --- Model tier colors --- */
  --tier-cheap:    var(--indigo);
  --tier-balanced: var(--green);
  --tier-premium:  var(--coral);

  /* --- Shape & elevation --- */
  --radius-pill:  999px;   /* buttons, toggles, chips */
  --radius-card:  20px;    /* cards */
  --radius-input: 16px;    /* input fields */
  --radius-tile:  24px;    /* workspace icon tiles, modals */
  --shadow-soft:  0 2px 12px rgba(16,17,20,0.06);
  --shadow-lift:  0 6px 20px rgba(16,17,20,0.10);

  /* --- Layout metrics --- */
  --rail-w: 84px;
  --sidebar-w: 248px;
  --controls-w: 280px;
  --topbar-h: 68px;

  /* --- Type scale --- */
  --fs-hero: 64px;
  --fs-h1: 40px;
  --fs-h2: 28px;
  --fs-h3: 20px;
  --fs-body: 16px;
  --fs-small: 14px;

  /* --- Motion --- */
  --ease: cubic-bezier(.22,.61,.36,1);
}

@media (max-width: 768px) {
  :root {
    --fs-hero: 40px;
    --fs-h1: 28px;
  }
}

/* --- Base reset --- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 1; /* tabular figures for credits/prices */
}

h1, h2, h3, h4 { margin: 0 0 .4em; line-height: 1.15; }
.font-display { font-family: var(--font-display); }
.all-caps { text-transform: uppercase; letter-spacing: .01em; }

.hero-type { font-family: var(--font-display); font-size: var(--fs-hero); line-height: 1.02; text-transform: uppercase; }
.h1 { font-family: var(--font-display); font-size: var(--fs-h1); text-transform: uppercase; }
.h2 { font-weight: 700; font-size: var(--fs-h2); }
.h3 { font-weight: 600; font-size: var(--fs-h3); }
.small { font-size: var(--fs-small); }
.muted { color: var(--muted); }
.text-indigo { color: var(--indigo); }
.text-coral { color: var(--coral); }
.text-green { color: var(--green); }

a { color: var(--indigo); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font-family: inherit; }

:focus-visible { outline: 3px solid var(--indigo); outline-offset: 2px; }

img { max-width: 100%; display: block; }

/* utility */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.hidden { display: none !important; }