/* GENERATED from design/design-tokens.json by scripts/build-tokens.mjs. Do not edit.
   Change the tokens, then run `npm run tokens:build`. See design/MIGRATION.md. */

:root {
  /* Colour primitives. Deliberately NOT in Tailwind's --color-* namespace: no utilities exist for them,
     so a component cannot use a raw hue. Semantic tokens below point at these. */
  --mdr-white: #FFFFFF;
  --mdr-ink: #001110;
  --mdr-teal-100: #C1FCF8;
  --mdr-teal-200: #83E1DB;
  --mdr-teal-300: #58B7B1;
  --mdr-teal-400: #00ACA6;
  --mdr-teal-500: #008F8A;
  --mdr-teal-600: #007A75;
  --mdr-teal-700: #004542;
  --mdr-teal-800: #003B38;
  --mdr-teal-900: #002F2D;
  --mdr-lime-400: #B0D86D;
  --mdr-clay-500: #CD6E4B;
  --mdr-cobalt-500: #2B75BA;
  --mdr-ochre-500: #CAA73A;
  --mdr-gray-50: #F6F6F6;
  --mdr-gray-100: #F5F5F5;
  --mdr-gray-500: #737373;
  --mdr-gray-600: #666666;
  --mdr-gray-700: #525252;
  --mdr-mist-200: #D9E2E1;
  --mdr-mist-400: #AABDBB;
  --mdr-mist-600: #7A9491;
  --mdr-green-100: #DCFCE7;
  --mdr-green-200: #BBF7D0;
  --mdr-green-800: #166534;
  --mdr-amber-100: #FEF3C7;
  --mdr-amber-200: #FDE68A;
  --mdr-amber-800: #92400E;
  --mdr-red-100: #FEE2E2;
  --mdr-red-200: #FECACA;
  --mdr-red-700: #B91C1C;
  --mdr-red-800: #991B1B;
  --mdr-blue-100: #DBEAFE;
  --mdr-blue-200: #BFDBFE;
  --mdr-blue-700: #1D4ED8;
  --mdr-slate-200: #E2E8F0;
  --mdr-slate-300: #CBD5E1;
  --mdr-slate-600: #475569;

  /* Size (controls, targets, icons, avatars) */
  --size-control-xs: 1.5rem;
  --size-control-sm: 2rem;
  --size-control-md: 2.5rem;
  --size-control-lg: 3rem;
  --size-control-xl: 3.5rem;
  --size-target-min: 1.5rem;
  --size-target-touch: 2.75rem;
  --size-icon-sm: 1rem;
  --size-icon-md: 1.25rem;
  --size-icon-lg: 1.5rem;
  --size-icon-stroke: 2;
  --size-checkbox: 1rem;
  --size-avatar-sm: 1.5rem;
  --size-avatar-md: 2rem;
  --size-avatar-lg: 2.5rem;
  --size-logo-min-height: 2rem;
  --size-logo-sidebar-height: 2rem;
  --size-logo-login-height: 3rem;
  --size-logo-symbol-min-height: 1.25rem;
  --size-logo-clear-space: 0.25;

  /* Density: compact, comfortable, touch. Type-style entries are chosen with text-* utilities */
  --density-compact-control-height: 2rem;
  --density-compact-table-row-height: 2.25rem;
  --density-compact-table-header-height: 2.25rem;
  --density-compact-cell-padding-x: 0.75rem;
  --density-compact-cell-padding-y: 0.5rem;
  --density-compact-control-padding-x: 0.75rem;
  --density-compact-control-gap: 0.5rem;
  --density-compact-field-gap: 0.75rem;
  --density-compact-panel-padding: 1rem;
  --density-compact-icon-size: 1rem;
  --density-comfortable-control-height: 2.5rem;
  --density-comfortable-table-row-height: 3rem;
  --density-comfortable-table-header-height: 2.5rem;
  --density-comfortable-cell-padding-x: 1rem;
  --density-comfortable-cell-padding-y: 0.75rem;
  --density-comfortable-control-padding-x: 1rem;
  --density-comfortable-control-gap: 0.75rem;
  --density-comfortable-field-gap: 1.25rem;
  --density-comfortable-panel-padding: 1.5rem;
  --density-comfortable-icon-size: 1.25rem;
  --density-touch-control-height: 3rem;
  --density-touch-table-row-height: 3.5rem;
  --density-touch-table-header-height: 2.5rem;
  --density-touch-cell-padding-x: 1rem;
  --density-touch-cell-padding-y: 1rem;
  --density-touch-control-padding-x: 1.25rem;
  --density-touch-control-gap: 0.75rem;
  --density-touch-field-gap: 1.25rem;
  --density-touch-panel-padding: 1rem;
  --density-touch-icon-size: 1.25rem;

  /* Border width */
  --border-width-none: 0;
  --border-width-default: 1px;
  --border-width-strong: 2px;
  --border-width-indicator: 3px;

  /* Focus ring */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-color: var(--color-border-focus);
  --focus-ring-color-inverse: var(--mdr-white);
  --focus-ring-offset-color: var(--color-bg-surface);
  --focus-ring-inset: 2px;

  /* Opacity */
  --opacity-backdrop-dialog: 0.5;
  --opacity-backdrop-drawer: 0.2;
  --opacity-disabled: 1;

  /* Z-index */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-sidebar: 200;
  --z-backdrop: 300;
  --z-drawer: 400;
  --z-dialog: 500;
  --z-dropdown: 600;
  --z-toast: 700;
  --z-tooltip: 800;

  /* Layout */
  --layout-sidebar-width-expanded: 16rem;
  --layout-sidebar-width-collapsed: 4rem;
  --layout-sidebar-item-height: 2.5rem;
  --layout-sidebar-item-height-touch: 2.75rem;
  --layout-sidebar-item-padding-x: 0.75rem;
  --layout-sidebar-icon-gap: 0.75rem;
  --layout-sidebar-group-gap: 1rem;
  --layout-topbar-height: 3.5rem;
  --layout-content-max-width: 100rem;
  --layout-content-form-max-width: 45rem;
  --layout-gutter-md: 1rem;
  --layout-gutter-lg: 1.5rem;
  --layout-gutter-2xl: 2rem;
  --layout-grid-columns: 12;
  --layout-grid-gap: 1.5rem;
  --layout-grid-gap-tablet: 1rem;
  --layout-section-gap: 2rem;
  --layout-page-header-padding-top: 1.5rem;
  --layout-page-header-gap: 1.5rem;
  --layout-pos-cart-width: 25rem;
  --layout-action-bar-height: 4rem;
  --layout-toast-width: 22.5rem;
  --layout-popover-max-width: 20rem;
  --layout-popover-width-md: 25rem;
  --layout-tooltip-max-width: 15rem;
  --layout-dialog-width-sm: 25rem;
  --layout-dialog-width-md: 35rem;
  --layout-dialog-width-lg: 50rem;
  --layout-drawer-width-md: 30rem;
  --layout-drawer-width-lg: 45rem;

  /* Motion */
  --duration-none: 0ms;
  --duration-fast: 100ms;
  --duration-base: 150ms;
  --duration-slow: 200ms;
  --duration-skeleton: 1500ms;
  --duration-spinner: 1000ms;
  --delay-tooltip: 500ms;
  --delay-loading: 300ms;
  --motion-distance-overlay: 0.25rem;

  /* Feedback */
  --feedback-toast-duration: 5000ms;
  --feedback-toast-duration-action: 8000ms;
}

