/* Copied from @inbld/ui dist/styles.css (D:\sandbox\inbld\inbld-ui, commit 534ac29), unchanged except:
   the Google Fonts @import is removed; the page serves Alef and IBM Plex Mono itself (fonts.css).
   Refresh by copying that file again and deleting the @import line. */

/* @inbld/ui — styles.css (GENERATED by scripts/build-css.mjs from design-src via src/; do not edit).
   One file: fonts (Alef · IBM Plex Mono), warm clay/cream primitives, type scale, spacing,
   radii/shadows/motion, the light · mid · dark theme scopes and the base resets.
   Themes: <html dir="rtl" lang="he" data-theme="light|mid|dark">. Org themes: @inbld/ui/org-theme. */


/* ============================================================
   inbld. Design System — global entry point
   Consumers link THIS one file. It is an @import list only.
   Everything reachable from here ships to consumers.
   ============================================================ */

/* ======== tokens/fonts.css ======== */
/* INBLD / Alef — Webfonts
   Hebrew + Latin. All text incl. titles: Alef (the brand typeface — also the product's name).
   Data/numerals: IBM Plex Mono. Loaded from Google Fonts CDN.
   (Frank Ruhl Libre retired by user decision 2026-07 — titles are Alef now.)
   Note: Alef ships only 400 + 700; mid weights fall back to the nearest. */
/* (the font @import above is this line, hoisted to the top of the file) */

/* ======== tokens/colors.css ======== */
/* INBLD / Alef — Color primitives
   Derived from the brand mark: gold disc, blue + green house, red roof, green ring.
   Warm-editorial system: clay/cream neutrals + four functional brand accents. */
:root {
  /* ---- Neutral ramp (warm clay / cream) ---- */
  --cream-50:  #FBF9F5;
  --cream-100: #F4F0E9;
  --cream-200: #EFEAE0;
  --clay-300:  #DDD4C6;
  --clay-400:  #C3B7A4;
  --taupe-500: #8A8175;
  --taupe-600: #6A6258;
  --umber-700: #4A453D;
  --umber-800: #34302A;
  --ink-900:   #26231E;

  /* ---- Brand core (literal logo colors) ----
     These exact hues live in the LOGO and in subtle identity details ONLY:
     a 2-3px rule under an eyebrow, a favicon, a footer hairline, chart
     annotation dots. They are too saturated for UI surfaces — buttons,
     charts, badges all use the clay-toned UI palette below instead. */
  --brand-gold:  #E0BE20; /* disc — logo + micro-details only */
  --brand-blue:  #15489D; /* house — logo + micro-details only */
  --brand-green: #0F731D; /* ring — logo + micro-details only */
  --brand-red:   #B01A2B; /* roof — logo + micro-details only */

  /* ---- UI accent palette (the "1a" warm mood) ----
     Clay-softened relatives of the logo hues — what the UI actually uses.
     · red   = primary action (--accent)
     · blue  = default data/chart color + info
     · green = success · gold = warn only, ≤10% of a view */
  --ui-red:   #C0533F;
  --ui-blue:  #3E6FB0;
  --ui-green: #4E8A6B;
  --ui-gold:  #CF9836;

  /* ---- Functional accents (tuned for legibility on warm surfaces) ---- */
  --info-500:    #3E6FB0; /* info — blue */
  --info-300:    #7C9CCB;
  --info-700:    #2E568C;
  --success-500: #4E8A6B; /* pass / QA ok — green */
  --success-300: #83AE98;
  --success-700: #3A6B51;
  --warn-500:    #CF9836; /* warning — gold */
  --warn-300:    #E0BC74;
  --warn-700:    #96690F;
  --danger-500:  #C0533F; /* fail / error — red */
  --danger-300:  #D88A7B;
  --danger-700:  #99402F;

  /* ---- Data-viz categorical (charts, QTO, model categories) ----
     Single-series charts ALWAYS use --chart-default (blue). The ramp is for
     multi-category data only, in order — gold enters 3rd, never first. */
  --chart-default: #3E6FB0;
  --viz-1: #3E6FB0; /* blue */
  --viz-2: #4E8A6B; /* green */
  --viz-3: #CF9836; /* gold — only in multi-category ramps */
  --viz-4: #C0533F; /* red */
  --viz-5: #6A8CAF; /* slate-blue */
  --viz-6: #96690F; /* bronze */
  --viz-7: #5E9B86; /* teal-green */
  --viz-8: #A85A48; /* clay-red */

  --pure-white: #FFFFFF;
  --pure-black: #000000;
}

