/*
 * BookPoint design system — tokens.
 *
 * Everything is scoped to the `.bp-ui` root class (admin app root, booking
 * widget root, portal containers) so themes and other plugins can neither
 * read nor override these values by accident, and nothing leaks out.
 *
 * Naming: --bp-c-* colours, --bp-s-* spacing (4px scale), --bp-r-* radii,
 * --bp-fs-* font sizes, --bp-sh-* shadows, --bp-z-* layers, --bp-dur-* motion.
 *
 * Brand: set --bp-c-primary (and optionally --bp-c-on-primary) on the root
 * element; hover/active/soft shades are derived with color-mix().
 * Radius: set --bp-r-base (px) to scale every radius. Font: --bp-font.
 */

.bp-ui {
  /* ---- Brand (overridable per site) ---- */
  --bp-c-primary: #4a56e2;
  --bp-c-on-primary: #ffffff;
  --bp-c-primary-hover: color-mix(in srgb, var(--bp-c-primary) 86%, #000);
  --bp-c-primary-active: color-mix(in srgb, var(--bp-c-primary) 74%, #000);
  --bp-c-primary-soft: color-mix(in srgb, var(--bp-c-primary) 10%, var(--bp-c-surface));
  --bp-c-primary-soft-2: color-mix(in srgb, var(--bp-c-primary) 18%, var(--bp-c-surface));
  --bp-c-primary-text: color-mix(in srgb, var(--bp-c-primary) 82%, var(--bp-c-text));
  --bp-c-primary-border: color-mix(in srgb, var(--bp-c-primary) 45%, var(--bp-c-border));

  /* ---- Neutrals (cool grey) ---- */
  --bp-c-gray-25: #fbfbfc;
  --bp-c-gray-50: #f6f7f9;
  --bp-c-gray-100: #eef0f3;
  --bp-c-gray-200: #e3e6eb;
  --bp-c-gray-300: #cfd4dc;
  --bp-c-gray-400: #a2a9b6;
  --bp-c-gray-500: #636c7c;
  --bp-c-gray-600: #525a69;
  --bp-c-gray-700: #3b4250;
  --bp-c-gray-800: #252a34;
  --bp-c-gray-900: #151921;

  /* ---- Semantic surfaces & text ---- */
  --bp-c-bg: var(--bp-c-gray-50);
  --bp-c-surface: #ffffff;
  --bp-c-surface-2: var(--bp-c-gray-25);
  --bp-c-surface-3: var(--bp-c-gray-100);
  --bp-c-overlay: rgba(15, 18, 26, 0.48);
  --bp-c-border: var(--bp-c-gray-200);
  --bp-c-border-strong: var(--bp-c-gray-300);
  --bp-c-text: var(--bp-c-gray-900);
  --bp-c-text-2: var(--bp-c-gray-600); /* 7.0:1 on white */
  --bp-c-text-3: var(--bp-c-gray-500); /* 5.2:1 on white, 4.9:1 on bg — AA */
  --bp-c-text-disabled: var(--bp-c-gray-400);
  --bp-c-link: var(--bp-c-primary-text);

  /* ---- Status (text colours pass AA on their soft backgrounds and on white) ---- */
  --bp-c-success: #15803d;
  --bp-c-success-soft: #e8f7ee;
  --bp-c-success-border: #b7e4c7;
  --bp-c-warning: #a15c07;
  --bp-c-warning-soft: #fdf3e2;
  --bp-c-warning-border: #f5d49a;
  --bp-c-danger: #c4291c;
  --bp-c-danger-soft: #fdecea;
  --bp-c-danger-border: #f6c2bc;
  --bp-c-info: #1d64c2;
  --bp-c-info-soft: #e9f1fc;
  --bp-c-info-border: #bcd4f5;
  --bp-c-neutral: var(--bp-c-gray-600);
  --bp-c-neutral-soft: var(--bp-c-gray-100);
  --bp-c-neutral-border: var(--bp-c-gray-200);

  /* ---- Typography ---- */
  --bp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --bp-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --bp-fs-xs: 0.75rem;   /* 12 */
  --bp-fs-sm: 0.8125rem; /* 13 */
  --bp-fs-md: 0.875rem;  /* 14 */
  --bp-fs-base: 1rem;    /* 16 */
  --bp-fs-lg: 1.125rem;  /* 18 */
  --bp-fs-xl: 1.25rem;   /* 20 */
  --bp-fs-2xl: 1.5rem;   /* 24 */
  --bp-fs-3xl: 1.875rem; /* 30 */
  --bp-fw-regular: 400;
  --bp-fw-medium: 500;
  --bp-fw-semibold: 600;
  --bp-fw-bold: 700;
  --bp-lh-tight: 1.25;
  --bp-lh-snug: 1.4;
  --bp-lh-normal: 1.55;

  /* ---- Spacing (4px scale) ---- */
  --bp-s-0: 0;
  --bp-s-0-5: 2px;
  --bp-s-1: 4px;
  --bp-s-1-5: 6px;
  --bp-s-2: 8px;
  --bp-s-3: 12px;
  --bp-s-4: 16px;
  --bp-s-5: 20px;
  --bp-s-6: 24px;
  --bp-s-7: 28px;
  --bp-s-8: 32px;
  --bp-s-10: 40px;
  --bp-s-12: 48px;
  --bp-s-16: 64px;

  /* ---- Radius (scaled from one base value) ---- */
  --bp-r-base: 10px;
  --bp-r-xs: calc(var(--bp-r-base) * 0.4);
  --bp-r-sm: calc(var(--bp-r-base) * 0.6);
  --bp-r-md: var(--bp-r-base);
  --bp-r-lg: calc(var(--bp-r-base) * 1.4);
  --bp-r-xl: calc(var(--bp-r-base) * 2);
  --bp-r-full: 999px;

  /* ---- Elevation ---- */
  --bp-sh-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --bp-sh-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
  --bp-sh-md: 0 6px 16px -4px rgba(16, 24, 40, 0.1), 0 2px 6px -2px rgba(16, 24, 40, 0.05);
  --bp-sh-lg: 0 16px 32px -8px rgba(16, 24, 40, 0.14), 0 4px 10px -4px rgba(16, 24, 40, 0.06);
  --bp-sh-xl: 0 28px 56px -12px rgba(16, 24, 40, 0.24);

  /* ---- Layers ---- */
  --bp-z-base: 1;
  --bp-z-sticky: 20;
  --bp-z-dropdown: 1000;
  --bp-z-drawer: 100040;
  --bp-z-modal: 100050;
  --bp-z-popover: 100060;
  --bp-z-toast: 100070;
  --bp-z-tooltip: 100080;

  /* ---- Motion ---- */
  --bp-dur-fast: 120ms;
  --bp-dur-base: 200ms;
  --bp-dur-slow: 320ms;
  --bp-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --bp-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Focus ---- */
  --bp-focus-color: var(--bp-c-primary);
  --bp-focus-ring: 0 0 0 3px color-mix(in srgb, var(--bp-c-primary) 28%, transparent);

  /* ---- Control sizing (44px min touch target on touch devices) ---- */
  --bp-control-h-sm: 32px;
  --bp-control-h-md: 40px;
  --bp-control-h-lg: 48px;
  --bp-touch-target: 44px;

  color-scheme: light;
}

/* ---- Dark theme (explicit class, or automatic when the root opts in) ---- */
.bp-ui.bp-dark,
.bp-ui[data-bp-theme="dark"] {
  --bp-c-primary: #7c86ff;
  --bp-c-on-primary: #0d1020;
  --bp-c-primary-hover: color-mix(in srgb, var(--bp-c-primary) 86%, #fff);
  --bp-c-primary-active: color-mix(in srgb, var(--bp-c-primary) 74%, #fff);
  --bp-c-primary-soft: color-mix(in srgb, var(--bp-c-primary) 16%, var(--bp-c-surface));
  --bp-c-primary-soft-2: color-mix(in srgb, var(--bp-c-primary) 26%, var(--bp-c-surface));
  --bp-c-primary-text: color-mix(in srgb, var(--bp-c-primary) 70%, #fff);

  --bp-c-bg: #0f1116;
  --bp-c-surface: #171a21;
  --bp-c-surface-2: #1c2029;
  --bp-c-surface-3: #232834;
  --bp-c-overlay: rgba(0, 0, 0, 0.62);
  --bp-c-border: #2b3040;
  --bp-c-border-strong: #3a4154;
  --bp-c-text: #eceef4;
  --bp-c-text-2: #b5bccb;
  --bp-c-text-3: #939bad; /* 6.3:1 on surface */
  --bp-c-text-disabled: #5f677a;

  --bp-c-success: #4ade80;
  --bp-c-success-soft: rgba(34, 197, 94, 0.14);
  --bp-c-success-border: rgba(74, 222, 128, 0.35);
  --bp-c-warning: #fbbf24;
  --bp-c-warning-soft: rgba(245, 158, 11, 0.14);
  --bp-c-warning-border: rgba(251, 191, 36, 0.35);
  --bp-c-danger: #f87171;
  --bp-c-danger-soft: rgba(239, 68, 68, 0.14);
  --bp-c-danger-border: rgba(248, 113, 113, 0.35);
  --bp-c-info: #60a5fa;
  --bp-c-info-soft: rgba(59, 130, 246, 0.14);
  --bp-c-info-border: rgba(96, 165, 250, 0.35);
  --bp-c-neutral: #b5bccb;
  --bp-c-neutral-soft: #232834;
  --bp-c-neutral-border: #2b3040;

  --bp-sh-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --bp-sh-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
  --bp-sh-md: 0 6px 16px -4px rgba(0, 0, 0, 0.55);
  --bp-sh-lg: 0 16px 32px -8px rgba(0, 0, 0, 0.6);
  --bp-sh-xl: 0 28px 56px -12px rgba(0, 0, 0, 0.7);

  color-scheme: dark;
}

/* Sites that let the visitor's OS decide (data-bp-theme="auto"). */
@media (prefers-color-scheme: dark) {
  .bp-ui[data-bp-theme="auto"] {
    --bp-c-primary: #7c86ff;
    --bp-c-on-primary: #0d1020;
    --bp-c-primary-hover: color-mix(in srgb, var(--bp-c-primary) 86%, #fff);
    --bp-c-primary-active: color-mix(in srgb, var(--bp-c-primary) 74%, #fff);
    --bp-c-primary-soft: color-mix(in srgb, var(--bp-c-primary) 16%, var(--bp-c-surface));
    --bp-c-primary-soft-2: color-mix(in srgb, var(--bp-c-primary) 26%, var(--bp-c-surface));
    --bp-c-primary-text: color-mix(in srgb, var(--bp-c-primary) 70%, #fff);
    --bp-c-bg: #0f1116;
    --bp-c-surface: #171a21;
    --bp-c-surface-2: #1c2029;
    --bp-c-surface-3: #232834;
    --bp-c-overlay: rgba(0, 0, 0, 0.62);
    --bp-c-border: #2b3040;
    --bp-c-border-strong: #3a4154;
    --bp-c-text: #eceef4;
    --bp-c-text-2: #b5bccb;
    --bp-c-text-3: #939bad;
    --bp-c-text-disabled: #5f677a;
    --bp-c-success: #4ade80;
    --bp-c-success-soft: rgba(34, 197, 94, 0.14);
    --bp-c-success-border: rgba(74, 222, 128, 0.35);
    --bp-c-warning: #fbbf24;
    --bp-c-warning-soft: rgba(245, 158, 11, 0.14);
    --bp-c-warning-border: rgba(251, 191, 36, 0.35);
    --bp-c-danger: #f87171;
    --bp-c-danger-soft: rgba(239, 68, 68, 0.14);
    --bp-c-danger-border: rgba(248, 113, 113, 0.35);
    --bp-c-info: #60a5fa;
    --bp-c-info-soft: rgba(59, 130, 246, 0.14);
    --bp-c-info-border: rgba(96, 165, 250, 0.35);
    --bp-c-neutral: #b5bccb;
    --bp-c-neutral-soft: #232834;
    --bp-c-neutral-border: #2b3040;
    color-scheme: dark;
  }
}

/* Honour reduced-motion everywhere inside the design system. */
@media (prefers-reduced-motion: reduce) {
  .bp-ui {
    --bp-dur-fast: 1ms;
    --bp-dur-base: 1ms;
    --bp-dur-slow: 1ms;
  }
}