@use 'sass:color';
@use 'primitives' as *;

:root {
  color-scheme: light dark;

  // ============================================================
  // COLOR — SURFACES
  // ============================================================
  --sc-kit--color--bg--app: light-dark(#{$color-neutral-50}, #{$color-dark-900});
  --sc-kit--color--bg--panel: light-dark(#{$color-white}, #{$color-dark-800});
  --sc-kit--color--bg--element: light-dark(#{$color-neutral-100}, #{$color-dark-700});
  --sc-kit--color--bg--field: light-dark(#{$color-white}, #{$color-dark-700});
  --sc-kit--color--bg--field-alt: light-dark(#{$color-neutral-50}, #{$color-dark-700});
  --sc-kit--color--bg--hover: light-dark(#f3f5f8, #{$color-dark-700});
  --sc-kit--color--bg--active: light-dark(#eef2f8, #{$color-dark-600});
  --sc-kit--color--bg--menu-active: light-dark(#{$color-blue-50}, #{$color-dark-500});
  --sc-kit--color--bg--images: light-dark(#{$color-neutral-300}, #{$color-dark-50});
  --sc-kit--color--bg--images-subtle: light-dark(#{$color-neutral-100}, #{$color-dark-50});

  // ============================================================
  // COLOR — TEXT
  // ============================================================
  --sc-kit--color--text--primary: light-dark(#{$color-dark-800}, #{$color-white});
  --sc-kit--color--text--secondary: light-dark(#5c6370, #{$color-neutral-300});
  --sc-kit--color--text--muted: light-dark(#{$color-neutral-400}, #{$color-neutral-400});
  --sc-kit--color--text--placeholder: light-dark(#b4b9c2, #{$color-neutral-500});
  --sc-kit--color--text--label: light-dark(#{$color-neutral-500}, #{$color-neutral-300});
  --sc-kit--color--text--on-accent: #{$color-white};

  // ============================================================
  // COLOR — BORDERS
  // ============================================================
  --sc-kit--color--border: light-dark(#{$color-neutral-200}, #{$color-dark-600});
  --sc-kit--color--border--strong: light-dark(#{$color-neutral-400}, #{$color-neutral-600});
  --sc-kit--color--border--field: light-dark(#{$color-neutral-200}, #{$color-dark-600});
  --sc-kit--color--border--focus: light-dark(#{$color-blue-500}, #{$color-blue-400});

  // ============================================================
  // COLOR — BRAND / ACCENT — anchored at #144AB0
  // ============================================================
  --sc-kit--color--accent: light-dark(#{$color-blue-500}, #{$color-blue-400});
  --sc-kit--color--accent--hover: light-dark(#{$color-blue-700}, #{$color-blue-500});
  --sc-kit--color--accent--soft: light-dark(#{$color-blue-100}, #{$color-blue-900});
  --sc-kit--color--accent--softer: light-dark(#{$color-blue-50}, #{$color-blue-900});

  // ============================================================
  // COLOR — STATUS
  // ============================================================
  --sc-kit--color--danger: light-dark(#e05252, #{$color-red-400});
  --sc-kit--color--danger--hover: light-dark(#{$color-red-600}, #{$color-red-300});
  --sc-kit--color--danger--soft: light-dark(#{$color-red-50}, #{$color-red-900});

  --sc-kit--color--success: light-dark(#2ea97a, #{$color-green-400});
  --sc-kit--color--success--hover: light-dark(#{$color-green-700}, #{$color-green-300});
  --sc-kit--color--success--soft: light-dark(#{$color-green-50}, #{$color-green-900});

  --sc-kit--color--warning: light-dark(#e0a73a, #{$color-orange-400});
  --sc-kit--color--warning--soft: light-dark(#{$color-orange-50}, #{$color-orange-900});

  --sc-kit--color--info: light-dark(#{$color-blue-500}, #{$color-blue-400});
  --sc-kit--color--info--hover: light-dark(#{$color-blue-700}, #{$color-blue-300});
  --sc-kit--color--info--soft: light-dark(#{$color-blue-50}, #{$color-blue-900});

  // ============================================================
  // COLOR — TONES (categorical palette; fg + soft bg, component-neutral)
  // ============================================================
  --sc-kit--tone--gray--fg: light-dark(#{$color-neutral-500}, #{$color-neutral-400});
  --sc-kit--tone--gray--muted: light-dark(#{$color-neutral-400}, #{$color-neutral-600});
  --sc-kit--tone--gray--bg: light-dark(#{$color-neutral-50}, #{$color-dark-600});
  --sc-kit--tone--blue--fg: light-dark(#{$color-blue-500}, #{$color-blue-400});
  --sc-kit--tone--blue--muted: light-dark(#{$color-blue-200}, #{$color-blue-700});
  --sc-kit--tone--blue--bg: light-dark(#{$color-blue-50}, #{$color-blue-900});
  --sc-kit--tone--green--fg: light-dark(#{$color-green-500}, #{$color-green-400});
  --sc-kit--tone--green--muted: light-dark(#{$color-green-200}, #{$color-green-700});
  --sc-kit--tone--green--bg: light-dark(#{$color-green-50}, #{$color-green-900});
  --sc-kit--tone--red--fg: light-dark(#{$color-red-500}, #{$color-red-400});
  --sc-kit--tone--red--muted: light-dark(#{$color-red-200}, #{$color-red-700});
  --sc-kit--tone--red--bg: light-dark(#{$color-red-50}, #{$color-red-900});
  --sc-kit--tone--orange--fg: light-dark(#{$color-orange-500}, #{$color-orange-400});
  --sc-kit--tone--orange--muted: light-dark(#{$color-orange-200}, #{$color-orange-700});
  --sc-kit--tone--orange--bg: light-dark(#{$color-orange-100}, #{$color-orange-900});
  --sc-kit--tone--teal--fg: light-dark(#3d7068, #5f938a);
  --sc-kit--tone--teal--muted: light-dark(#3d7068, #5f938a);
  --sc-kit--tone--teal--bg: light-dark(#eef4f3, #16302b);

  // ============================================================
  // COLOR — OVERLAYS
  // ============================================================
  --sc-kit--color--bg--scrim: light-dark(rgb(0 0 0 / 45%), rgb(0 0 0 / 65%));
  --sc-kit--color--bg--tooltip: light-dark(#{$color-dark-800}, #{$color-dark-700});
  --sc-kit--color--text--tooltip: #{$color-white};

  // Z-scale — relative stacking order for the library's overlay components.
  // 100-unit gaps leave room for consumers to inject custom layers between.
  // Tooltip sits above modals so tooltips work inside dialogs.
  --sc-kit--z-index--popover: 1000;
  --sc-kit--z-index--modal: 1100;
  --sc-kit--z-index--toast: 1200;
  --sc-kit--z-index--tooltip: 1300;

  // ============================================================
  // SPACING (px-as-rem; 1rem = 16px)
  // ============================================================
  --sc-kit--space--0: 0;
  --sc-kit--space--1: 0.25rem;
  --sc-kit--space--2: 0.5rem;
  --sc-kit--space--3: 0.75rem;
  --sc-kit--space--4: 1rem;
  --sc-kit--space--5: 1.25rem;
  --sc-kit--space--6: 1.5rem;
  --sc-kit--space--8: 2rem;
  --sc-kit--space--10: 2.5rem;
  --sc-kit--space--12: 3rem;
  --sc-kit--space--16: 4rem;
  --sc-kit--space--20: 5rem;

  // ============================================================
  // FIELD SIZING — cross-cutting for input-shaped controls
  // (Input, Textarea, NumeralInput, DatePicker, Select triggers)
  // ============================================================
  --sc-kit--field--height--sm: 1.8125rem; // 29px
  --sc-kit--field--height--md: 2rem; // 32px
  --sc-kit--field--height--lg: 2.5rem; // 40px

  --sc-kit--field--padding-inline--sm: 0.5rem; // 8px
  --sc-kit--field--padding-inline--md: 0.625rem; // 10px
  --sc-kit--field--padding-inline--lg: 0.75rem; // 12px

  --sc-kit--field--icon--size--xs: 0.875rem; // 14px
  --sc-kit--field--icon--size--sm: 0.9375rem; // 15px
  --sc-kit--field--icon--size--md: 1rem; // 16px
  --sc-kit--field--icon--size--lg: 1.125rem; // 18px
  --sc-kit--field--icon--size--xl: 1.25rem; // 20px

  // ============================================================
  // RADII
  // ============================================================
  --sc-kit--radius--none: 0;
  --sc-kit--radius--sm: 4px;
  --sc-kit--radius--md: 6px;
  --sc-kit--radius--lg: 8px;
  --sc-kit--radius--xl: 12px;
  --sc-kit--radius--pill: 999px;
  --sc-kit--radius--circle: 50%;

  --sc-kit--field--border-radius--sm: var(--sc-kit--radius--sm); // 4px
  --sc-kit--field--border-radius--md: var(--sc-kit--radius--md); // 6px

  // ============================================================
  // TYPOGRAPHY
  // ============================================================
  --sc-kit--font-size--xs: 11px;
  --sc-kit--font-size--sm: 12px;
  --sc-kit--font-size--md: 14px;
  --sc-kit--font-size--lg: 16px;
  --sc-kit--font-size--xl: 20px;
  --sc-kit--font-size--2xl: 26px;
  --sc-kit--font-size--3xl: 32px;
  --sc-kit--font-size--4xl: 40px;

  --sc-kit--line-height--xs: 16px;
  --sc-kit--line-height--sm: 18px;
  --sc-kit--line-height--md: 20px;
  --sc-kit--line-height--lg: 24px;
  --sc-kit--line-height--xl: 28px;
  --sc-kit--line-height--2xl: 34px;
  --sc-kit--line-height--3xl: 40px;
  --sc-kit--line-height--4xl: 48px;

  // Each value keeps (control height − this) even, or the label's line box starts on a half pixel and the engines break that tie in opposite directions.
  --sc-kit--line-height--control--xs: 14px;
  --sc-kit--line-height--control--sm: 15px;
  --sc-kit--line-height--control--md: 18px;
  --sc-kit--line-height--control--lg: 22px;

  --sc-kit--font-weight--regular: 400;
  --sc-kit--font-weight--medium: 500;
  --sc-kit--font-weight--semibold: 600;
  --sc-kit--font-weight--bold: 700;
  --sc-kit--font-weight--black: 900;

  --sc-kit--letter-spacing--tight: -0.01em;
  --sc-kit--letter-spacing--normal: 0;
  --sc-kit--letter-spacing--wide: 0.04em;

  --sc-kit--leading--tight: 1.2;
  --sc-kit--leading--normal: 1.5;
  --sc-kit--leading--relaxed: 1.65;

  --sc-kit--font--sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --sc-kit--font--display: 'Source Sans Pro', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --sc-kit--font--mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  // ============================================================
  // SHADOWS
  // ============================================================
  --sc-kit--shadow--none: none;
  --sc-kit--shadow--sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --sc-kit--shadow--md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
  --sc-kit--shadow--lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --sc-kit--shadow--xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
  --sc-kit--shadow--card: 0 2px 16px rgba(0, 0, 0, 0.035);
  --sc-kit--shadow--hairline: 0 1px 1px rgba(0, 0, 0, 0.1);
  --sc-kit--shadow--focus: var(--sc-kit--focus-ring);

  // ============================================================
  // FILTERS
  // ============================================================
  --sc-kit--filter--icon-overlay: drop-shadow(1px 1px #000);

  // ============================================================
  // MOTION
  // ============================================================
  --sc-kit--duration--fast: 80ms;
  --sc-kit--duration--base: 160ms;
  --sc-kit--duration--slow: 240ms;

  --sc-kit--ease--default: cubic-bezier(0.4, 0, 0.2, 1);
  --sc-kit--ease--in: cubic-bezier(0.4, 0, 1, 1);
  --sc-kit--ease--out: cubic-bezier(0, 0, 0.2, 1);

  // ============================================================
  // FOCUS RING
  // ============================================================
  --sc-kit--focus-ring: 0 0 0 3px #{color.change($color-blue-500, $alpha: 0.18)};
  --sc-kit--focus-ring--error: 0 0 0 3px #{color.change($color-red-500, $alpha: 0.18)};
}