/* ============================================================
   BauLynq Design Language — APP tokens, Designsprache v3 ("drafting studio")
   Decided 2026-10-03. Mirrors frontend/src/index.css, which stays the source
   of truth for the app: the custom-property names below are the app's own
   (--color-* are the DaisyUI theme variables, --bl-* the product tokens).

   This file is hand-maintained and is NOT produced by scripts/gen-tokens.mjs.
   The brand-v2 marketing identity (logo, Plus Jakarta ramps, brand/tokens/
   baulynq-tokens.json) is a separate artefact and is not exported here.

   Scoping: every theme block matches the bare attribute, so a theme can be
   applied to any element ( <div data-theme="dark"> ) and not only to <html>.
   The rule/shadow/backdrop tokens are therefore declared on [data-theme] and
   :root, so they are recomputed from that element's own ink.
   ============================================================ */

/* ── Faces, type, radii, motion — theme independent ─────────────────────── */
:root {
  --bl-font-sans: "Geist Variable", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --bl-font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale: 13px is the UI body. Tailwind names re-mapped in the app;
     arbitrary sizes in use: 11 / 12 / 13 / 14 / 15 / 18 / 22 / 24 px.
     11 = kicker, tag, table head · 22 = stat figure · 24 = page headline.
     Weights 400 / 500 / 600 only. */
  --text-xs: 0.75rem;      /* 12 */
  --text-sm: 0.8125rem;    /* 13  UI body */
  --text-base: 0.875rem;   /* 14 */
  --text-lg: 0.9375rem;    /* 15  section / dialog title (.bl-title) */
  --text-xl: 1.125rem;     /* 18  sub-headline */
  --text-table-header: 11px;
  --text-table-cell: 13px;
  --text-badge-compact: 11px;

  /* Radii: 8 sheet / card / dialog · 6 control · 4 tag. */
  --radius-box: 0.5rem;
  --radius-field: 0.375rem;
  --radius-selector: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;

  /* Motion: named by the job. The reduced-motion guard collapses all four. */
  --bl-dur-tap: 90ms;    /* pressed / hover — must read as instant */
  --bl-dur-ui: 160ms;    /* control state, tint, tick, badge */
  --bl-dur-enter: 220ms; /* something arrives: overlay, popover, row */
  --bl-dur-move: 300ms;  /* something travels: sheet, drawer, reorder */
  --bl-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --bl-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --bl-ease-move: cubic-bezier(0.16, 1, 0.3, 1);

  /* Export-only (the app writes these as Tailwind classes, not variables). */
  --bl-control-h: 32px;       /* btn-sm is the default size; bare .input / .select; table rows */
  --bl-control-h-dense: 24px; /* btn-xs, badges are 20 / 22 */
  --bl-z-sheet: 30;           /* mobile module sheet */
  --bl-z-chrome: 40;          /* topbar, rail, bottom nav */
  --bl-z-popover: 50;         /* menus, dropdowns, banners */
  --bl-z-overlay: 60;         /* Modal, Drawer, ConfirmDialog, Awesomebar */
  --bl-z-lightbox: 70;        /* image viewer */
  --bl-z-boot: 9998;          /* AppPreloader only */
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --bl-dur-tap: 1ms;
    --bl-dur-ui: 1ms;
    --bl-dur-enter: 1ms;
    --bl-dur-move: 1ms;
  }
}

/* ── Shell geometry (2026-10-04) ─────────────────────────────────────────────
   The one-sheet shell: canvas + collapsible rail + ONE sheet holding the topbar
   and the page. In the app --bl-rail is written on the shell root from the
   collapsed state (208px expanded, 56px collapsed, persisted as bl-rail-collapsed);
   --bl-dock-extra is written on <html> by the topbar while a page's masthead
   identity is docked in it (xl+, 0px when it fits the 48px row) and is part of
   --topbar-height. Below lg there is no rail, no sheet margin and no gutter. */
:root {
  --bl-rail: 208px;
  --bl-rail-collapsed: 56px;
  --bl-dock-extra: 0px;
  --topbar-height: calc(3rem + var(--bl-dock-extra)); /* 3.5rem below lg */
  --page-gutter: 0.875rem;                            /* sheet margin 6+6 and its 1px rules; 0 below lg */
}

