/*
 * Abstra Design System — tokens and global base.
 * Override any --ab-* token in ONE :root block in templates/base.html.
 * Setting only --ab-accent is enough: soft/contrast/hover are derived.
 */
/* Neutrals are OKLCH with an almost-zero chroma that follows the HUE of --ab-accent:
   a cool brand gets cool grays, a warm brand warm grays. Never an opinion of their own. */
:root {
  /* Surfaces & text */
  --ab-canvas: oklch(from var(--ab-accent) 0.982 0.0025 h);
  --ab-surface: oklch(from var(--ab-accent) 0.998 0.001 h);
  --ab-surface-sunken: oklch(from var(--ab-accent) 0.964 0.003 h);
  --ab-ink: oklch(from var(--ab-accent) 0.235 0.012 h);
  --ab-muted: oklch(from var(--ab-accent) 0.505 0.012 h);
  --ab-line: oklch(from var(--ab-accent) 0.925 0.004 h);          /* separators, card borders */
  --ab-line-strong: oklch(from var(--ab-accent) 0.865 0.006 h);   /* control borders (inputs, secondary buttons) */

  /* Accent (brand) — Abstra rose by default; derived values follow --ab-accent unless overridden */
  --ab-accent: #d14056;
  --ab-accent-hover: color-mix(in oklab, var(--ab-accent) 88%, white);
  --ab-accent-active: color-mix(in oklab, var(--ab-accent) 86%, black);
  --ab-accent-soft: color-mix(in oklab, var(--ab-accent) 9%, var(--ab-surface));
  --ab-accent-contrast: oklch(from var(--ab-accent) clamp(0, (0.68 - l) * 1000, 1) 0 0);
  /* Accent used as small text (links, eyebrows): nudged toward ink for 4.5:1 contrast. */
  --ab-accent-text: color-mix(in oklab, var(--ab-accent) 80%, var(--ab-ink));
  /* Focus glow around controls (antd-style), plus the outline used by :focus-visible. */
  --ab-focus-ring: 0 0 0 3px color-mix(in oklab, var(--ab-accent) 20%, transparent);

  /* Status — strong values pass 4.5:1 as text on their soft backgrounds */
  --ab-ok: oklch(0.52 0.12 152);
  --ab-warn: oklch(0.55 0.13 62);
  --ab-danger: oklch(0.54 0.19 32);
  --ab-info: oklch(0.52 0.15 255);
  --ab-ok-soft: color-mix(in oklab, var(--ab-ok) 10%, var(--ab-surface));
  --ab-warn-soft: color-mix(in oklab, var(--ab-warn) 12%, var(--ab-surface));
  --ab-danger-soft: color-mix(in oklab, var(--ab-danger) 9%, var(--ab-surface));
  --ab-info-soft: color-mix(in oklab, var(--ab-info) 9%, var(--ab-surface));

  /* Typography — Inter when available (load it in base.html), native UI font otherwise */
  --ab-font-sans: "Inter", "InterVariable", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --ab-font-display: var(--ab-font-sans);
  --ab-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* Code blocks (ab-code) stay dark in both color schemes. */
  --ab-code-bg: #12151b;
  --ab-code-ink: #e6e9ef;
  --ab-code-muted: #9aa4b2;
  --ab-text-xs: 0.75rem;     /* 12 */
  --ab-text-sm: 0.8125rem;   /* 13 */
  --ab-text-md: 0.875rem;    /* 14 — body / controls */
  --ab-text-lg: 1rem;        /* 16 */
  --ab-text-xl: 1.25rem;     /* 20 */
  --ab-text-2xl: 1.5rem;     /* 24 */
  --ab-text-3xl: 1.875rem;   /* 30 */
  --ab-text-4xl: 2.375rem;   /* 38 */
  /* Line heights: always whole pixels on the 2/4px grid, paired with the sizes above. */
  --ab-leading-xs: 20px;     /* 12 */
  --ab-leading-sm: 20px;     /* 13 */
  --ab-leading-md: 22px;     /* 14 */
  --ab-leading-lg: 24px;     /* 16 */
  --ab-leading-xl: 28px;     /* 20 */
  --ab-leading-2xl: 32px;    /* 24 */
  --ab-leading-3xl: 38px;    /* 30 */
  --ab-leading-4xl: 46px;    /* 38 */

  /* Shape & elevation (antd-like: crisp, layered, never heavy) */
  --ab-radius-xs: 2px;          /* checkboxes, tiny marks */
  --ab-radius-sm: 4px;          /* sm controls, tags, menu items */
  --ab-radius-control: 6px;     /* md/lg controls */
  --ab-radius-container: 8px;   /* cards, tables, popovers, dialogs */
  --ab-radius-pill: 999px;      /* badges, avatars, switches */
  --ab-shadow: 0 1px 2px 0 oklch(0.2 0 0 / 0.03), 0 1px 6px -1px oklch(0.2 0 0 / 0.02), 0 2px 4px 0 oklch(0.2 0 0 / 0.02);
  --ab-shadow-raised: 0 1px 2px -2px oklch(0.2 0 0 / 0.16), 0 3px 6px 0 oklch(0.2 0 0 / 0.12), 0 5px 12px 4px oklch(0.2 0 0 / 0.09);
  --ab-shadow-overlay: 0 6px 16px 0 oklch(0.2 0 0 / 0.08), 0 3px 6px -4px oklch(0.2 0 0 / 0.12), 0 9px 28px 8px oklch(0.2 0 0 / 0.05);

  /* Spacing scale (gap="1".."8") */
  --ab-space-0: 0;
  --ab-space-1: 4px;
  --ab-space-2: 8px;
  --ab-space-3: 12px;
  --ab-space-4: 16px;
  --ab-space-5: 24px;
  --ab-space-6: 32px;
  --ab-space-7: 48px;
  --ab-space-8: 64px;

  /* Motion — use these for every transition/animation. All become 0ms under prefers-reduced-motion. */
  --ab-duration-fast: 120ms;   /* hover, press, color changes */
  --ab-duration: 200ms;        /* open/close of small things: tooltips, dropdowns, toggles */
  --ab-duration-slow: 300ms;   /* dialogs, drawers, page-level panels */
  --ab-ease-out: cubic-bezier(0.23, 1, 0.32, 1);           /* entering (ease-out-quint) */
  --ab-ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);    /* leaving */
  --ab-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);  /* moving/resizing */
  --ab-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);      /* small overshoot: checks, switches, toasts */

  /* Sizes (antd-like). Every interactive control is exactly one of these heights. */
  --ab-control-height-sm: 24px;
  --ab-control-height: 32px;
  --ab-control-height-lg: 40px;
  /* Spacing by role — components use these, never ad-hoc values. All on the 4px grid. */
  --ab-control-padding-x-sm: 8px;
  --ab-control-padding-x: 12px;     /* inputs, selects, menu items */
  --ab-control-padding-x-lg: 16px;
  --ab-button-padding-x-sm: 8px;
  --ab-button-padding-x: 16px;
  --ab-button-padding-x-lg: 20px;
  --ab-gap-icon-sm: 4px;            /* icon ↔ text inside sm controls */
  --ab-gap-icon: 8px;               /* icon ↔ text inside md/lg controls */
  --ab-gap-field: 8px;              /* label ↔ control */
  --ab-gap-help: 4px;               /* control ↔ help/error text */
  --ab-pad-card: 24px;              /* card / dialog / drawer body */
  --ab-pad-panel: 4px;              /* dropdown, popover listbox inner padding */
  --ab-icon-sm: 14px;
  --ab-icon: 16px;
  --ab-icon-lg: 20px;
  /* Density */
  --ab-cell-padding-y: 12px;
  --ab-cell-padding-x: 16px;

  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ab-duration-fast: 0ms;
    --ab-duration: 0ms;
    --ab-duration-slow: 0ms;
  }
}

