/* OmnaBase design tokens — PLACEHOLDER VALUES.
   Palette and typeface are undecided; components reference the semantic tier only,
   so changing the look means editing this file and nothing else.
   Tiers: primitives (raw scales) → semantic (what components use) → component knobs. */

:root {
  /* ---------- primitives ---------- */
  --ob-font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* neutral grays (founder 2026-09-18: no warm cast anywhere) */
  --ob-gray-50:  #f8f8f8;
  --ob-gray-100: #f2f2f2;
  --ob-gray-200: #e6e6e6;
  --ob-gray-300: #d4d4d4;
  --ob-gray-400: #b0b0b0;
  --ob-gray-500: #878787;
  --ob-gray-600: #636363;
  --ob-gray-700: #474747;
  --ob-gray-800: #2b2b2b;
  --ob-gray-900: #1a1a1a;

  --ob-amber-50:  #fffaea;
  --ob-amber-100: #fdf3d0;
  --ob-amber-500: #f2b705;
  --ob-amber-600: #d9a204;

  --ob-green-100: #e2f4e8;  --ob-green-500: #2f9e5f;
  --ob-blue-50:   #f0f6fc;  --ob-blue-500:  #2271b1;  --ob-blue-600:  #135e96;   /* classic WordPress admin blue, same as Omnalingo's --om-info */
  --ob-orange-100:#fbeadb;  --ob-orange-500:#e0761b;
  --ob-red-100:   #fbe4e1;  --ob-red-500:   #d84a3f;
  --ob-indigo-100:#e7e8f9;  --ob-indigo-500:#5257c9;

  --ob-space-1: 4px;  --ob-space-2: 8px;  --ob-space-3: 12px; --ob-space-4: 16px;
  --ob-space-5: 20px; --ob-space-6: 24px; --ob-space-8: 32px; --ob-space-10: 40px;

  --ob-text-xs: 13px; --ob-text-sm: 14px; --ob-text-base: 15px; --ob-text-md: 17px;
  --ob-text-lg: 18px; --ob-text-xl: 22px; --ob-text-2xl: 32px; --ob-text-3xl: 40px;

  /* one radius for chips, labels, menus, cards and inputs; md/lg kept as names, resolve to the same value. full is for circles only. */
  --ob-radius-sm: 6px; --ob-radius-md: 6px; --ob-radius-lg: 6px; --ob-radius-full: 999px;
  /* the Omna mark: three rounded corners, the bottom left one square, like the logo. For identity marks only: avatars, counts, badges. */
  --ob-radius-mark: var(--ob-radius-lg) var(--ob-radius-lg) var(--ob-radius-lg) 0;

  --ob-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --ob-shadow-md: 0 12px 32px -8px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.06);

  /* ---------- semantic ---------- */
  --ob-bg-page:      #ffffff;            /* founder-set 2026-09-18: the page is white like the columns */
  --ob-bg-surface:   #ffffff;
  --ob-bg-muted:     var(--ob-gray-50);    /* #f8f8f8, founder-set 2026-09-18 */
  --ob-bg-hover:     var(--ob-gray-50);
  --ob-bg-selected:  var(--ob-blue-50);   /* selection is an active state: blue tint */

  --ob-border:        var(--ob-gray-200);
  --ob-border-strong: var(--ob-gray-300);

  --ob-text:           var(--ob-gray-900);
  --ob-text-secondary: var(--ob-gray-600);
  --ob-text-muted:     var(--ob-gray-500);

  /* the ONLY colour in the UI: active state (current nav item, selected row, active tab, focus) */
  --ob-accent:       var(--ob-blue-500);
  --ob-accent-hover: var(--ob-blue-600);
  --ob-accent-soft:  var(--ob-blue-50);
  --ob-on-accent:    #ffffff;
  --ob-focus:        var(--ob-blue-500);

  /* buttons are monochrome: primary almost black, secondary light gray */
  /* the primary button wears the accent: the workspace's colour, and the text that reads on it (founder, 2026-09-23) */
  --ob-btn-primary-bg:    var(--ob-accent);
  --ob-btn-primary-hover: var(--ob-accent-hover);
  --ob-btn-primary-text:  var(--ob-on-accent);
  /* an inverse surface: the floating bar that appears over a list while rows are ticked. Dark so it cannot be missed */
  --ob-inverse-bg:     var(--ob-gray-900);
  --ob-inverse-text:   #ffffff;
  --ob-inverse-muted:  var(--ob-gray-400);
  --ob-inverse-hover:  var(--ob-gray-700);
  --ob-inverse-border: var(--ob-gray-700);
  --ob-ink:          var(--ob-gray-800);   /* data marks: bars, heatmap */
  /* further series in a chart, darkest first. The UI is monochrome, so the AI's series is not a colour but a hatch: --ob-ai-hatch */
  --ob-ink-2:        var(--ob-gray-500);
  --ob-ink-3:        var(--ob-gray-300);
  --ob-ink-4:        var(--ob-gray-200);
  --ob-avatar:       var(--ob-gray-200);

  /* reserved for anything the AI produced — nothing else may use it. Currently monochrome. */
  /* the Omnalingo brand sweep (info → brand → error → warning, as on omnalingo.com): the one place colour marks the AI, a running hairline */
  --ob-ai-sweep-1: #2271b1; --ob-ai-sweep-2: #673AB7; --ob-ai-sweep-3: #d63638; --ob-ai-sweep-4: #dba617;
  --ob-ai:      var(--ob-gray-700);
  --ob-ai-soft: var(--ob-gray-100);
  --ob-ai-hatch: repeating-linear-gradient(135deg, var(--ob-ai) 0 2px, var(--ob-ai-soft) 2px 5px);   /* a data series the AI produced */
  --ob-confidence-high: var(--ob-gray-700);
  --ob-confidence-mid:  var(--ob-gray-700);
  --ob-confidence-low:  var(--ob-gray-400);

  /* monochrome: priorities are text weight, not colour. Two highlights only: accent + AI. */
  --ob-priority-low:      var(--ob-gray-500);  --ob-priority-low-soft:      var(--ob-gray-100);
  --ob-priority-normal:   var(--ob-gray-500);  --ob-priority-normal-soft:   var(--ob-gray-100);
  --ob-priority-high:     var(--ob-gray-700);  --ob-priority-high-soft:     var(--ob-gray-100);
  --ob-priority-critical: var(--ob-gray-900);  --ob-priority-critical-soft: var(--ob-gray-200);

  --ob-status-new:      var(--ob-gray-900);
  --ob-status-open:     var(--ob-gray-700);
  --ob-status-pending:  var(--ob-gray-500);
  --ob-status-resolved: var(--ob-gray-400);

  /* ---------- tag colours: data, like avatar tints. Twelve presets, used only as the dot on a tag ---------- */
  --ob-tag-gray: #8a8a8a; --ob-tag-red: #d64545; --ob-tag-orange: #e07a2f; --ob-tag-amber: #c99a1d; --ob-tag-lime: #7fa32b; --ob-tag-green: #2f9e5b;
  --ob-tag-teal: #1f9a94; --ob-tag-cyan: #2a93c4; --ob-tag-blue: #3b6fd6; --ob-tag-indigo: #5b5bd6; --ob-tag-purple: #8e4ec6; --ob-tag-pink: #d23f8f;

  /* ---------- live: someone is on this right now (collision detection). Red, because it is a warning, not a selection ---------- */
  --ob-live: var(--ob-red-500);

  /* ---------- stacking: one scale, so a layer opened from another always lands above it ---------- */
  --ob-z-bulk: 50;     /* the bulk bar, over the top bar; anything that opens goes over it */
  --ob-z-drawer: 55;   /* a panel that slides over the page, below any dialog */
  --ob-z-dialog: 60;   /* a dialog and its backdrop */
  --ob-z-menu: 70;     /* menus and palettes: they open from pages and from inside dialogs */
  --ob-z-toast: 80;    /* feedback is never covered */

  /* ---------- component knobs ---------- */
  --ob-rail-w:   84px;   /* icon plus a word under it (2026-09-21); was 64 px for icons alone */
  --ob-views-w:  232px;
  --ob-list-w:   440px;
  --ob-info-w:   340px;
  --ob-topbar-h: 64px;
  --ob-detail-max: 780px;
}