/* ── light (default): warm paper ────────────────────────────────────────── */
:root,
[data-theme="light"],
[data-theme="material"] {
  color-scheme: light;
  --color-primary: #8e2222;          /* THE one primary action per view + the search + the SELECTED page or tab (2026-10-03) */
  --color-primary-content: #ffffff;
  --color-secondary: #9c5de8;
  --color-secondary-content: #0a0b0d;
  --color-accent: #0e6e7e;           /* selection, focus, links, "changed" — never an action */
  --color-accent-content: #ffffff;
  --color-neutral: #16161a;
  --color-neutral-content: #f7f7f5;
  --color-info: #0972b2;
  --color-info-content: #ffffff;
  --color-success: #006133;
  --color-success-content: #ffffff;
  --color-warning: #985e00;
  --color-warning-content: #ffffff;
  --color-error: #b83b36;
  --color-error-content: #ffffff;
  --color-base-100: #fffdf9;         /* sheet: page surface, cards, dialogs */
  --color-base-200: #f7f2ea;         /* paper: the canvas everything sits on */
  --color-base-300: #e6e0d4;         /* warm hairline */
  --color-base-content: #16161a;     /* ink */
  --color-chart-1: #a22626;
  --color-chart-2: #0e6e7e;
  --color-chart-3: #007a4b;
  --color-chart-4: #4a6fa5;
  --color-chart-5: #9b6000;
  --color-chart-6: #9a5b8f;

  --bl-surface: #f7f2ea;
  --bl-mobile-canvas: #f7f2ea;
  --bl-ink: #16161a;                 /* tier 1 */
  --bl-ink-2: #5b574f;               /* tier 2 — there is no third */

  /* Status ring: one meaning each. Tone = the 3px row tick, tint = the pill ground. */
  --bl-tone-gruen: #006133;          /* freigegeben, bezahlt */
  --bl-tone-bernstein: #985e00;      /* in Prüfung, Frist läuft */
  --bl-tone-rot: #b83b36;            /* überfällig, abgelehnt */
  --bl-tone-beton: #cbc5ba;          /* Entwurf, kein Status — a MARKER, not text */
  --bl-tone-ox: #8e2222;             /* Geld, Entscheidung, Blockade */
  --bl-tone-ink: #16161a;            /* a plain measured fact */
  --bl-tone-beton-text: #5b574f;     /* beton, when it has to be printed */
  --bl-tint-gruen: #e8fcee;
  --bl-tint-bernstein: #fff3de;
  --bl-tint-rot: #ffede9;
  --bl-tint-beton: #efeadf;
  --bl-tint-ox: #f2dede;
  --bl-tint-ink: #e3e7ee;
}

/* ── dark: warm graphite ─────────────────────────────────────────────────── */
[data-theme="dark"] {
  color-scheme: dark;
  --color-primary: #e5726a;
  --color-primary-content: #0a0b0d;
  --color-secondary: #9c5de8;
  --color-secondary-content: #0a0b0d;
  --color-accent: #5cc3cf;
  --color-accent-content: #0a0b0d;
  --color-neutral: #eeeae3;
  --color-neutral-content: #16181a;
  --color-info: #51a9ef;
  --color-info-content: #0a0b0d;
  --color-success: #41bb88;
  --color-success-content: #0a0b0d;
  --color-warning: #efaf4c;
  --color-warning-content: #150a00;
  --color-error: #f77469;
  --color-error-content: #0a0b0d;
  --color-base-100: #1c1b19;
  --color-base-200: #141311;
  --color-base-300: #35322d;
  --color-base-content: #eeeae3;
  --color-chart-1: #d8574d;
  --color-chart-2: #5cc3cf;
  --color-chart-3: #19a572;
  --color-chart-4: #7ea8e8;
  --color-chart-5: #c57e00;
  --color-chart-6: #c58ab9;
  --bl-surface: #141311;
}

/* ── material: the soft light variant (light paper; its own chart hues) ─── */
[data-theme="material"] {
  --color-neutral-content: #fafcff;
  --color-chart-1: #57927d;
  --color-chart-2: #5f8ea9;
  --color-chart-3: #b1935a;
  --color-chart-4: #af6b64;
  --color-chart-5: #8773a9;
  --color-chart-6: #6e8d7e;
}

/* ── contrast: high-contrast dark ────────────────────────────────────────── */
[data-theme="contrast"] {
  color-scheme: dark;
  --color-primary: #e5726a;
  --color-primary-content: #0a0b0d;
  --color-secondary: #9c5de8;
  --color-secondary-content: #0a0b0d;
  --color-accent: #5cc3cf;
  --color-accent-content: #0a0b0d;
  --color-neutral: #dce1e6;
  --color-neutral-content: #000000;
  --color-info: #14b4ff;
  --color-info-content: #0a0b0d;
  --color-success: #17c964;
  --color-success-content: #0a0b0d;
  --color-warning: #f5a524;
  --color-warning-content: #150a00;
  --color-error: #f31260;
  --color-error-content: #0a0b0d;
  --color-base-100: #000000;
  --color-base-200: #111111;
  --color-base-300: #2a2a2a;
  --color-base-content: #ffffff;
  --color-chart-1: #8db5a7;
  --color-chart-2: #92b2c5;
  --color-chart-3: #cab68f;
  --color-chart-4: #c99a96;
  --color-chart-5: #ada0c5;
  --color-chart-6: #9cb1a7;
  --bl-surface: #000000;
}