:root[data-density="compact"] {
  --ab-control-height-sm: 20px;
  --ab-control-height: 28px;
  --ab-control-height-lg: 36px;
  --ab-cell-padding-y: 8px;
  --ab-cell-padding-x: 12px;
  --ab-pad-card: 16px;
}

:root[data-theme="dark"] {
  --ab-canvas: oklch(from var(--ab-accent) 0.165 0.006 h);
  --ab-surface: oklch(from var(--ab-accent) 0.205 0.007 h);
  --ab-surface-sunken: oklch(from var(--ab-accent) 0.245 0.008 h);
  --ab-ink: oklch(from var(--ab-accent) 0.945 0.004 h);
  --ab-muted: oklch(from var(--ab-accent) 0.72 0.01 h);
  --ab-line: oklch(from var(--ab-accent) 0.29 0.008 h);
  --ab-line-strong: oklch(from var(--ab-accent) 0.375 0.01 h);
  --ab-accent: #f0788a;
  --ab-ok: oklch(0.74 0.13 152);
  --ab-warn: oklch(0.79 0.13 75);
  --ab-danger: oklch(0.7 0.16 28);
  --ab-info: oklch(0.72 0.12 250);
  --ab-accent-hover: color-mix(in oklab, var(--ab-accent) 85%, white);
  --ab-accent-soft: color-mix(in oklab, var(--ab-accent) 16%, var(--ab-surface));
  --ab-accent-text: var(--ab-accent);
  --ab-ok-soft: color-mix(in oklab, var(--ab-ok) 15%, var(--ab-surface));
  --ab-warn-soft: color-mix(in oklab, var(--ab-warn) 15%, var(--ab-surface));
  --ab-danger-soft: color-mix(in oklab, var(--ab-danger) 15%, var(--ab-surface));
  --ab-info-soft: color-mix(in oklab, var(--ab-info) 15%, var(--ab-surface));
  --ab-shadow: 0 1px 2px 0 oklch(0 0 0 / 0.35);
  --ab-shadow-raised: 0 4px 12px 0 oklch(0 0 0 / 0.45);
  --ab-shadow-overlay: 0 8px 28px 0 oklch(0 0 0 / 0.55), 0 0 0 1px var(--ab-line);
  --ab-code-bg: oklch(from var(--ab-accent) 0.135 0.006 h);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --ab-canvas: oklch(from var(--ab-accent) 0.165 0.006 h);
    --ab-surface: oklch(from var(--ab-accent) 0.205 0.007 h);
    --ab-surface-sunken: oklch(from var(--ab-accent) 0.245 0.008 h);
    --ab-ink: oklch(from var(--ab-accent) 0.945 0.004 h);
    --ab-muted: oklch(from var(--ab-accent) 0.72 0.01 h);
    --ab-line: oklch(from var(--ab-accent) 0.29 0.008 h);
    --ab-line-strong: oklch(from var(--ab-accent) 0.375 0.01 h);
    --ab-accent: #f0788a;
    --ab-ok: oklch(0.74 0.13 152);
    --ab-warn: oklch(0.79 0.13 75);
    --ab-danger: oklch(0.7 0.16 28);
    --ab-info: oklch(0.72 0.12 250);
    --ab-accent-hover: color-mix(in oklab, var(--ab-accent) 85%, white);
    --ab-accent-soft: color-mix(in oklab, var(--ab-accent) 16%, var(--ab-surface));
    --ab-accent-text: var(--ab-accent);
    --ab-ok-soft: color-mix(in oklab, var(--ab-ok) 15%, var(--ab-surface));
    --ab-warn-soft: color-mix(in oklab, var(--ab-warn) 15%, var(--ab-surface));
    --ab-danger-soft: color-mix(in oklab, var(--ab-danger) 15%, var(--ab-surface));
    --ab-info-soft: color-mix(in oklab, var(--ab-info) 15%, var(--ab-surface));
    --ab-shadow: 0 1px 2px 0 oklch(0 0 0 / 0.35);
    --ab-shadow-raised: 0 4px 12px 0 oklch(0 0 0 / 0.45);
    --ab-shadow-overlay: 0 8px 28px 0 oklch(0 0 0 / 0.55), 0 0 0 1px var(--ab-line);
    --ab-code-bg: oklch(from var(--ab-accent) 0.135 0.006 h);
    color-scheme: dark;
  }
}

