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

   The system is dark-first: a near-black ground, one electric accent taken
   straight out of the logo (#d6fb23 — the colour of the robot's eyes), and
   photography carrying the colour. Surfaces step up in lightness rather than
   down, so a card reads as lit rather than boxed.
   ========================================================================= */

:root {
  /* ---------------------------------------------------------------- brand */
  --rs-lime: #d6fb23;
  --rs-lime-bright: #e6ff5c;
  --rs-lime-dark: #b4d80c;
  --rs-blue: #29b6f6;
  --rs-blue-bright: #5ecdff;
  --rs-blue-dark: #0e9bd6;
  --rs-blue-darker: #086089;
  --rs-teal: #17d1c0;
  --rs-violet: #8b6bff;
  --rs-accent: #ff6b35;
  --rs-accent-dark: #e2551f;
  --rs-navy: #0f1622;
  --rs-navy-deep: #070a11;

  /* ------------------------------------------------------------- surfaces */
  /* Five steps, each a real step: page, section, card, card-hover, chip. */
  --rs-ink: #05070c;
  --rs-surface: #0b0f18;
  --rs-surface-1: #111726;
  --rs-surface-2: #171f31;
  --rs-surface-3: #1f293e;
  --rs-surface-hover: #232f47;

  /* --------------------------------------------------------------- neutral */
  --rs-white: #ffffff;
  --rs-gray-50: #f6f9fb;
  --rs-gray-100: #eef3f7;
  --rs-gray-200: #dde6ed;
  --rs-gray-300: #c3d1dc;
  --rs-gray-400: #93a7b6;
  --rs-gray-500: #6b8092;
  --rs-gray-600: #4d6274;
  --rs-gray-700: #35485a;
  --rs-gray-800: #1f3240;
  --rs-gray-900: #12242e;

  /* -------------------------------------------------------------- semantic */
  --rs-bg: var(--rs-ink);
  --rs-bg-subtle: var(--rs-surface);
  --rs-bg-muted: var(--rs-surface-1);
  --rs-bg-dark: var(--rs-surface);
  --rs-bg-dark-deep: var(--rs-navy-deep);

  --rs-text: #ffffff;
  --rs-text-muted: #9daec6;
  --rs-text-subtle: #71829c;
  --rs-text-on-dark: #ffffff;
  --rs-text-on-dark-muted: #9daec6;

  --rs-border: rgba(255, 255, 255, 0.09);
  --rs-border-strong: rgba(255, 255, 255, 0.18);
  --rs-border-dark: rgba(255, 255, 255, 0.09);

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

  --rs-success: #58e08b;
  --rs-success-bg: rgba(46, 204, 113, 0.14);
  --rs-warning: #ffc857;
  --rs-warning-bg: rgba(255, 200, 87, 0.14);
  --rs-danger: #ff6b6b;
  --rs-danger-bg: rgba(255, 107, 107, 0.14);
  --rs-info-bg: rgba(41, 182, 246, 0.14);

  /* ------------------------------------------------------------- gradients */
  --rs-grad-blue: linear-gradient(135deg, #29b6f6 0%, #5b5bff 100%);
  --rs-grad-teal: linear-gradient(135deg, #17d1c0 0%, #0e7490 100%);
  --rs-grad-lime: linear-gradient(135deg, #d6fb23 0%, #17d1c0 100%);
  --rs-grad-orange: linear-gradient(135deg, #ffb84c 0%, #ff5a1f 100%);
  --rs-grad-violet: linear-gradient(135deg, #8b6bff 0%, #29b6f6 100%);
  --rs-grad-hero: radial-gradient(120% 120% at 15% 0%, #17243a 0%, #0b0f18 55%, #05070c 100%);

  /* The wash that lifts a dark section off the page without a border. */
  --rs-glow-blue: radial-gradient(60% 70% at 20% 0%, rgba(41, 182, 246, 0.16), transparent 70%);
  --rs-glow-lime: radial-gradient(50% 60% at 80% 0%, rgba(214, 251, 35, 0.12), transparent 70%);

  /* Read text over a photograph. Applied on every image that carries copy. */
  --rs-scrim: linear-gradient(
    180deg,
    rgba(5, 7, 12, 0) 0%,
    rgba(5, 7, 12, 0.15) 40%,
    rgba(5, 7, 12, 0.82) 100%
  );

  /* ------------------------------------------------------------ typography */
  --rs-font-sans:
    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    sans-serif;
  /* Condensed and heavy: headlines can run large without stealing the width a
     Finnish compound word needs. */
  --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.75rem, 2rem + 3.4vw, 4.75rem);
  --rs-text-5xl: clamp(3rem, 1.9rem + 5.2vw, 6.5rem);

  --rs-leading-tight: 0.95;
  --rs-leading-snug: 1.1;
  --rs-leading-normal: 1.6;
  --rs-leading-relaxed: 1.75;

  --rs-tracking-tight: -0.01em;
  --rs-tracking-normal: 0;
  --rs-tracking-wide: 0.08em;
  --rs-tracking-wider: 0.14em;

  --rs-weight-regular: 400;
  --rs-weight-medium: 500;
  --rs-weight-semibold: 600;
  --rs-weight-bold: 700;

  /* ---------------------------------------------------------------- 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-space-11: 6.5rem;

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

  /* --------------------------------------------------------------- radius */
  --rs-radius-sm: 4px;
  --rs-radius: 8px;
  --rs-radius-lg: 14px;
  --rs-radius-xl: 22px;
  --rs-radius-pill: 999px;

  /* -------------------------------------------------------------- shadows */
  --rs-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --rs-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  --rs-shadow-md: 0 14px 40px rgba(0, 0, 0, 0.5);
  --rs-shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.6);
  --rs-shadow-focus: 0 0 0 3px rgba(214, 251, 35, 0.45);
  --rs-shadow-lift: 0 18px 44px rgba(0, 0, 0, 0.55);

  /* --------------------------------------------------------------- motion */
  --rs-ease: cubic-bezier(0.22, 0.61, 0.28, 1);
  --rs-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --rs-duration-fast: 140ms;
  --rs-duration: 260ms;
  --rs-duration-slow: 520ms;

  /* --------------------------------------------------------------- layers */
  --rs-z-header: 100;
  --rs-z-drawer: 200;
  --rs-z-dialog: 300;
  --rs-z-toast: 400;
}

/* Accent utility classes used by cards and tiles. */
.accent-blue {
  --accent: var(--rs-blue);
  --accent-grad: var(--rs-grad-blue);
}
.accent-teal {
  --accent: var(--rs-teal);
  --accent-grad: var(--rs-grad-teal);
}
.accent-lime {
  --accent: var(--rs-lime);
  --accent-grad: var(--rs-grad-lime);
}
.accent-orange {
  --accent: var(--rs-accent);
  --accent-grad: var(--rs-grad-orange);
}
.accent-violet {
  --accent: var(--rs-violet);
  --accent-grad: var(--rs-grad-violet);
}