/* ── dim: muted slate dark ───────────────────────────────────────────────── */
[data-theme="dim"] {
  color-scheme: dark;
  --color-primary: #ee8880;
  --color-primary-content: #0a0b0d;
  --color-secondary: #9c5de8;
  --color-secondary-content: #0a0b0d;
  --color-accent: #5cc3cf;
  --color-accent-content: #0a0b0d;
  --color-neutral: #cdd3da;
  --color-neutral-content: #1a1f26;
  --color-info: #14b4ff;
  --color-info-content: #0a0b0d;
  --color-success: #17c964;
  --color-success-content: #0a0b0d;
  --color-warning: #f5a524;
  --color-warning-content: #150a00;
  --color-error: #f77469;
  --color-error-content: #0a0b0d;
  --color-base-100: #232830;
  --color-base-200: #1c2128;
  --color-base-300: #2f3641;
  --color-base-content: #e6e9ee;
  --color-chart-1: #8db5a7;
  --color-chart-2: #92b2c5;
  --color-chart-3: #cab68f;
  --color-chart-4: #c99a96;
  --color-chart-5: #ada0c5;
  --color-chart-6: #9cb1a7;
  --bl-surface: #232830;
}

/* ── The dark family re-points ink and the status ring ──────────────────── */
[data-theme="dark"],
[data-theme="contrast"],
[data-theme="dim"] {
  --bl-ink: #eeeae3;
  --bl-ink-2: #a8a299;
  --bl-tone-gruen: #41bb88;
  --bl-tone-bernstein: #efaf4c;
  --bl-tone-rot: #f77469;
  --bl-tone-beton: #4a463f;
  --bl-tone-ox: #e5726a;
  --bl-tone-ink: #eeeae3;
  --bl-tone-beton-text: #a8a299;
  --bl-tint-gruen: color-mix(in oklab, #41bb88 16%, transparent);
  --bl-tint-bernstein: color-mix(in oklab, #efaf4c 16%, transparent);
  --bl-tint-rot: color-mix(in oklab, #f77469 16%, transparent);
  --bl-tint-beton: color-mix(in oklab, #9ba2ab 12%, transparent);
  --bl-tint-ox: color-mix(in oklab, #e5726a 16%, transparent);
  --bl-tint-ink: color-mix(in oklab, #f2f4f6 10%, transparent);
}
[data-theme="dim"] {
  --bl-tone-ox: #ee8880;
  --bl-tint-rot: color-mix(in oklab, #f77469 12%, transparent);
}

/* ── Rules, not shadows ──────────────────────────────────────────────────────
   Every edge is the ink mixed into transparent at a fixed strength, so ONE
   definition serves every theme. Reach for a token by its job. */
:root,
[data-theme] {
  --bl-rule-faint: color-mix(in oklab, var(--color-base-content) 7%, transparent);   /* table rows, strip gaps */
  --bl-rule: color-mix(in oklab, var(--color-base-content) 10%, transparent);        /* sheet edges, dividers */
  --bl-rule-card: color-mix(in oklab, var(--color-base-content) 12%, transparent);   /* a clickable sheet at rest */
  --bl-rule-button: color-mix(in oklab, var(--color-base-content) 18%, transparent); /* outline button */
  --bl-rule-hover: color-mix(in oklab, var(--color-base-content) 30%, transparent);  /* card / button under the pointer */
  --bl-rule-control: color-mix(in oklab, var(--color-base-content) 50%, transparent);/* inputs, selects, checkboxes: 3:1 */
  --bl-shadow-sheet: 0 0 0.5px rgb(0 0 0 / 0.18), 0 1px 3px rgb(0 0 0 / 0.06);
  --bl-shadow-menu: 0 0 0.5px rgb(0 0 0 / 0.18), 0 8px 24px -8px rgb(0 0 0 / 0.18);
  --bl-backdrop: color-mix(in oklab, var(--color-base-content) 25%, transparent);
}
[data-theme="dark"],
[data-theme="contrast"],
[data-theme="dim"] {
  --bl-rule-control: color-mix(in oklab, var(--color-base-content) 38%, transparent);
  --bl-shadow-sheet: 0 0 0 1px rgb(0 0 0 / 0.25);
  --bl-shadow-menu: 0 0 0 1px rgb(0 0 0 / 0.3), 0 8px 24px -8px rgb(0 0 0 / 0.6);
  --bl-backdrop: rgb(0 0 0 / 0.55);
}