@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
/* ==========================================================================
   BoostaMe — design tokens
   The single source of truth. Nothing below this file may hardcode a colour,
   a font size, a radius or a duration.

   SEMANTIC RULE (approved, non-negotiable):
     indigo  = act        buttons, links, active nav, focus
     amber   = money      balances, prices, invoices
     emerald = delivered  completed status, delivery progress
     red     = error      failures, destructive actions
     cyan    = info       hints, neutral notices

   Any other use of colour is a defect. The variables are named for their
   MEANING, not their hue, so misuse is visible on the line that commits it:
   `--color-money` in a decorative border reads wrong in review.
   ========================================================================== */

/* Fonts.
   Loaded from Google Fonts for now so this drops in with no extra files.
   Self-hosting them is a Phase 8 task -- it removes a third-party request and
   is worth 3-5 Lighthouse points, but it is not worth blocking on today. */

:root {
  /* ---------------------------------------------------------------- palette
     Raw values. Never referenced directly outside this block — always go
     through a semantic token below. */
  --raw-ink-950: #07080D;
  --raw-ink-900: #0A0B10;
  --raw-ink-850: #0F111A;
  --raw-ink-800: #12141C;
  --raw-ink-700: #1A1D28;
  --raw-ink-600: #242836;
  --raw-ink-500: #333949;
  --raw-ink-400: #454B5C;
  --raw-ink-300: #6B7284;
  --raw-ink-200: #A0A7BC;
  --raw-ink-100: #D4D9E4;
  --raw-ink-50:  #F2F4F8;
  --raw-white:   #FFFFFF;

  --raw-indigo-700: #4338CA;
  --raw-indigo-600: #4F46E5;
  --raw-indigo-500: #6366F1;
  --raw-indigo-400: #818CF8;
  --raw-indigo-300: #A5B4FC;

  --raw-amber-600:  #D97706;
  --raw-amber-500:  #F59E0B;
  --raw-amber-400:  #FBBF24;

  --raw-emerald-600: #059669;
  --raw-emerald-500: #10B981;
  --raw-emerald-400: #34D399;

  --raw-red-600: #DC2626;
  --raw-red-500: #EF4444;
  --raw-red-400: #F87171;

  --raw-cyan-500: #06B6D4;
  --raw-cyan-400: #22D3EE;

  /* ---------------------------------------------------------------- surface */
  --surface-base:    var(--raw-ink-900);
  --surface-sunken:  var(--raw-ink-950);
  --surface-raised:  var(--raw-ink-800);
  --surface-overlay: var(--raw-ink-700);
  --surface-hover:   rgba(255, 255, 255, 0.035);
  --surface-active:  rgba(255, 255, 255, 0.06);

  --border-subtle:  var(--raw-ink-600);
  --border-default: var(--raw-ink-500);
  --border-strong:  var(--raw-ink-400);

  /* ---------------------------------------------------------------- text */
  --text-primary:   var(--raw-ink-50);
  --text-secondary: var(--raw-ink-200);
  --text-muted:     var(--raw-ink-300);
  --text-disabled:  var(--raw-ink-400);
  --text-inverse:   var(--raw-ink-900);

  /* ---------------------------------------------------------------- meaning */

  /* ACT — the only colour permitted on an interactive affordance. */
  --color-action:        var(--raw-indigo-500);
  --color-action-hover:  var(--raw-indigo-400);
  --color-action-press:  var(--raw-indigo-600);
  --color-action-subtle: rgba(99, 102, 241, 0.12);
  --color-action-border: rgba(99, 102, 241, 0.35);
  --color-action-text:   var(--raw-white);

  /* MONEY — balances, prices, invoices. Never decoration. */
  --color-money:        var(--raw-amber-400);
  --color-money-subtle: rgba(251, 191, 36, 0.10);
  --color-money-border: rgba(251, 191, 36, 0.28);

  /* DELIVERED — completed status and delivery progress only. */
  --color-delivered:        var(--raw-emerald-500);
  --color-delivered-subtle: rgba(16, 185, 129, 0.12);
  --color-delivered-border: rgba(16, 185, 129, 0.30);

  /* ERROR */
  --color-error:        var(--raw-red-500);
  --color-error-subtle: rgba(239, 68, 68, 0.12);
  --color-error-border: rgba(239, 68, 68, 0.32);

  /* INFO */
  --color-info:        var(--raw-cyan-500);
  --color-info-subtle: rgba(6, 182, 212, 0.12);
  --color-info-border: rgba(6, 182, 212, 0.30);

  /* PENDING — deliberately amber-adjacent but distinct from money. Awaiting
     review, processing, queued. */
  --color-pending:        var(--raw-amber-500);
  --color-pending-subtle: rgba(245, 158, 11, 0.12);

  /* ---------------------------------------------------------------- type */
  --font-ui:   Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-ar:   'IBM Plex Sans Arabic', var(--font-ui);
  --font-num:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-display: 3rem;      /* 48 */
  --fs-h1:      2.25rem;   /* 36 */
  --fs-h2:      1.75rem;   /* 28 */
  --fs-h3:      1.25rem;   /* 20 */
  --fs-lg:      1.0625rem; /* 17 */
  --fs-base:    0.9375rem; /* 15 */
  --fs-sm:      0.8125rem; /* 13 */
  --fs-xs:      0.6875rem; /* 11 */

  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-normal: 1.6;

  --tracking-tight:  -0.03em;
  --tracking-snug:   -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.05em;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semi:   600;
  --weight-bold:   700;

  /* ---------------------------------------------------------------- space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-14: 3.5rem;
  --space-18: 4.5rem;

  /* ---------------------------------------------------------------- shape */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 999px;

  /* Borders first, shadow only for genuinely floating layers. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 40px -12px rgba(0, 0, 0, 0.6);
  --shadow-focus: 0 0 0 3px var(--color-action-subtle);

  /* ---------------------------------------------------------------- motion */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);

  --dur-instant: 80ms;
  --dur-fast:    150ms;
  --dur-normal:  220ms;
  --dur-slow:    400ms;
  --dur-reveal:  600ms;

  /* ---------------------------------------------------------------- layout */
  --sidebar-w:          264px;
  --sidebar-w-collapsed: 68px;
  --header-h:           60px;
  --container-max:      1240px;

  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  --z-palette:  600;
}