/* ======== tokens/typography.css ======== */
/* INBLD / Alef — Typography
   All text: Alef (the brand typeface, Hebrew+Latin) — UI, paragraphs, wordmark AND titles.
   (Frank Ruhl Libre retired by user decision 2026-07 — titles are Alef now.)
   Data: IBM Plex Mono — numerals, codes, measurements, QTO figures.
   RTL-first: line-height is generous for Hebrew; numerals stay LTR via the mono face.
   Alef ships 400 + 700 only — treat "medium/semibold" as 400, "bold"/"display" as 700. */
:root {
  --font-display: 'Alef', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Alef', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, Menlo, monospace;

  /* Type scale (1.250 major-third-ish, tuned for Hebrew x-height) */
  --fs-display-1: 56px; /* @kind font */
  --lh-display-1: 1.05; /* @kind other */
  --ls-display-1: -0.015em; /* @kind other */
  --fs-display-2: 42px; /* @kind font */
  --lh-display-2: 1.08; /* @kind other */
  --ls-display-2: -0.012em; /* @kind other */
  --fs-h1: 32px; /* @kind font */
  --lh-h1: 1.15; /* @kind other */
  --ls-h1: -0.01em; /* @kind other */
  --fs-h2: 25px; /* @kind font */
  --lh-h2: 1.2; /* @kind other */
  --ls-h2: -0.005em; /* @kind other */
  --fs-h3: 20px; /* @kind font */
  --lh-h3: 1.3; /* @kind other */
  --ls-h3: 0; /* @kind other */
  --fs-lg: 18px; /* @kind font */
  --lh-lg: 1.55; /* @kind other */
  --fs-body: 16px; /* @kind font */
  --lh-body: 1.7; /* @kind other */
  --fs-sm: 14px; /* @kind font */
  --lh-sm: 1.6; /* @kind other */
  --fs-xs: 12.5px; /* @kind font */
  --lh-xs: 1.5; /* @kind other */
  --fs-eyebrow: 11px; /* @kind font */
  --ls-eyebrow: 0.16em; /* @kind other */

  /* Weights (Alef ships 400+700; mono has 400/500/600) */
  --fw-light: 300; /* @kind font */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */
  --fw-display: 700; /* @kind font */
}

/* ======== tokens/spacing.css ======== */
/* INBLD / Alef — Spacing & layout
   4px base grid. Use --space-* for padding/margins/gaps; --container-* for page widths. */
:root {
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Page containers */
  --container-sm: 720px;
  --container-md: 960px;
  --container-lg: 1200px;
  --container-xl: 1360px;

  /* Section rhythm (marketing) */
  --section-y: clamp(64px, 9vw, 128px); /* @kind spacing */
  --gutter: clamp(20px, 5vw, 64px); /* @kind spacing */
}

/* ======== tokens/effects.css ======== */
/* INBLD / Alef — Effects: radii, borders, shadows, motion
   Warm-tinted shadows (never neutral black on cream). Editorial = soft, low, diffuse. */
:root {
  /* Corner radii */
  --r-xs: 5px;
  --r-sm: 8px;
  --r-md: 13px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Borders */
  --border-1: 1px solid var(--line); /* @kind other */
  --border-strong: 1px solid var(--line-strong); /* @kind other */
  --border-hair: 1px solid color-mix(in srgb, var(--line) 60%, transparent); /* @kind other */

  /* Shadows — warm, using --shadow-color (RGB triple set per theme) */
  --shadow-xs: 0 1px 2px rgba(var(--shadow-color) / 0.06);
  --shadow-sm: 0 2px 6px rgba(var(--shadow-color) / 0.07), 0 1px 2px rgba(var(--shadow-color) / 0.06);
  --shadow-md: 0 6px 18px rgba(var(--shadow-color) / 0.09), 0 2px 5px rgba(var(--shadow-color) / 0.06);
  --shadow-lg: 0 16px 40px rgba(var(--shadow-color) / 0.12), 0 4px 10px rgba(var(--shadow-color) / 0.07);
  --shadow-focus: 0 0 0 3px var(--focus-ring);

  /* Motion — calm, editorial. No bounces. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 340ms; /* @kind other */
}

/* ======== tokens/themes.css ======== */
/* INBLD / Alef — Theme semantics (light · mid · dark)
   Apply via [data-theme] on <html> or any scope. Light is the default on :root.
   Semantic aliases flip per theme; components reference ONLY these, never primitives. */