/* Global base: minimal, only what every page needs. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ab-canvas);
  color: var(--ab-ink);
  font-family: var(--ab-font-sans);
  font-size: var(--ab-text-md);
  line-height: var(--ab-leading-md);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";  /* Inter: single-storey a, open digits */
  text-rendering: optimizeLegibility;
}
:focus-visible { outline: 2px solid var(--ab-accent); outline-offset: 2px; }
::selection { background: var(--ab-accent-soft); }
/* Links in content; slotted nav links keep the component styling. */
:where(a:not([slot])) { color: var(--ab-accent-text); }
h1, h2, h3, h4 { font-family: var(--ab-font-display); line-height: 1.25; margin: 0; letter-spacing: -0.011em; }
p { margin: 0; }
/* @generated undefined-components start (scripts/gen-lazy.mjs) */
/* Until its definition loads, a component is invisible but keeps its place (no flash of raw markup). */
:where(ab-affix, ab-alert, ab-anchor, ab-app, ab-aspect-ratio, ab-avatar, ab-avatar-group, ab-badge, ab-breadcrumb, ab-button, ab-button-group, ab-calendar, ab-card, ab-carousel, ab-cascader, ab-chart, ab-checkbox, ab-checkbox-group, ab-cluster, ab-collapse, ab-collapse-item, ab-color-picker, ab-combobox, ab-context-menu, ab-date-picker, ab-date-range, ab-descriptions, ab-diagram, ab-divider, ab-dropdown, ab-edge, ab-empty, ab-field, ab-filter-bar, ab-float-button, ab-float-button-group, ab-grid, ab-hover-card, ab-icon, ab-image, ab-input, ab-input-otp, ab-kbd, ab-kpi, ab-link, ab-list, ab-list-item, ab-mentions, ab-menu, ab-menu-group, ab-menu-item, ab-node, ab-notifier, ab-number-input, ab-page-header, ab-pagination, ab-paragraph, ab-popconfirm, ab-popover, ab-progress, ab-prose, ab-qrcode, ab-radio, ab-radio-group, ab-rate, ab-result, ab-scroll-area, ab-segmented, ab-select, ab-skeleton, ab-slider, ab-sparkline, ab-spinner, ab-split, ab-splitter, ab-splitter-panel, ab-spreadsheet, ab-stack, ab-statistic, ab-steps, ab-submenu, ab-switch, ab-tab-panel, ab-table, ab-tabs, ab-tag, ab-text, ab-time-picker, ab-timeline, ab-timeline-item, ab-title, ab-toaster, ab-toggle, ab-toggle-group, ab-tooltip, ab-transfer, ab-tree, ab-tree-select, ab-upload, ab-watermark):not(:defined) { visibility: hidden; }
:where(ab-dialog, ab-drawer, ab-command, ab-tour):not(:defined) { display: none; }
:where(ab-tooltip, ab-popover, ab-dropdown, ab-popconfirm):not(:defined) > [slot="content"], ab-hover-card:not(:defined) > :not([slot="trigger"]) { display: none; }
/* @generated undefined-components end */
/* ab-code loads lazily: until then show its text as a plain block of the same size (no layout jump). */
ab-code:not(:defined) {
  display: block; overflow: auto; white-space: pre; padding: var(--ab-space-4); border-radius: var(--ab-radius-container);
  background: var(--ab-code-bg); color: var(--ab-code-ink); font: var(--ab-text-sm) / var(--ab-leading-sm) var(--ab-font-mono);
}
/* ab-chart loads lazily: reserve its plot height (the `height` attribute, 280 by default) so the page doesn't jump. */
ab-chart:not(:defined) { display: block; min-height: 280px; min-height: attr(height px, 280px); }