/* ==========================================================================
   Design tokens — single source of truth for colour, type, space and motion.
   ========================================================================== */
:root {
  /* Colour — derived from the RISE app screenshots */
  --color-blue: #2563eb;
  --color-blue-deep: #1a47d6;
  --color-blue-soft: #4fa3ff;
  --color-cyan: #2fcbff;
  --color-ink: #0c0c0e;
  --color-charcoal: #1c1c1f;
  --color-paper: #f3f1ec;
  --color-white: #ffffff;
  --color-green: #19c37d;
  --color-gold: #ffd21f;
  --color-orange: #ff9a3c;
  --color-pink: #ff4d8d;
  --color-mint: #5bf0b0;
  --color-red: #ff2d2d;

  --color-tag-chest: #2f6bff;
  --color-tag-back: #e63946;
  --color-tag-legs: #7cb342;
  --color-tag-arms: #9c4dcc;

  --gradient-ai: linear-gradient(90deg, var(--color-orange), var(--color-pink) 50%, var(--color-mint));
  --gradient-action: linear-gradient(100deg, var(--color-cyan), var(--color-blue-soft));
  --gradient-hero: linear-gradient(180deg, var(--color-blue) 0%, var(--color-blue-deep) 100%);

  /* Typography */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
  --font-display-latin: "Anton", "Pretendard Variable", Impact, sans-serif;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-md: 1.125rem;
  --text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --text-display: clamp(2.75rem, 1.5rem + 5.6vw, 7rem);
  --text-display-xl: clamp(3.25rem, 1.5rem + 8vw, 10.5rem);
  --text-numeral: clamp(5rem, 2rem + 13vw, 15rem);

  --weight-thin: 100;
  --weight-regular: 450;
  --weight-bold: 700;
  --weight-black: 900;

  /* Space & layout */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.875rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: clamp(5rem, 3rem + 8vw, 10rem);

  --container: 1280px;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);
  --header-height: 72px;

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --shadow-poster: 0 40px 80px -30px rgb(0 0 0 / 0.55), 0 12px 24px -12px rgb(0 0 0 / 0.35);

  /* Motion — snappy, like a plate locking onto a bar */
  --ease-snap: cubic-bezier(0.2, 0.9, 0.1, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 180ms;
  --duration-base: 450ms;
  --duration-slow: 900ms;
}