/* ============================================================
   طبت — Design Tokens v1
   Foundation file. Imported by every shell + page.
   ============================================================ */

:root {
  /* ─── Brand ───────────────────────────────────────────── */
  --tebt-blue:        #0038B2;
  --tebt-blue-700:    #002B8A;
  --tebt-blue-500:    #0038B2;
  --tebt-blue-400:    #2B5BC9;
  --tebt-blue-300:    #7E96D3;
  --tebt-blue-200:    #B8C6E8;
  --tebt-blue-100:    #E1E7F5;
  --tebt-blue-50:     #F1F4FB;

  --tebt-teal:        #0BCEC2;
  --tebt-teal-700:    #079B91;
  --tebt-teal-500:    #0BCEC2;
  --tebt-teal-300:    #5DE0D7;
  --tebt-teal-100:    #C8F4F1;
  --tebt-teal-50:     #E6FAF8;

  /* Logo plate (dark square with white ط) */
  --tebt-logo-bg:     #0F1530;
  --tebt-logo-fg:     #FFFFFF;

  /* ─── Neutrals (warm slate) ───────────────────────────── */
  --ink:              #14161C;
  --ink-2:            #1F222B;
  --charcoal:         #333740;
  --slate-700:        #3C404E;
  --slate-600:        #4B5063;
  --slate:            #5A6072;
  --slate-400:        #8A90A0;
  --mist:             #D8DAE2;
  --cloud:            #ECEDF1;
  --paper-2:          #FAFAF8;
  --paper:            #F6F6F4;
  --white:            #FFFFFF;

  /* Semantic surfaces */
  --bg-page:          var(--paper-2);
  --bg-canvas:        var(--white);
  --bg-muted:         var(--paper);
  --bg-rail:          var(--tebt-blue);
  --bg-sub:           var(--white);
  --bg-topbar:        var(--white);
  --border-subtle:    var(--cloud);
  --border-strong:    var(--mist);
  --text-primary:     var(--ink);
  --text-secondary:   var(--slate);
  --text-muted:       var(--slate-400);

  /* ─── Status ──────────────────────────────────────────── */
  --success:          #1B7F4D;
  --success-bg:       #E6F3EC;
  /* "warning" repurposed → Neutral Dark (awareness-level). Brand: Blue + Teal + Neutral only.
     Critical states use --danger (Error Red). See DD-2026-05-26-D in _meta/design-decisions-log.md */
  --warning:          #121212;
  --warning-bg:       #E8E9EE;
  --danger:           #B23131;
  --danger-bg:        #FBE9E9;
  --info:             var(--tebt-blue);
  --info-bg:          var(--tebt-blue-50);

  /* ─── Type ────────────────────────────────────────────── */
  --font-ar: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif;
  --font-en: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --fs-xs:    11px;
  --fs-sm:    12px;
  --fs-base:  13px;
  --fs-md:    14px;
  --fs-lg:    16px;
  --fs-xl:    18px;
  --fs-2xl:   22px;
  --fs-3xl:   28px;
  --fs-4xl:   36px;

  /* ─── Spacing ─────────────────────────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ─── Radius ──────────────────────────────────────────── */
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   10px;
  --r-xl:   12px;
  --r-2xl:  16px;
  --r-full: 999px;

  /* ─── Shadow ──────────────────────────────────────────── */
  --shadow-1: 0 1px 2px rgba(20, 22, 28, 0.05);
  --shadow-2: 0 2px 6px -1px rgba(20, 22, 28, 0.08), 0 1px 2px rgba(20, 22, 28, 0.04);
  --shadow-3: 0 8px 16px -6px rgba(20, 22, 28, 0.12), 0 4px 8px -4px rgba(20, 22, 28, 0.06);
  --shadow-4: 0 24px 48px -16px rgba(20, 22, 28, 0.18), 0 8px 16px -8px rgba(20, 22, 28, 0.08);

  /* ─── Layout ──────────────────────────────────────────── */
  --rail-w:        52px;
  --subnav-w:      232px;
  --topbar-h:      56px;
  --pageheader-h:  52px;

  /* ─── Motion (from طبت identity system V1.0) ──────────────
     Durations + easing curves — applied system-wide so every
     workspace shares one consistent motion language. */
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   360ms;
  --dur-slower: 600ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-out:      cubic-bezier(.16, 1, .3, 1);
  --ease-spring:   cubic-bezier(.34, 1.56, .64, 1);

  /* Focus ring — single accessible focus token across the system */
  --focus-ring: 0 0 0 3px rgba(0, 56, 178, .35);
}

/* ─── Reset / Base ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-ar);
  font-size: var(--fs-base);
  color: var(--text-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.45;
}
button {
  font-family: inherit;
  cursor: pointer;
}
input, select, textarea { font-family: inherit; }

/* ─── Accessibility: focus + reduced-motion (system-wide, from طبت identity) ─── */
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* utility: numbers always tabular for grids */
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* utility: showcase grid */
.showcase {
  padding: 32px 40px 60px;
  max-width: 1440px;
  margin: 0 auto;
}
.showcase-h {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding-bottom: 24px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--border-subtle);
}
.showcase-h .crumb {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 8px;
}
.showcase-h h1 {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.1;
}
.showcase-h .desc {
  font-size: 14px;
  color: var(--text-secondary);
  max-width: 480px;
  line-height: 1.55;
}
.showcase-section { margin-top: 56px; }
.showcase-section:first-of-type { margin-top: 0; }
.showcase-section h2 {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.showcase-section .section-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0 0 20px;
  max-width: 540px;
}
.showcase-label {
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 10px;
}