/* Single source for the application UI. Reference provenance: docs/ui/DESIGN-SYSTEM.md. */
@font-face {
  font-family: Alexandria;
  src: url('../../branding/fonts/Alexandria-VariableFont_wght.woff2') format('woff2'),
       url('../../branding/fonts/Alexandria-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}

.idbarah-ui-v2 {
  --id-ink: #3b376f;
  --id-text: #28263e;
  --id-muted: #747184;
  --id-paper: #fbfafd;
  --id-mist: #f0eff5;
  --id-mark: #dde68a;
  --id-patina: #247879;
  --id-patina-soft: #e5f2ef;
  --id-contact-action: #137a3c;
  --id-contact-action-hover: #0f6230;
  --id-polymer: linear-gradient(140deg, #fffffff5, #f8f7fcf2);
  --id-glass: linear-gradient(135deg, #ffffffb0, #ffffff35);
  --id-polymer-ink: linear-gradient(115deg, #34305e, #454075 63%, #504b7e);
  --id-on-ink-muted: #e2def0;
  --id-stat-paper: #f1eff9;
  --id-echo-material: linear-gradient(110deg, #ffffff18, #a9a1c755);
  --id-echo-rest-x: 7px;
  --id-echo-hover-x: 12px;
  --id-echo-hover-secondary-x: 16px;
  --id-edge: #ffffffd9;
  --id-ease-out: cubic-bezier(.22, 1, .36, 1);
  --id-soft-spring: cubic-bezier(.34, 1.35, .64, 1);
  --id-hover-position: 110ms;
  --id-hover-opacity: 150ms;
  --id-press: 180ms;
  --id-fan-out: 112ms;
  --id-fan-back: 118ms;
  --id-fan-stagger: 3ms;
  --id-panel-position: 550ms;
  --id-panel-opacity: 350ms;
  --id-panel-blur: 450ms;
  --id-font: Alexandria, Arial, sans-serif;
  --id-type-display: clamp(26px, 2.4vw, 34px);
  --id-type-title: 24px;
  --id-type-section: 18px;
  --id-type-body: 14px;
  --id-type-label: 13px;
  --id-type-meta: 12px;
  --id-type-table-head: 12.5px;
  --id-table-head: #f8f7fa; --id-table-text: #555164;
  --id-primary-hover: #454075;
  --id-canvas: radial-gradient(ellipse at 100% 3%, #dddbe9 0, transparent 45%), #f2f1f6;
  --id-floating-surface: #fbfafdf5;
  --id-leading: 1.7;
  --id-weight-regular: 400;
  --id-weight-medium: 500;
  --id-weight-semibold: 600;
  --id-weight-bold: 700;
  --id-space-1: 4px; --id-space-2: 8px; --id-space-3: 12px;
  --id-space-4: 16px; --id-space-5: 20px; --id-space-6: 24px;
  --id-space-8: 32px; --id-space-10: 40px; --id-space-12: 48px;
  --id-radius-control: 18px; --id-radius-textarea: 20px;
  /* Sidebar is the master shape for all rectangular surfaces. */
  --id-radius-surface: 40px;
  /* Account initials reference: 16px corners on a 43px square. */
  --id-image-corner-ratio: .372093;
  --id-radius-image-fallback: 16px;
  --id-radius-card: var(--id-radius-surface); --id-radius-dialog: var(--id-radius-surface); --id-radius-badge: 12px;
  --id-radius-menu: var(--id-radius-surface);
  --id-corner-shape: superellipse(2);
  --id-control-ratio: .42;
  --id-border: #dcd6e8; --id-divider: #3b376f14; --id-border-width: 1px;
  --id-shadow-rest: 0 8px 22px #302c5005;
  --id-shadow-live: 0 15px 40px #302c5010;
  --id-shadow-overlay: 0 28px 48px #29204438;
  --id-overlay: linear-gradient(135deg, #fbfafdf7, #f2eff8f5);
  --id-backdrop: #24203f50;
  --id-confirm-surface: linear-gradient(135deg, #fbfafde8, #f2eff8d9);
  --id-confirm-blur: 8px;
  --id-confirm-actions-width: 360px;
  --id-hover: #f6f4fa; --id-selected: #efedf6;
  --id-disabled: #dcd7e7; --id-disabled-text: #756d87;
  /* Operational extensions inherited from config/branding.php, not canonical colours. */
  --id-danger: var(--idbarah-error, #b42358);
  --id-danger-soft: var(--idbarah-error-soft, #fceaf0);
  --id-warning: var(--idbarah-warning, #8a5a00);
  --id-warning-soft: var(--idbarah-warning-soft, #fff4d6);
  --id-info: var(--id-ink); --id-info-soft: var(--id-mist);
  --id-control-sm: 36px; --id-control-md: 44px; --id-control-lg: 52px;
  --id-textarea-min: 96px;
  --id-modal-sm: 470px; --id-modal-md: 600px; --id-modal-lg: 800px; --id-modal-xl: 1140px;
  --id-table-cell-y: 16px; --id-table-cell-x: 16px;
  --id-sidebar-width: 230px; --id-page-max: 1680px;
  --id-shell-edge: 26px; --id-shell-top: 24px; --id-shell-gap: 46px;
  --id-sidebar-rail: 76px; --id-sidebar-inset: 17px;
  --id-nav-text: #686479; --id-nav-active: linear-gradient(115deg, #fff9, #ffffffd9);
  --id-nav-shadow: inset 0 0 0 1px #fff, 0 6px 18px #3b376f09;
  --id-z-menu: 1000; --id-z-dialog: 1050; --id-z-toast: 1080;
  --id-z-sidebar: 1030; --id-z-drawer-backdrop: 1035; --id-z-drawer: 1040;
  --id-selection-duration: 380ms; --id-results-duration: 200ms;
  --id-stack-position: 350ms; --id-stack-opacity: 280ms; --id-stack-blur: 350ms;
  --id-tilt-follow: 120ms; --id-tilt-return: 850ms; --id-glare: 300ms;
  --id-check-opacity: 500ms; --id-check-rotate: 650ms; --id-check-bob: 650ms;
  --id-check-path: 600ms; --id-check-path-delay: 80ms;
  /* Breakpoints are documented here; CSS media queries cannot read custom properties. */
  --id-breakpoint-phone: 620px; --id-breakpoint-tablet: 850px;
  --id-breakpoint-nav: 992px;
  --id-breakpoint-desktop: 1150px; --id-breakpoint-wide: 1450px;
  --theme-color: var(--id-ink);
  --idbarah-primary: var(--id-ink); --idbarah-background: var(--id-paper);
  --idbarah-text-primary: var(--id-text); --idbarah-text-muted: var(--id-muted);
  --idbarah-success: var(--id-patina); --idbarah-success-soft: var(--id-patina-soft);
  --idbarah-focus: var(--id-patina);
  --idbarah-h1-size: var(--id-type-display); --idbarah-h1-line-height: 1.5;
  --idbarah-h2-size: var(--id-type-title); --idbarah-h2-line-height: 1.6;
  --idbarah-section-size: var(--id-type-section); --idbarah-section-line-height: 1.7;
  --idbarah-body-size: var(--id-type-body); --idbarah-body-line-height: var(--id-leading);
  --idbarah-label-size: var(--id-type-label); --idbarah-caption-size: var(--id-type-meta);
  font-family: Alexandria, sans-serif;
  color: var(--id-text);
  font-size: var(--id-type-body);
  line-height: var(--id-leading);
}

.idbarah-ui-v2 button,
.idbarah-ui-v2 input,
.idbarah-ui-v2 select,
.idbarah-ui-v2 textarea,
.idbarah-ui-v2 h1,
.idbarah-ui-v2 h2,
.idbarah-ui-v2 h3,
.idbarah-ui-v2 h4,
.idbarah-ui-v2 h5,
.idbarah-ui-v2 h6,
.idbarah-ui-v2 .menu-title { font-family: inherit; }
