/*
 * KAF42-inspired table application — reconstructed design tokens.
 * These values are proposed for the new application. They were NOT extracted
 * from the original site's CSS. A developer-portfolio preview was the visual
 * reference; table, form and semantic states extend that reference.
 * This file contains tokens, not a complete component implementation.
 * Load the chosen font separately; no font files are included.
 */
:root {
  color-scheme: dark;

  /* Surfaces */
  --bg-page: #1E1E1E;
  --bg-deep: #171817;
  --bg-surface: #242624;
  --bg-subtle: #202320;
  --bg-elevated: #2B2E2B;
  --bg-input: #1B1E1B;
  --bg-hover: #303630;
  --bg-overlay: rgba(0, 0, 0, 0.68);
  --bg-sticky: rgba(43, 46, 43, 0.96);

  /* Table surfaces: keep opaque for sticky headers and columns */
  --table-head: #292D29;
  --table-row: #242624;
  --table-stripe: #252825;
  --table-hover: #2C352C;
  --table-selected: #293F2B;
  --table-selected-hover: #314B33;

  /* Borders: subtle separators are NOT sufficient control outlines */
  --border-subtle: #343A34;
  --border-default: #465046;
  --border-control: #788578;
  --border-hover: #96A496;

  /* Text */
  --text-primary: #F3F5F2;
  --text-secondary: #C2C9C0;
  --text-muted: #AEB8AA;
  --text-disabled: #687065;
  --text-on-primary: #152013;
  --text-on-secondary: #FFFFFF;

  /* Primary brand accent */
  --accent-primary: #62CC55;
  --accent-primary-hover: #75DC68;
  --accent-primary-active: #4DB740;
  --accent-primary-soft: #293F2B;
  --accent-primary-border: rgba(98, 204, 85, 0.45);
  --accent-primary-rule: rgba(98, 204, 85, 0.4);
  --accent-primary-inset: rgba(98, 204, 85, 0.35);
  --accent-primary-wash: rgba(98, 204, 85, 0.11);

  /* Secondary accent: vivid purple is a fill, pale purple is for small text */
  --accent-secondary: #963BF4;
  --accent-secondary-hover: #9B43F3;
  --accent-secondary-active: #7E2BD6;
  --accent-secondary-text: #CBA7FF;
  --accent-secondary-soft: #362345;
  --accent-secondary-wash: rgba(150, 59, 244, 0.09);

  /* Focus and text selection */
  --focus-ring: #84E976;
  --selection-bg: #62CC55;
  --selection-text: #152013;

  /* Semantic states: text + opaque background */
  --success-text: #86DEAC;
  --success-bg: #233E2E;
  --warning-text: #F1C66B;
  --warning-bg: #3D3320;
  --error-text: #FF999B;
  --error-bg: #44292C;
  --info-text: #9AC7FF;
  --info-bg: #26364A;
  --neutral-text: #BBC4B8;
  --neutral-bg: #30372F;
  --success-halo: rgba(134, 222, 172, 0.1);
  --success-border: rgba(134, 222, 172, 0.28);
  --warning-border: rgba(241, 198, 107, 0.55);
  --warning-border-soft: rgba(241, 198, 107, 0.35);

  /* Destructive primary action */
  --danger-action-bg: #A52D42;
  --danger-action-hover: #B3344A;
  --danger-action-active: #8F2337;
  --danger-action-text: #FFFFFF;

  /* Disabled, loading and scrollbars */
  --disabled-bg: #2B2E2B;
  --disabled-border: #465046;
  --skeleton-base: #303630;
  --skeleton-highlight: #3A433A;
  --scrollbar-track: #202320;
  --scrollbar-thumb: #788578;
  --scrollbar-thumb-hover: #96A496;

  /* Hallmark typography roles */
  --font-display: "Space Grotesk", "Manrope", sans-serif;
  --font-body: "Manrope", sans-serif;
  --font-outlier: "IBM Plex Mono", monospace;
  --font-ui: var(--font-body);
  --font-mono: var(--font-outlier);
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 0.9375rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-title: 2.25rem;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Hallmark semantic spacing aliases: 4-point system */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  /* Shape and sizing */
  --radius-xs: 0.375rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-pill: 9999px;
  --content-max-width: 90rem;
  --control-height: 2.5rem;
  --table-row-height: 3.25rem;
  --table-row-height-compact: 2.5rem;
  --table-head-height: 3rem;

  /* Depth: restrained, not neon outlines around every component */
  --shadow-dropdown: 0 12px 32px rgba(0, 0, 0, 0.32);
  --shadow-dialog: 0 24px 72px rgba(0, 0, 0, 0.45);
  --glow-primary: 0 0 72px rgba(98, 204, 85, 0.12);
  --decoration-header:
    radial-gradient(ellipse 560px 280px at 90% 0%,
      rgba(98, 204, 85, 0.12), transparent 72%),
    radial-gradient(ellipse 340px 220px at 78% 0%,
      rgba(150, 59, 244, 0.04), transparent 75%);

  /* Motion */
  --duration-fast: 120ms;
  --duration-normal: 180ms;
  --duration-slow: 240ms;
  --dur-short: 120ms;
  --dur-medium: 180ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Layers */
  --z-sticky: 10;
  --z-dropdown: 40;
  --z-overlay: 60;
  --z-dialog: 70;
  --z-toast: 90;
  --z-tooltip: 100;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-slow: 0ms;
  }
}