:root,
[data-theme="light"] {
  --bg:          var(--cream-100);
  --bg-sunken:   #EDE7DC;
  --surface:     var(--cream-50);
  --surface-2:   var(--cream-200);
  --surface-3:   #E7E0D3;
  --line:        #E4DDD2;
  --line-strong: #D2C8B8;

  --text:        var(--ink-900);
  --text-muted:  var(--taupe-500);
  --text-subtle: #A89E90;
  --text-onbrand:#FBF9F5;

  --accent:        var(--ui-red);         /* primary action / brand voice */
  --accent-hover:  #A64434;
  --accent-quiet:  color-mix(in srgb, var(--ui-red) 13%, var(--surface));

  --focus-ring:  color-mix(in srgb, var(--info-500) 55%, transparent);

  /* status — text + soft fill pairs */
  --info:    var(--info-500);    --info-fill:    color-mix(in srgb, var(--info-500) 12%, var(--surface));
  --success: var(--success-500); --success-fill: color-mix(in srgb, var(--success-500) 13%, var(--surface));
  --warn:    var(--warn-700);    --warn-fill:    color-mix(in srgb, var(--warn-500) 18%, var(--surface));
  --danger:  var(--danger-500);  --danger-fill:  color-mix(in srgb, var(--danger-500) 12%, var(--surface));

  --shadow-color: 32 28 20;
}

[data-theme="mid"] {
  --bg:          #E6DFD2;
  --bg-sunken:   #DED6C6;
  --surface:     #EEE7DA;
  --surface-2:   #E2DACB;
  --surface-3:   #D8CFBD;
  --line:        #D3C8B5;
  --line-strong: #C2B6A0;

  --text:        #2A2620;
  --text-muted:  #786E5F;
  --text-subtle: #948A78;
  --text-onbrand:#FBF9F5;

  --accent:        var(--ui-red);
  --accent-hover:  #A64434;
  --accent-quiet:  color-mix(in srgb, var(--ui-red) 15%, var(--surface));
  --focus-ring:  color-mix(in srgb, var(--info-500) 55%, transparent);

  --info:    var(--info-700);    --info-fill:    color-mix(in srgb, var(--info-500) 15%, var(--surface));
  --success: var(--success-700); --success-fill: color-mix(in srgb, var(--success-500) 16%, var(--surface));
  --warn:    var(--warn-700);    --warn-fill:    color-mix(in srgb, var(--warn-500) 22%, var(--surface));
  --danger:  var(--danger-700);  --danger-fill:  color-mix(in srgb, var(--danger-500) 15%, var(--surface));

  --shadow-color: 40 34 22;
}

[data-theme="dark"] {
  --bg:          #1E1B16;
  --bg-sunken:   #181511;
  --surface:     #2B2722;
  --surface-2:   #332E28;
  --surface-3:   #3C362E;
  --line:        #3C362E;
  --line-strong: #4E4740;

  --text:        #F2EEE6;
  --text-muted:  #A89E90;
  --text-subtle: #7E766A;
  --text-onbrand:#FBF9F5;

  --accent:        #D6594B;                /* roof red, lightened for dark */
  --accent-hover:  #E0705F;
  --accent-quiet:  color-mix(in srgb, #D6594B 22%, var(--surface));
  --focus-ring:  color-mix(in srgb, #5B8FD6 60%, transparent);

  /* brighter accents so they hold up on dark clay */
  --info:    #6B9BE0;    --info-fill:    color-mix(in srgb, #6B9BE0 18%, var(--surface));
  --success: #5FB56E;    --success-fill: color-mix(in srgb, #5FB56E 18%, var(--surface));
  --warn:    #DCBB4E;    --warn-fill:    color-mix(in srgb, #DCBB4E 18%, var(--surface));
  --danger:  #E07B6C;    --danger-fill:  color-mix(in srgb, #E07B6C 18%, var(--surface));

  --shadow-color: 0 0 0;
}

/* ======== tokens/base.css ======== */
/* INBLD / Alef — Base element resets & document defaults
   Minimal, opinionated. RTL-first document direction. */
* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Latin numerals & codes read LTR even inside RTL flow */
.num, [data-num] { font-family: var(--font-mono); direction: ltr; unicode-bidi: embed; font-variant-numeric: tabular-nums; }

h1, h2, h3, h4, h5 { font-family: var(--font-display); font-weight: var(--fw-bold); margin: 0; color: var(--text); }

a { color: inherit; text-decoration: none; }

::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }

:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--r-xs); }

/* Eyebrow / mono label utility */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: var(--fw-medium);
}