/*
  Design tokens — Website Refresh 2026 1e (Figma), Component page.
  Source: https://www.figma.com/design/2W6CyIAW3cKDEqdv26CeE2/Website-Refresh-2026-1e?node-id=20-25

  Scope note: defined on :root for this prototype phase so every
  isolated component page (typography, button, hero, etc.) can use
  them directly. When this ships into the legacy site, these should
  move under the `.rs-hero-v2` wrapper selector instead of :root, so
  they don't leak into the legacy site's global CSS scope.
*/

/*
  box-sizing reset — every component built so far assumes padding is
  included within an element's declared width/height (border-box),
  not added on top of it (the browser's actual content-box default).
  Without this, any element combining an explicit width/height with
  padding renders larger than specified — e.g. Flash's 96px circle
  rendered as a 112x100 oval because its horizontal padding (16px
  total) was adding to the 96px width but its vertical padding (4px)
  wasn't adding nearly as much to the height.

  Same scope caveat as above: this is genuinely global (`*`) for the
  prototype phase, but a `*` reset has no business reaching into the
  legacy site's own markup once this integrates — it needs to become
  `.rs-hero-v2 *` (or whatever the final wrapper class is) at that
  point, not stay universal.
*/

:root {
  /* Spacing scale (Figma "Space" variable collection) */
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-36: 36px;
  --space-40: 40px;
  --space-48: 48px;
  --space-60: 60px;
  --space-64: 64px;
  --space-72: 72px;
  --space-80: 80px;
  --space-96: 96px;
  --space-280: 280px;

  /* Form-specific spacing — aliases onto the scale above, per Figma */
  --form-field-min-height: var(--space-48);
  --form-field-margin-bottom: var(--space-24);

  /* Brand colour primitives */
  --color-blue-50: #e8f5ff;
  --color-blue-100: #d0e2f4;
  --color-blue-200: #b8c9dd; /* Figma: 200-default-silver */
  --color-blue-300: #9aadca;
  --color-blue-400: #7c91b7;
  --color-blue-500: #5e75a4;
  --color-blue-600: #455878;
  --color-blue-700: #323f5c;
  --color-blue-800: #1e293b; /* Figma: 800-default-navy */
  --color-blue-900: #141d2d;

  --color-green-50: #f6ffe0;
  --color-green-100: #ebffba;
  --color-green-200: #dbf794;
  --color-green-300: #cef373; /* Figma: 300-default */
  --color-green-400: #bae354;
  --color-green-500: #9fc936;
  --color-green-600: #80a81d;
  --color-green-700: #546e13;
  --color-green-800: #2c3d00;
  --color-green-900: #1c2603;

  --color-red-50: #ffe5e5;
  --color-red-100: #f7c2c2;
  --color-red-200: #ec9f9f;
  --color-red-300: #e07d7d;
  --color-red-400: #d35b5b;
  --color-red-500: #b84444; /* Figma: 500-default */
  --color-red-600: #8f2e2e;
  --color-red-700: #661f1f;
  --color-red-800: #3d1515;
  --color-red-900: #240505;

  --color-neutral-white-50: #ffffff;
  --color-neutral-100: #f8f9f5;
  --color-neutral-200: #f4f5ed;
  --color-neutral-300: #e9ebdf;
  --color-neutral-400: #dfe0d5;
  --color-neutral-500: #c5c7bd;
  --color-neutral-600: #acada5;
  --color-neutral-700: #93948d;
  --color-neutral-800: #4c4d49;
  --color-neutral-900: #191a18;
  --color-neutral-black-1000: #000000;

  --color-purple-25: #faf7ff;
  --color-purple-50: #f3edff;
  --color-purple-100: #e8e1f7;
  --color-purple-200: #ddd2f7;
  --color-purple-300: #ccb9f7;
  --color-purple-400: #b699f7;
  --color-purple-500: #9a72f6;
  --color-purple-600: #724acf;
  --color-purple-700: #4b2a96;
  --color-purple-800: #1e0852;
  --color-purple-900: #0d002b;

  /*
    Transparency overlays — expressed as rgba() (base colour + opacity)
    rather than 8-digit hex, matching how Figma models these as a base
    hex plus a separate opacity value.
  */
  --color-transparency-dark-10: rgba(12, 13, 12, 0.1);
  --color-transparency-dark-20: rgba(12, 13, 12, 0.2);
  --color-transparency-dark-30: rgba(12, 13, 12, 0.3);
  --color-transparency-dark-40: rgba(12, 13, 12, 0.4);
  --color-transparency-dark-50: rgba(12, 13, 12, 0.5);
  --color-transparency-dark-60: rgba(12, 13, 12, 0.6);
  --color-transparency-dark-70: rgba(12, 13, 12, 0.7);
  --color-transparency-dark-80: rgba(12, 13, 12, 0.8);
  --color-transparency-dark-90: rgba(12, 13, 12, 0.9);

  --color-transparency-light-10: rgba(255, 255, 255, 0.1);
  --color-transparency-light-20: rgba(255, 255, 255, 0.2);
  --color-transparency-light-30: rgba(255, 255, 255, 0.3);
  --color-transparency-light-40: rgba(255, 255, 255, 0.4);
  --color-transparency-light-50: rgba(255, 255, 255, 0.5);
  --color-transparency-light-60: rgba(255, 255, 255, 0.6);
  --color-transparency-light-70: rgba(255, 255, 255, 0.7);
  --color-transparency-light-80: rgba(255, 255, 255, 0.8);
  --color-transparency-light-90: rgba(255, 255, 255, 0.9);

  /*
    Semantic aliases — these exist as separate variables in Figma
    (different collection than the Brand primitives above) but
    currently resolve to the same values. Aliased rather than
    duplicated so the mapping to Figma's naming stays traceable.
  */
  --color-neutral-50: var(--color-neutral-white-50);   /* Figma: Colour/Neutral/50 */
  --color-form-field-border: var(--color-neutral-900); /* Figma: Form/Field Border */
  --color-form-field-border-focus: var(--color-purple-700); /* Figma: Form/Field Border Focus */
}