// Design tokens exposed as CSS custom properties.
//
// These are the canonical knobs every component reads from. Consumers
// override them on `:root` (or any subtree) without touching SCSS.

:root {
  // Border radius
  --wr-border-radius-sm: 0.375rem;
  --wr-border-radius-base: 0.625rem;
  --wr-border-radius-lg: 1rem;
  --wr-border-radius-pill: 50rem;

  // Control sizing
  //
  // The shared contract every form control reads (button, input, select, …)
  // so they line up pixel-for-pixel at each size. Height is NOT fixed — it's
  // the sum of `line-height + 2×padding-y + 2×border(1px)`, so padding-y can
  // stay density-aware (`* var(--wr-density-y)`) and controls track density
  // together. Keep the three parts in sync if you retune a size.
  //   sm → 22px · md → 30px · lg → 36px   (radius 5 / 6 / 7)
  --wr-control-padding-y-sm: 0.125rem; // 2px  → 16 + 4 + 2 = 22
  --wr-control-padding-y-md: 0.25rem; // 4px  → 20 + 8 + 2 = 30
  --wr-control-padding-y-lg: 0.3125rem; // 5px  → 24 + 10 + 2 = 36
  --wr-control-padding-x-sm: 0.5rem; // 8px
  --wr-control-padding-x-md: 0.75rem; // 12px
  --wr-control-padding-x-lg: 1rem; // 16px
  --wr-control-line-height-sm: 1rem; // 16px
  --wr-control-line-height-md: 1.25rem; // 20px
  --wr-control-line-height-lg: 1.5rem; // 24px
  --wr-control-font-size-sm: var(--wr-text-xs); // 12px
  --wr-control-font-size-md: var(--wr-text-sm); // 14px
  --wr-control-font-size-lg: var(--wr-text-base); // 16px
  --wr-control-radius-sm: 5px;
  --wr-control-radius-md: 6px;
  --wr-control-radius-lg: 7px;

  // Easing curves
  --wr-ease-linear: linear;
  --wr-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --wr-ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --wr-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --wr-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  // Durations
  --wr-duration-fast: 0.1s;
  --wr-duration-base: 0.15s;
  --wr-duration-slow: 0.3s;
  --wr-duration-slower: 0.5s;

  // Transition shorthands
  --wr-transition-short: var(--wr-duration-fast) var(--wr-ease-out);
  --wr-transition-base: var(--wr-duration-base) var(--wr-ease-linear);
  --wr-transition-long: var(--wr-duration-slow) var(--wr-ease-out);

  // Elevation
  //
  // Shared shadow recipes. Components reference these (directly, or as
  // the default of their own `--wr-<component>-shadow` knob) so depth is
  // consistent across the catalog and dark mode can strengthen every
  // shadow in one place. Functional hairlines (switch knob, splitter
  // grip, color-picker rings) stay local — they aid contrast, not depth.
  --wr-shadow-xs: 0 1px 2px rgb(0 0 0 / 5%);
  --wr-shadow-sm: 0 2px 8px rgb(0 0 0 / 15%);
  --wr-shadow-overlay: 0 8px 24px rgb(0 0 0 / 12%), 0 2px 4px rgb(0 0 0 / 6%);
  --wr-shadow-float: 0 8px 24px rgb(0 0 0 / 18%);
  --wr-shadow-modal: 0 20px 48px rgb(0 0 0 / 25%);

  // Z-index scale
  //
  // Overlay panels inside the CDK container inherit its stacking; these
  // are for the lib's own fixed-position chrome.
  --wr-z-overlay: 1000;
  --wr-z-window: 1100;
  --wr-z-top: 9999;

  // Shared open-animation timing for every overlay panel
  // (dropdown / context-menu / popover / popconfirm / tooltip). Components
  // reference these so global timing tweaks land everywhere in one place.
  --wr-overlay-duration: var(--wr-duration-base);
  --wr-overlay-ease: var(--wr-ease-out);

  // Typography
  //
  // The library only declares system-font fallback chains. Apps that ship
  // their own typeface should override these on `:root` after loading the
  // theme — e.g. `:root { --wr-font-family-base: 'Inter', ...; }`.
  --wr-font-family-base:
    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --wr-font-family-mono:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  // Font size scale (1rem = 16px)
  --wr-text-xs: 0.75rem;
  --wr-text-sm: 0.875rem;
  --wr-text-base: 1rem;
  --wr-text-lg: 1.125rem;
  --wr-text-xl: 1.25rem;
  --wr-text-2xl: 1.5rem;
  --wr-text-3xl: 1.875rem;
  --wr-text-4xl: 2.25rem;
  --wr-text-5xl: 3rem;

  // Font weight scale
  --wr-font-weight-thin: 200;
  --wr-font-weight-light: 300;
  --wr-font-weight-regular: 400;
  --wr-font-weight-medium: 500;
  --wr-font-weight-semibold: 600;
  --wr-font-weight-bold: 700;
  --wr-font-weight-extrabold: 800;

  // Line height (leading)
  --wr-leading-none: 1;
  --wr-leading-tight: 1.25;
  --wr-leading-snug: 1.375;
  --wr-leading-normal: 1.5;
  --wr-leading-relaxed: 1.625;
  --wr-leading-loose: 2;

  // Letter spacing (tracking)
  --wr-tracking-tighter: -0.05em;
  --wr-tracking-tight: -0.025em;
  --wr-tracking-normal: 0;
  --wr-tracking-wide: 0.025em;
  --wr-tracking-wider: 0.05em;
  --wr-tracking-widest: 0.1em;
}

// Shared open animation for overlay panels. Every overlay component
// references this keyframe + the `--wr-overlay-*` tokens above so the
// open feel is consistent across dropdown / context-menu / popover /
// popconfirm / tooltip.
@keyframes wr-overlay-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}