/* GENERATED from design/tokens.css by design/sync-tokens.mjs — do not edit here. */
/*
  EjariFlow design tokens.
  Source of truth for BOTH surfaces (marketing site + broker portal).

  Derived from the Kombai "Sora Veld" reference (kombai:import-template:sora):
  deep-slate canvas, mint-green and cobalt accents, Space Grotesk over a body
  sans, small-radius geometry with border and inset highlight so panels read as
  embossed plates.

  Roles are taken from the reference spec verbatim, because the roles are what
  make it read as engineered rather than as a pile of colours. In particular:
  mint is RESERVED for live and positive signals. If mint starts decorating
  headings and borders it stops meaning "this is alive" and the whole thing
  turns generic.

  Do not edit the copies in site/public/tokens.css or portal/public/tokens.css.
  Edit this file, then run: npm run tokens:sync
*/

:root {
  /* ---------- surfaces (darkest to lightest) ---------- */
  --c-canvas: #0f1217;   /* page canvas */
  --c-sidebar: #11151b;  /* left rail / nav background */
  --c-surface: #1a1f27;  /* panel fill: the universal container */
  --c-inset: #13171d;    /* inputs, segmented-toggle track, tiles */
  --c-well: #0d1014;     /* progress-bar track */
  --c-footer: #0c0f13;   /* bottom status bar */

  /* ---------- ink ---------- */
  --c-text: #e6e9ef;
  --c-text-90: rgb(230 233 239 / 0.9);
  --c-text-70: rgb(230 233 239 / 0.7);
  --c-text-55: rgb(230 233 239 / 0.55);
  --c-text-40: rgb(230 233 239 / 0.4);

  /* ---------- accents ---------- */
  --c-mint: #19c37d;                              /* live + positive only */
  --c-mint-ink: #06140d;                          /* text on mint fill */
  --c-mint-wash: rgb(25 195 125 / 0.12);          /* active nav row */
  --c-cobalt: #3b6bff;                            /* secondary action, links, in-flight */
  --c-cobalt-wash: rgb(59 107 255 / 0.12);
  --c-amber: #e0b341;                             /* caution: needs a human */
  --c-amber-wash: rgb(224 179 65 / 0.12);
  --c-red: #ef4444;                               /* would be rejected */
  --c-red-wash: rgb(239 68 68 / 0.12);

  /* ---------- lines + shadows ---------- */
  --c-line: rgb(255 255 255 / 0.07);
  --c-line-strong: rgb(255 255 255 / 0.14);
  /* 1px inset highlight on top, soft drop below: the "embossed plate" */
  --shadow-panel: inset 0 1px 0 rgb(255 255 255 / 0.04), 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-inset: inset 0 1px 2px rgb(0 0 0 / 0.45);

  /* ---------- geometry: deliberately small radius ---------- */
  --r-xs: 5px;   /* nav rows, buttons, chips, inputs */
  --r-sm: 6px;   /* panels, cards */
  --r-pill: 999px;
  --g-1: 6px;
  --g-2: 10px;
  --g-3: 14px;
  --g-4: 20px;
  --g-5: 28px;

  /* ---------- type ---------- */
  --font-display: "Space Grotesk", "IBM Plex Sans", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;

  /*
    Type scale from the reference: display 30/700, heading 17/600, body
    13-13.5px, mono-label 9-11px wide tracking.

    ONE DELIBERATE DEVIATION: reading body copy is 15px here, not 13.5px.
    13.5px fails the readable minimum for sustained text, and the reference's
    console density comes from the mono-labels and the tight geometry rather
    than from shrinking paragraphs. Metadata and secondary text DO run at 13px,
    labels at 10.5px, so the density is preserved where it carries meaning.
  */
  --fs-display: 30px;
  --fs-title: 22px;
  --fs-heading: 17px;
  --fs-h3: 15px;
  --fs-body: 15px;
  --fs-meta: 13px;
  --fs-label: 10.5px;
  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-body: 1.55;
  --track-label: 0.09em;
  --track-tight: -0.02em;
}

/* Marketing pages read a little larger than a dense app surface. */
.site { --fs-body: 16px; }

/*
  LIGHT THEME — the marketing site.

  The portal stays dark because a dense workspace with 50 lease bundles on it is
  a different job from a page that has to earn trust in ten seconds. The market
  this sells into (Bayut, Property Finder, the DLD portal itself) is light and
  plain, and the buyer is an office manager handling passports, not a developer.
  Same tokens, same type, two themes: still one system.

  One accent only. On light, the neon mint reads as a highlighter, so the action
  colour is a deep green that reads official, and mint is retired here.
*/
.theme-light {
  --c-canvas: #ffffff;
  --c-band: #f6f8f9;
  --c-sidebar: #f6f8f9;
  --c-surface: #ffffff;
  --c-inset: #f3f5f7;
  --c-well: #e7ebef;
  --c-footer: #f6f8f9;

  --c-text: #0f172a;
  --c-text-90: rgb(15 23 42 / 0.9);
  --c-text-70: #47536b;
  --c-text-55: #68758a;
  --c-text-40: #8b97a8;

  --c-brand: #0b7a4b;
  --c-brand-hover: #096740;
  --c-brand-ink: #ffffff;
  --c-brand-wash: #e8f5ef;
  --c-mint: #0b7a4b;
  --c-mint-ink: #ffffff;
  --c-mint-wash: #e8f5ef;
  --c-cobalt: #1d4ed8;
  --c-cobalt-wash: #eaf0ff;
  --c-amber: #b45309;
  --c-amber-wash: #fdf3e3;
  --c-red: #c0392b;
  --c-red-wash: #fdecea;

  --c-line: #e3e7ec;
  --c-line-strong: #cdd5de;
  --shadow-panel: 0 1px 2px rgb(15 23 42 / 0.04), 0 12px 28px -20px rgb(15 23 42 / 0.22);
  --shadow-inset: none;
}

/* Uppercase mono label: the reference's signature texture. */
.mono-label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-text-55);
}

.tnum { font-variant-numeric: tabular-nums; }