@theme static {

  /* Semantic colour: bg-bg-surface, text-fg-primary, border-border-subtle ... */
  --color-brand-primary: var(--mdr-teal-700);
  --color-brand-secondary: var(--mdr-teal-400);
  --color-brand-accent: var(--mdr-lime-400);
  --color-brand-neutral: var(--mdr-ink);
  --color-bg-canvas: var(--mdr-gray-50);
  --color-bg-surface: var(--mdr-white);
  --color-bg-surface-elevated: var(--mdr-white);
  --color-bg-surface-subtle: var(--mdr-gray-100);
  --color-bg-input-disabled: var(--mdr-gray-100);
  --color-bg-dark: var(--mdr-teal-700);
  --color-bg-primary: var(--mdr-teal-700);
  --color-bg-accent: var(--mdr-lime-400);
  --color-bg-selected: var(--mdr-teal-100);
  --color-bg-hover: var(--mdr-gray-100);
  --color-fg-primary: var(--mdr-ink);
  --color-fg-secondary: var(--mdr-gray-700);
  --color-fg-secondary-strong: var(--mdr-gray-700);
  --color-fg-tertiary: var(--mdr-gray-600);
  --color-fg-disabled: var(--mdr-gray-500);
  --color-fg-on-primary: var(--mdr-white);
  --color-fg-on-accent: var(--mdr-ink);
  --color-fg-on-dark: var(--mdr-white);
  --color-fg-on-danger: var(--mdr-white);
  --color-border-subtle: var(--mdr-mist-200);
  --color-border-panel: var(--mdr-mist-200);
  --color-border-strong: var(--mdr-mist-600);
  --color-border-focus: var(--mdr-teal-600);
  --color-border-input-default: var(--mdr-mist-600);
  --color-border-input-hover: var(--mdr-teal-700);
  --color-border-input-focus: var(--mdr-teal-600);
  --color-border-input-error: var(--mdr-red-700);
  --color-border-input-disabled: var(--mdr-mist-200);
  --color-action-primary-default: var(--mdr-teal-700);
  --color-action-primary-hover: var(--mdr-teal-800);
  --color-action-primary-active: var(--mdr-teal-900);
  --color-action-secondary-default: var(--mdr-teal-600);
  --color-action-secondary-hover: var(--mdr-teal-700);
  --color-action-secondary-active: var(--mdr-teal-800);
  --color-action-accent-default: var(--mdr-teal-400);
  --color-action-accent-hover: var(--mdr-teal-500);
  --color-action-accent-active: var(--mdr-teal-500);
  --color-action-danger-default: var(--mdr-red-700);
  --color-action-danger-hover: var(--mdr-red-800);
  --color-action-disabled: var(--mdr-mist-200);
  --color-status-success-fill: var(--mdr-green-800);
  --color-status-success-bg: var(--mdr-green-100);
  --color-status-success-text: var(--mdr-green-800);
  --color-status-success-border: var(--mdr-green-200);
  --color-status-warning-fill: var(--mdr-amber-800);
  --color-status-warning-bg: var(--mdr-amber-100);
  --color-status-warning-text: var(--mdr-amber-800);
  --color-status-warning-border: var(--mdr-amber-200);
  --color-status-error-fill: var(--mdr-red-700);
  --color-status-error-bg: var(--mdr-red-100);
  --color-status-error-text: var(--mdr-red-700);
  --color-status-error-border: var(--mdr-red-200);
  --color-status-info-fill: var(--mdr-blue-700);
  --color-status-info-bg: var(--mdr-blue-100);
  --color-status-info-text: var(--mdr-blue-700);
  --color-status-info-border: var(--mdr-blue-200);
  --color-status-neutral-fill: var(--mdr-slate-600);
  --color-status-neutral-bg: var(--mdr-slate-200);
  --color-status-neutral-text: var(--mdr-slate-600);
  --color-status-neutral-border: var(--mdr-slate-300);
  --color-overlay-backdrop: var(--mdr-ink);

  /* Chart colours (also read by Recharts and inline SVG) */
  --color-chart-series-1: var(--mdr-teal-500);
  --color-chart-series-2: var(--mdr-clay-500);
  --color-chart-series-3: var(--mdr-cobalt-500);
  --color-chart-series-4: var(--mdr-ochre-500);
  --color-chart-total: var(--mdr-slate-600);
  --color-chart-sequential-1: var(--mdr-teal-100);
  --color-chart-sequential-2: var(--mdr-teal-200);
  --color-chart-sequential-3: var(--mdr-teal-300);
  --color-chart-sequential-4: var(--mdr-teal-500);
  --color-chart-sequential-5: var(--mdr-teal-700);
  --color-chart-diverging-positive: var(--mdr-teal-500);
  --color-chart-diverging-midpoint: var(--mdr-mist-200);
  --color-chart-diverging-negative: var(--mdr-clay-500);
  --color-chart-highlight: var(--mdr-lime-400);
  --color-chart-highlight-stroke: var(--mdr-ink);
  --color-chart-segment-gap: var(--mdr-white);
  --color-chart-gridline: var(--mdr-mist-200);
  --color-chart-axis-line: var(--mdr-gray-500);
  --color-chart-axis-label: var(--mdr-gray-600);
  --color-chart-reference-line: var(--mdr-ink);
  --color-chart-plot-background: var(--mdr-white);
  --color-chart-status-positive: var(--mdr-green-800);
  --color-chart-status-caution: var(--mdr-amber-800);
  --color-chart-status-negative: var(--mdr-red-700);

  /* Font families (--font-geist / --font-bricolage come from next/font) */
  --font-sans: var(--font-geist), ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: var(--font-bricolage), var(--font-geist), ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif;

  /* Type styles: text-<name> sets size, line height, weight and letter spacing */
  --text-display: 2rem;
  --text-display--line-height: 2.5rem;
  --text-display--font-weight: 600;
  --text-display--letter-spacing: -0.02em;
  --text-page-title: 1.5rem;
  --text-page-title--line-height: 2rem;
  --text-page-title--font-weight: 600;
  --text-page-title--letter-spacing: -0.01em;
  --text-heading-lg: 1.125rem;
  --text-heading-lg--line-height: 1.5rem;
  --text-heading-lg--font-weight: 600;
  --text-heading-lg--letter-spacing: 0em;
  --text-heading-md: 1rem;
  --text-heading-md--line-height: 1.5rem;
  --text-heading-md--font-weight: 600;
  --text-heading-md--letter-spacing: 0em;
  --text-heading-sm: 0.9375rem;
  --text-heading-sm--line-height: 1.375rem;
  --text-heading-sm--font-weight: 600;
  --text-heading-sm--letter-spacing: 0em;
  --text-body-lg: 1rem;
  --text-body-lg--line-height: 1.5rem;
  --text-body-lg--font-weight: 400;
  --text-body-lg--letter-spacing: 0em;
  --text-body-md: 0.9375rem;
  --text-body-md--line-height: 1.375rem;
  --text-body-md--font-weight: 400;
  --text-body-md--letter-spacing: 0em;
  --text-body-sm: 0.875rem;
  --text-body-sm--line-height: 1.25rem;
  --text-body-sm--font-weight: 400;
  --text-body-sm--letter-spacing: 0em;
  --text-label-lg: 1rem;
  --text-label-lg--line-height: 1.5rem;
  --text-label-lg--font-weight: 500;
  --text-label-lg--letter-spacing: 0em;
  --text-label-md: 0.875rem;
  --text-label-md--line-height: 1.25rem;
  --text-label-md--font-weight: 500;
  --text-label-md--letter-spacing: 0em;
  --text-label-sm: 0.8125rem;
  --text-label-sm--line-height: 1.125rem;
  --text-label-sm--font-weight: 500;
  --text-label-sm--letter-spacing: 0em;
  --text-label-xs: 0.8125rem;
  --text-label-xs--line-height: 1.125rem;
  --text-label-xs--font-weight: 500;
  --text-label-xs--letter-spacing: 0em;
  --text-caption: 0.8125rem;
  --text-caption--line-height: 1.125rem;
  --text-caption--font-weight: 400;
  --text-caption--letter-spacing: 0em;

  /* Spacing: p-4 = 1rem, gap-6 = 1.5rem */
  --spacing: 0.25rem;

  /* Radius */
  --radius-none: 0;
  --radius-xs: 0.25rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-full: 624.9375rem;

  /* Elevation */
  --shadow-raised: 0px 1px 3px 0px #0011101A;
  --shadow-overlay: 0px 4px 12px -2px #0011101F, 0px 2px 4px -2px #0011100F;
  --shadow-modal: 0px 16px 32px -8px #00111029, 0px 4px 8px -4px #00111014;

  /* Easing */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
}

/* Numeric styles always carry tabular figures */
@utility text-numeric-md {
  font-size: 0.9375rem;
  line-height: 1.375rem;
  font-weight: 400;
  letter-spacing: 0em;
  font-variant-numeric: tabular-nums;
}

@utility text-numeric-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0em;
  font-variant-numeric: tabular-nums;
}

@utility text-numeric-strong {
  font-size: 0.9375rem;
  line-height: 1.375rem;
  font-weight: 600;
  letter-spacing: 0em;
  font-variant-numeric: tabular-nums;
}

@utility text-kpi {
  font-size: 1.75rem;
  line-height: 2.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

@utility text-till-line {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 500;
  letter-spacing: 0em;
  font-variant-numeric: tabular-nums;
}

@utility text-till-tender {
  font-size: 1.75rem;
  line-height: 2.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

@utility text-till-total {
  font-size: 2.75rem;
  line-height: 3.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-none: 0ms;
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
    --duration-skeleton: 0ms;
    --duration-spinner: 0ms;
  }
}