/* =========================================================================
   Roboskills Competition design tokens
   Single source of truth for colour, type, spacing, radius, shadow, motion.

   Colours are sampled from the Roboskills logo: the robot's blue (#00a0e3),
   the slate of its ring (#315669) and the pale blue of its highlights
   (#a1d8f6). The lime is roboskills.fi's own accent, so the two sites read as
   one family. Dark-first, like roboskills.fi: an engineering sheet at night.
   ========================================================================= */

:root {
  /* ---------------------------------------------------------------- brand */
  --rs-blue: #00a0e3;
  --rs-blue-bright: #5ecdff;
  --rs-sky: #a1d8f6;
  --rs-slate: #315669;
  --rs-slate-bright: #5f8fa6;
  --rs-lime: #d6fb23;
  --rs-lime-bright: #e6ff5c;

  /* ------------------------------------------------------------- surfaces */
  --rs-ink: #070b12;
  --rs-surface: #0c121c;
  --rs-surface-1: #111a27;
  --rs-surface-2: #172233;
  --rs-surface-3: #1f2d42;

  /* -------------------------------------------------------------- semantic */
  --rs-bg: var(--rs-ink);
  --rs-bg-subtle: var(--rs-surface);
  --rs-bg-card: var(--rs-surface-1);
  --rs-bg-card-hover: var(--rs-surface-2);

  --rs-text: #ffffff;
  --rs-text-muted: #a3b4c8;
  --rs-text-subtle: #7d8fa6;
  --rs-text-on-accent: #070b12;

  --rs-border: rgba(161, 216, 246, 0.12);
  --rs-border-strong: rgba(161, 216, 246, 0.26);

  --rs-link: var(--rs-blue-bright);
  --rs-link-hover: var(--rs-lime);

  --rs-success: #58e08b;
  --rs-danger: #ff7b7b;

  /* Blueprint grid: the faint ruled lines behind every diagram and the hero. */
  --rs-grid-line: rgba(161, 216, 246, 0.07);

  /* Per-discipline accents. Selected by .accent--<name>. */
  --rs-accent-blue: var(--rs-blue);
  --rs-accent-lime: var(--rs-lime);
  --rs-accent-sky: var(--rs-sky);
  --rs-accent-slate: var(--rs-slate-bright);

  --rs-glow: radial-gradient(60% 80% at 15% 0%, rgba(0, 160, 227, 0.22), transparent 70%),
    radial-gradient(50% 70% at 90% 100%, rgba(214, 251, 35, 0.1), transparent 70%);

  /* ------------------------------------------------------------ typography */
  --rs-font-sans:
    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    sans-serif;
  /* Condensed and heavy: big headlines without stealing the width a Finnish
     compound needs. Cyrillic falls through to Oswald (see fonts.css). */
  --rs-font-display:
    'Barlow Condensed', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --rs-font-mono: 'SFMono-Regular', ui-monospace, Menlo, Consolas, 'Liberation Mono', monospace;

  --rs-text-xs: 0.75rem;
  --rs-text-sm: 0.875rem;
  --rs-text-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --rs-text-lg: clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem);
  --rs-text-xl: clamp(1.25rem, 1.16rem + 0.45vw, 1.5rem);
  --rs-text-2xl: clamp(1.75rem, 1.5rem + 1.1vw, 2.5rem);
  --rs-text-3xl: clamp(2.25rem, 1.8rem + 2.1vw, 3.5rem);
  --rs-text-4xl: clamp(2.5rem, 1.9rem + 3.2vw, 4.5rem);
  --rs-text-5xl: clamp(3rem, 1.6rem + 6.4vw, 7.5rem);

  --rs-leading-tight: 0.95;
  --rs-leading-snug: 1.15;
  --rs-leading-normal: 1.6;

  --rs-tracking-wide: 0.08em;
  --rs-tracking-wider: 0.16em;

  /* ---------------------------------------------------------------- space */
  --rs-space-1: 0.25rem;
  --rs-space-2: 0.5rem;
  --rs-space-3: 0.75rem;
  --rs-space-4: 1rem;
  --rs-space-5: 1.5rem;
  --rs-space-6: 2rem;
  --rs-space-7: 2.5rem;
  --rs-space-8: 3rem;
  --rs-space-9: 4rem;
  --rs-space-10: 5rem;

  --rs-section-y: clamp(3.5rem, 2.4rem + 3.4vw, 6.5rem);
  --rs-gutter: clamp(1rem, 0.4rem + 2.2vw, 3rem);
  --rs-container: 1280px;
  --rs-container-narrow: 760px;
  --rs-header-h: 4.25rem;

  /* --------------------------------------------------------------- radius */
  --rs-radius-sm: 6px;
  --rs-radius: 12px;
  --rs-radius-lg: 18px;
  --rs-radius-pill: 999px;

  /* ---------------------------------------------------------------- shadow */
  --rs-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --rs-focus: 0 0 0 3px rgba(94, 205, 255, 0.6);

  /* ---------------------------------------------------------------- motion */
  --rs-duration-fast: 120ms;
  --rs-duration: 220ms;
  --rs-ease: cubic-bezier(0.2, 0.7, 0.3, 1);

  --rs-z-header: 100;
  --rs-z-drawer: 200;
}

.accent--blue { --accent: var(--rs-accent-blue); }
.accent--lime { --accent: var(--rs-accent-lime); }
.accent--sky { --accent: var(--rs-accent-sky); }
.accent--slate { --accent: var(--rs-accent-slate); }