/*
 * LSTK Online design tokens
 *
 * This is the single source of truth for the site's visual settings.
 * Components and migrated pages must consume these semantic variables rather
 * than introduce their own colors, type scales, radii or shadows.
 */

:root {
  /* Typography */
  --ash-font-body: "Manrope", "Onest", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ash-font-tech: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --ash-font-candidate-golos: "Golos Text", sans-serif;
  --ash-font-candidate-onest: "Onest", sans-serif;
  --ash-font-candidate-plex: "IBM Plex Sans", sans-serif;
  --ash-font-size-caption: 0.75rem;
  --ash-font-size-small: 0.875rem;
  --ash-font-size-body: 1rem;
  --ash-font-size-lead: 1.125rem;
  --ash-font-size-card-title: clamp(1.25rem, 1.1rem + 0.4vw, 1.5rem);
  --ash-font-size-h3: clamp(1.375rem, 1.15rem + 0.65vw, 1.875rem);
  --ash-font-size-h2: clamp(2rem, 1.5rem + 1.35vw, 2.75rem);
  --ash-font-size-hero-compact: clamp(2.25rem, 1.95rem + 1vw, 2.75rem);
  --ash-font-size-h1: clamp(2.625rem, 2rem + 1.8vw, 4rem);
  --ash-line-height-tight: 1.08;
  --ash-line-height-heading: 1.16;
  --ash-line-height-body: 1.6;
  --ash-font-weight-regular: 400;
  --ash-font-weight-medium: 500;
  --ash-font-weight-semibold: 600;
  --ash-font-weight-bold: 700;
  --ash-font-weight-extrabold: 800;
  --ash-letter-spacing-heading: -0.025em;

  /* Brand and semantic colors */
  --ash-color-text: #121a2b;
  --ash-color-text-muted: #52627d;
  --ash-color-text-subtle: #69768f;
  --ash-color-primary: #4768eb;
  --ash-color-primary-strong: #3156dc;
  --ash-color-primary-soft: #e8efff;
  --ash-color-accent: #39bdcf;
  --ash-color-accent-strong: #187f92;
  --ash-color-surface: #ffffff;
  --ash-color-surface-glass: rgba(255, 255, 255, 0.94);
  --ash-color-surface-soft: #f5f8ff;
  --ash-color-surface-muted: #edf2fc;
  --ash-color-border: #dbe5ff;
  --ash-color-border-glass: rgba(219, 229, 255, 0.92);
  --ash-color-border-strong: #b9c9f2;
  --ash-color-success: #187a4b;
  --ash-color-success-soft: #e8f7ef;
  --ash-color-danger: #b42318;
  --ash-color-danger-soft: #fff0ee;
  --ash-color-skeleton: #e2e9f8;
  --ash-color-skeleton-highlight: #f4f7fd;
  --ash-color-focus: #174fd4;
  --ash-color-on-primary: #ffffff;
  --ash-color-on-media: rgba(255, 255, 255, 0.92);
  --ash-color-overlay: rgba(8, 16, 32, 0.72);
  --ash-scrim-hero: linear-gradient(90deg, rgba(8, 16, 32, 0.82) 0%, rgba(8, 16, 32, 0.58) 44%, rgba(8, 16, 32, 0.34) 100%), linear-gradient(180deg, rgba(8, 16, 32, 0.24) 0%, rgba(8, 16, 32, 0.72) 100%);
  --ash-backdrop-blur-copy: 5px;
  --ash-mask-model-copy-blur: radial-gradient(ellipse at 50% 50%, #000 0%, rgb(0 0 0 / 95%) 72%, transparent 100%);

  /* Layout and spacing */
  --ash-container: 73.75rem;
  --ash-page-gutter: clamp(1rem, 3vw, 2rem);
  --ash-section-space: clamp(3.5rem, 4vw, 4rem);
  --ash-section-space-compact: clamp(2.5rem, 3vw, 3rem);
  --ash-space-1: 0.25rem;
  --ash-space-2: 0.5rem;
  --ash-space-3: 0.75rem;
  --ash-space-4: 1rem;
  --ash-space-5: 1.25rem;
  --ash-space-6: 1.5rem;
  --ash-space-8: 2rem;
  --ash-space-10: 2.5rem;
  --ash-space-12: 3rem;
  --ash-space-16: 4rem;
  --ash-space-20: 5rem;
  --ash-space-24: 6rem;

  /* Shape */
  --ash-radius-none: 0;
  --ash-radius-control: 0.75rem;
  --ash-radius-inner: 1rem;
  --ash-radius-media: 1rem;
  --ash-radius-card: 1.5rem;
  --ash-radius-panel: 2rem;
  --ash-radius-pill: 999px;

  /* Depth and interaction */
  --ash-shadow-card: 0 1.125rem 2.625rem rgba(37, 58, 116, 0.1);
  --ash-shadow-card-hover: 0 1.5rem 3rem rgba(37, 58, 116, 0.15);
  --ash-shadow-navigation: 0 0.875rem 2.125rem rgba(31, 52, 105, 0.08);
  --ash-shadow-focus: 0 0 0 0.25rem rgba(23, 79, 212, 0.22);
  --ash-duration-fast: 160ms;
  --ash-duration-normal: 240ms;
  --ash-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ash-opacity-disabled: 0.55;
  --ash-opacity-loading-media: 0.52;
  --ash-focus-width: 0.1875rem;
  --ash-control-height: 3.25rem;
  --ash-control-height-compact: 2.75rem;
  --ash-lift-offset: -0.0625rem;
  --ash-press-offset: 0.0625rem;
}