/*
 * GSP Design System — shared foundation
 * Version 1.0.0
 *
 * This file contains product-wide tokens and interaction primitives only.
 * Surface-specific composition lives next to Admin, Account and Public UI.
 */

:root {
  color-scheme: dark;

  --gsp-color-canvas: #07110f;
  --gsp-color-canvas-raised: #0a1513;
  --gsp-color-surface: #0d1b18;
  --gsp-color-surface-raised: #12231f;
  --gsp-color-surface-strong: #183029;
  --gsp-color-surface-glass: rgba(13, 27, 24, .82);

  --gsp-color-text: #f3f8f6;
  --gsp-color-text-secondary: #b4c6c0;
  --gsp-color-text-muted: #7f9991;
  --gsp-color-text-faint: #587068;

  --gsp-color-line: rgba(174, 221, 207, .13);
  --gsp-color-line-strong: rgba(174, 221, 207, .23);

  --gsp-color-accent: #43d6a3;
  --gsp-color-accent-strong: #24b982;
  --gsp-color-accent-soft: rgba(67, 214, 163, .12);
  --gsp-color-accent-glow: rgba(67, 214, 163, .22);

  --gsp-color-info: #78a7ff;
  --gsp-color-warning: #f3bc67;
  --gsp-color-danger: #ff7d87;
  --gsp-color-success: #43d6a3;

  --gsp-radius-xs: 6px;
  --gsp-radius-sm: 10px;
  --gsp-radius-md: 14px;
  --gsp-radius-lg: 18px;
  --gsp-radius-xl: 24px;
  --gsp-radius-pill: 999px;

  --gsp-shadow-sm: 0 1px 2px rgba(0, 0, 0, .24);
  --gsp-shadow-md: 0 14px 36px rgba(0, 0, 0, .26);
  --gsp-shadow-lg: 0 26px 72px rgba(0, 0, 0, .38);
  --gsp-shadow-focus: 0 0 0 3px rgba(67, 214, 163, .16);

  --gsp-ease-standard: cubic-bezier(.2, .8, .2, 1);
  --gsp-duration-fast: 140ms;
  --gsp-duration-standard: 220ms;

  --gsp-font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --gsp-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  /* Compatibility aliases for legacy modules. */
  --bg: var(--gsp-color-canvas);
  --card: var(--gsp-color-surface);
  --text: var(--gsp-color-text);
  --muted: var(--gsp-color-text-muted);
  --line: var(--gsp-color-line);
  --blue: var(--gsp-color-accent);
  --green: var(--gsp-color-success);
  --red: var(--gsp-color-danger);
  --orange: var(--gsp-color-warning);
  --yellow: var(--gsp-color-warning);
  --radius: var(--gsp-radius-sm);
}

html {
  background: var(--gsp-color-canvas);
  font-family: var(--gsp-font-sans);
  text-rendering: optimizeLegibility;
}

body,
button,
input,
select,
textarea {
  font-family: var(--gsp-font-sans);
}

body {
  color: var(--gsp-color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: rgba(67, 214, 163, .3);
  color: #fff;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--gsp-color-accent);
  outline-offset: 2px;
}

:where(button, a, input, select, textarea) {
  transition-duration: var(--gsp-duration-fast);
  transition-timing-function: var(--gsp-ease-standard);
}

* {
  scrollbar-color: rgba(127, 153, 145, .42) transparent;
  scrollbar-width: thin;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-thumb {
  background: rgba(127, 153, 145, .34);
  border: 3px solid transparent;
  border-radius: var(--gsp-radius-pill);
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(127, 153, 145, .5);
  border: 3px solid transparent;
  background-clip: padding-box;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}