/* ---------- dark ---------- */
/* Components use semantic tokens only, so dark is this one block: the same roles on a night scale. "System" (no data-theme) follows the
   device; an explicit choice (Settings › Profile) wins in both directions. */
:root {
  --ob-night-900: #151515; --ob-night-800: #1e1e1e; --ob-night-750: #242424; --ob-night-700: #303030; --ob-night-600: #444444; --ob-night-500: #6b6b6b;
  --ob-night-400: #8f8f8f; --ob-night-300: #adadad; --ob-night-200: #cfcfcf; --ob-night-50: #eeeeee; --ob-night-blue: #14283a;
  --ob-blue-300: #6db3ec; --ob-blue-200: #94c8f2;
}
/* A workspace's own accent (data-accent on the root, the colour and its text as variables from lib/accent): the tint, the selection,
   the focus ring and the hover step all follow from the one colour. The colour and its text are the same on a dark page; only the tints are mixed for the dark ground. */
:root[data-accent] {
  --ob-accent: var(--ob-accent-user); --ob-accent-hover: color-mix(in oklab, var(--ob-accent-user), #000 14%);
  --ob-accent-soft: color-mix(in oklab, var(--ob-accent-user) 10%, var(--ob-bg-surface)); --ob-bg-selected: color-mix(in oklab, var(--ob-accent-user) 9%, var(--ob-bg-surface));
  --ob-on-accent: var(--ob-on-accent-user); --ob-focus: var(--ob-accent-user);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  color-scheme: dark;
    --ob-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --ob-shadow-md: 0 12px 32px -8px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);
    --ob-bg-page: var(--ob-night-900); --ob-bg-surface: var(--ob-night-900); --ob-bg-muted: var(--ob-night-800); --ob-bg-hover: var(--ob-night-750); --ob-bg-selected: var(--ob-night-blue);
    --ob-border: var(--ob-night-700); --ob-border-strong: var(--ob-night-600);
    --ob-text: var(--ob-night-50); --ob-text-secondary: var(--ob-night-300); --ob-text-muted: var(--ob-night-400);
    /* the accent is the same colour as on a light page, and so is the text on it: it is the workspace's colour, not the page's. Only the focus ring is lighter, to be seen on the dark ground */
    --ob-accent: var(--ob-blue-500); --ob-accent-hover: var(--ob-blue-600); --ob-accent-soft: var(--ob-night-blue); --ob-on-accent: #ffffff; --ob-focus: var(--ob-blue-300);
    /* the primary button and the bulk bar turn over with the page: light on a dark page */
    --ob-btn-primary-bg: var(--ob-accent); --ob-btn-primary-hover: var(--ob-accent-hover); --ob-btn-primary-text: var(--ob-on-accent);
    --ob-inverse-bg: var(--ob-night-50); --ob-inverse-text: var(--ob-night-900); --ob-inverse-muted: var(--ob-night-500); --ob-inverse-hover: var(--ob-night-200); --ob-inverse-border: var(--ob-night-300);
    --ob-ink: var(--ob-night-200); --ob-ink-2: var(--ob-night-400); --ob-ink-3: var(--ob-night-600); --ob-ink-4: var(--ob-night-700); --ob-avatar: var(--ob-night-700);
    --ob-ai: var(--ob-night-200); --ob-ai-soft: var(--ob-night-750);
    --ob-confidence-high: var(--ob-night-200); --ob-confidence-mid: var(--ob-night-200); --ob-confidence-low: var(--ob-night-500);
    --ob-priority-low: var(--ob-night-400); --ob-priority-low-soft: var(--ob-night-750); --ob-priority-normal: var(--ob-night-400); --ob-priority-normal-soft: var(--ob-night-750);
    --ob-priority-high: var(--ob-night-200); --ob-priority-high-soft: var(--ob-night-750); --ob-priority-critical: var(--ob-night-50); --ob-priority-critical-soft: var(--ob-night-700);
    --ob-status-new: var(--ob-night-50); --ob-status-open: var(--ob-night-200); --ob-status-pending: var(--ob-night-400); --ob-status-resolved: var(--ob-night-500);
  }

  /* the same specificity as the dark block above and later in the file, so it must say the accent again, or the dark palette's blue would win */
  :root[data-accent]:not([data-theme="light"]) {
    --ob-accent: var(--ob-accent-user); --ob-accent-hover: color-mix(in oklab, var(--ob-accent-user), #000 14%); --ob-on-accent: var(--ob-on-accent-user); --ob-focus: var(--ob-accent-user);
    --ob-accent-soft: color-mix(in oklab, var(--ob-accent-user) 22%, var(--ob-bg-surface)); --ob-bg-selected: color-mix(in oklab, var(--ob-accent-user) 18%, var(--ob-bg-surface));
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ob-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --ob-shadow-md: 0 12px 32px -8px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);
  --ob-bg-page: var(--ob-night-900); --ob-bg-surface: var(--ob-night-900); --ob-bg-muted: var(--ob-night-800); --ob-bg-hover: var(--ob-night-750); --ob-bg-selected: var(--ob-night-blue);
  --ob-border: var(--ob-night-700); --ob-border-strong: var(--ob-night-600);
  --ob-text: var(--ob-night-50); --ob-text-secondary: var(--ob-night-300); --ob-text-muted: var(--ob-night-400);
  --ob-accent: var(--ob-blue-500); --ob-accent-hover: var(--ob-blue-600); --ob-accent-soft: var(--ob-night-blue); --ob-on-accent: #ffffff; --ob-focus: var(--ob-blue-300);
  /* the primary button and the bulk bar turn over with the page: light on a dark page */
  --ob-btn-primary-bg: var(--ob-accent); --ob-btn-primary-hover: var(--ob-accent-hover); --ob-btn-primary-text: var(--ob-on-accent);
  --ob-inverse-bg: var(--ob-night-50); --ob-inverse-text: var(--ob-night-900); --ob-inverse-muted: var(--ob-night-500); --ob-inverse-hover: var(--ob-night-200); --ob-inverse-border: var(--ob-night-300);
  --ob-ink: var(--ob-night-200); --ob-ink-2: var(--ob-night-400); --ob-ink-3: var(--ob-night-600); --ob-ink-4: var(--ob-night-700); --ob-avatar: var(--ob-night-700);
  --ob-ai: var(--ob-night-200); --ob-ai-soft: var(--ob-night-750);
  --ob-confidence-high: var(--ob-night-200); --ob-confidence-mid: var(--ob-night-200); --ob-confidence-low: var(--ob-night-500);
  --ob-priority-low: var(--ob-night-400); --ob-priority-low-soft: var(--ob-night-750); --ob-priority-normal: var(--ob-night-400); --ob-priority-normal-soft: var(--ob-night-750);
  --ob-priority-high: var(--ob-night-200); --ob-priority-high-soft: var(--ob-night-750); --ob-priority-critical: var(--ob-night-50); --ob-priority-critical-soft: var(--ob-night-700);
  --ob-status-new: var(--ob-night-50); --ob-status-open: var(--ob-night-200); --ob-status-pending: var(--ob-night-400); --ob-status-resolved: var(--ob-night-500);
}
:root[data-accent][data-theme="dark"] {
  --ob-accent: var(--ob-accent-user); --ob-accent-hover: color-mix(in oklab, var(--ob-accent-user), #000 14%); --ob-on-accent: var(--ob-on-accent-user); --ob-focus: var(--ob-accent-user);
  --ob-accent-soft: color-mix(in oklab, var(--ob-accent-user) 22%, var(--ob-bg-surface)); --ob-bg-selected: color-mix(in oklab, var(--ob-accent-user) 18%, var(--ob-bg-surface));
}