/* ---------------------------------------------------------------- light mode
   Shipped as tokens now, not enabled in v1. Because every component reads
   semantic variables rather than raw hues, enabling it later is this block
   plus a toggle -- no component changes. */
[data-theme='light'] {
  --surface-base:    #FAFBFD;
  --surface-sunken:  #F2F4F8;
  --surface-raised:  #FFFFFF;
  --surface-overlay: #FFFFFF;
  --surface-hover:   rgba(10, 11, 16, 0.03);
  --surface-active:  rgba(10, 11, 16, 0.06);

  --border-subtle:  #E4E7EF;
  --border-default: #D4D9E4;
  --border-strong:  #A0A7BC;

  --text-primary:   #0A0B10;
  --text-secondary: #454B5C;
  --text-muted:     #6B7284;
  --text-disabled:  #A0A7BC;
  --text-inverse:   #FFFFFF;

  --color-action:       var(--raw-indigo-600);
  --color-action-hover: var(--raw-indigo-700);
  --color-money:        var(--raw-amber-600);
  --color-delivered:    var(--raw-emerald-600);
  --color-error:        var(--raw-red-600);

  --shadow-sm: 0 1px 2px rgba(10, 11, 16, 0.06);
  --shadow-md: 0 4px 12px rgba(10, 11, 16, 0.08);
  --shadow-lg: 0 16px 40px -12px rgba(10, 11, 16, 0.16);
}

/* ---------------------------------------------------------------- base */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface-base);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

/* Arabic letterforms need more vertical room. Rendering Arabic at the Latin
   size is the most common tell of a poorly localised interface. */
[dir='rtl'] body,
[lang='ar'] body {
  font-family: var(--font-ar);
  font-size: calc(var(--fs-base) * 1.06);
  line-height: 1.75;
}

/* Every number in the product: prices, balances, order IDs, quantities,
   timestamps. Tabular figures so columns align and a counter animating does
   not make the row jitter. */
.num,
.bm-num,
[data-num] {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'zero' 1;
  letter-spacing: -0.01em;
}

/* Numbers stay left-to-right inside Arabic text. */
[dir='rtl'] .num,
[dir='rtl'] .bm-num {
  direction: ltr;
  unicode-bidi: embed;
}

:focus-visible {
  outline: 2px solid var(--color-action);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

::selection {
  background: var(--color-action-subtle);
  color: var(--text-primary);
}

/* Animation decorates a state that is already legible without it, so
   switching it off costs nothing. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}