/* =========================================================
   Tokens
   Primitives (colour, spacing) → Semantics (role-based).
   Semantics always reference primitives via var(), never raw values.
   ========================================================= */

:root {
  /* ---------- Primitives: Colour ---------- */

  /* Radix Red — light, solid */
  --red-1:  #fffcfc;
  --red-2:  #fff7f7;
  --red-3:  #feebec;
  --red-4:  #ffdbdc;
  --red-5:  #ffcdce;
  --red-6:  #fdbdbe;
  --red-7:  #f4a9aa;
  --red-8:  #eb8e90;
  --red-9:  #e5484d;
  --red-10: #dc3e42;
  --red-11: #ce2c31;
  --red-12: #641723;

  /* Radix Gray — light, solid */
  --gray-1:  #fcfcfc;
  --gray-2:  #f9f9f9;
  --gray-3:  #f0f0f0;
  --gray-4:  #e8e8e8;
  --gray-5:  #e0e0e0;
  --gray-6:  #d9d9d9;
  --gray-7:  #cecece;
  --gray-8:  #bbbbbb;
  --gray-9:  #8d8d8d;
  --gray-10: #838383;
  --gray-11: #646464;
  --gray-12: #202020;

  /* Pure black — the only use is the modal scrim (see --color-overlay). Not a
     Radix step; kept separate from the gray scale, which bottoms out at #202020. */
  --black: #000000;

  /* Radix Blue — light, solid. Brought in for the keyboard focus ring. */
  --blue-1:  #fbfdff;
  --blue-2:  #f4faff;
  --blue-3:  #e6f4fe;
  --blue-4:  #d5efff;
  --blue-5:  #c2e5ff;
  --blue-6:  #acd8fc;
  --blue-7:  #8ec8f6;
  --blue-8:  #5eb1ef;
  --blue-9:  #0090ff;
  --blue-10: #0588f0;
  --blue-11: #0d74ce;
  --blue-12: #113264;

  /* ---------- Primitives: Spacing ---------- */
  /* Carbon v11 spacing scale — non-linear geometric progression. */

  --spacing-01: 0.125rem; /*   2px */
  --spacing-02: 0.25rem;  /*   4px */
  --spacing-03: 0.5rem;   /*   8px */
  --spacing-04: 0.75rem;  /*  12px */
  --spacing-05: 1rem;     /*  16px */
  --spacing-06: 1.5rem;   /*  24px */
  --spacing-07: 2rem;     /*  32px */
  --spacing-08: 2.5rem;   /*  40px */
  --spacing-09: 3rem;     /*  48px */
  --spacing-10: 4rem;     /*  64px */
  --spacing-11: 5rem;     /*  80px */
  --spacing-12: 6rem;     /*  96px */
  --spacing-13: 10rem;    /* 160px */

  /* ---------- Primitives: Typography ---------- */
  /* Families. */
  --font-family-roboto: "Roboto", system-ui, sans-serif;
  --font-family-mono:   ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;

  /* Carbon type scale — productive + expressive (steps 01–13). */
  --type-scale-01: 0.75rem;   /*  12px */
  --type-scale-02: 0.875rem;  /*  14px */
  --type-scale-03: 1rem;      /*  16px */
  --type-scale-04: 1.125rem;  /*  18px */
  --type-scale-05: 1.25rem;   /*  20px */
  --type-scale-06: 1.5rem;    /*  24px */
  --type-scale-07: 1.75rem;   /*  28px */
  --type-scale-08: 2rem;      /*  32px */
  --type-scale-09: 2.25rem;   /*  36px */
  --type-scale-10: 2.625rem;  /*  42px */
  --type-scale-11: 3rem;      /*  48px */
  --type-scale-12: 3.375rem;  /*  54px */
  --type-scale-13: 3.75rem;   /*  60px */

  /* Font weights. */
  --font-weight-light:   300;
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;

  /* Line heights — numeric modifiers (percentage as unitless). */
  --line-height-120: 1.2;
  --line-height-150: 1.5;
  --line-height-160: 1.6;
  --line-height-180: 1.8;

  /* ---------- Semantics: Colour ---------- */
  /* Naming: [object]-[base]-[modifier] — here, color-<property>-<scale>. */
  /* Every semantic references a primitive via var(), never a raw value.  */

  --color-background:  var(--gray-2);
  --color-accent:      var(--red-9);
  --color-font:        var(--gray-12);
  --color-font-light:  var(--gray-11);
  --color-border:      var(--gray-4);
  --color-border-dark: var(--gray-5);

  /* Inline text links. Blue-9 is the closest match to the reference site's
     link blue (#09f); hover steps one scale darker for a pressed-in feel. */
  --color-link:        var(--blue-9);
  --color-link-hover:  var(--blue-11);   /* two scale steps darker than rest, for a clear hover shift */

  /* Selected/active surface — e.g. the current nav tab's pill fill. Separate
     from --color-border-dark (also gray-5) to keep surface and border roles distinct. */
  --color-background-selected: var(--gray-5);

  /* Modal scrim — black at 90%, dimming the page behind the lightbox. */
  --color-overlay: color-mix(in srgb, var(--black) 90%, transparent);

  /* Inline code — subtle fill sitting one step above the page background. */
  --color-background-code: var(--gray-3);

  /* ---------- Semantics: Border Radius ---------- */
  /* No primitive layer — these four values are consumed directly by role. */

  --border-radius-none:    0;
  --border-radius-image:   0.5rem;  /* 8px — inline case-study images */
  --border-radius-card:    1rem;    /* 16px — cards, panels, modals */
  --border-radius-feature: 2.5rem;  /* 40px — feature blocks, callouts */
  --border-radius-pill:    999px;   /* buttons, tags, avatars */

  /* ---------- Semantics: Focus ---------- */
  /* Keyboard focus ring. Token setup + sizes mirror squareup.com; the colour
     resolves to Radix --blue-9 (#0090ff) — the closest match to Square's focus
     blue (#006aff). Width / style / offset / radius are fixed accessibility
     values with no primitive equivalent (same precedent as the 2px outlines
     already used per-component). */
  --accessibility-focus-outline-color:         var(--blue-9);
  --accessibility-focus-outline-width:         2px;
  --accessibility-focus-outline-style:         solid;
  --accessibility-focus-outline-offset:        2px;
  --accessibility-focus-outline-border-radius: 5px;
}

/* ---------- Base ---------- */
/* Page-level defaults so unclassed text still gets Roboto and consistent
   rendering. Smoothing is applied here (not per utility class) so it
   cascades to every text element across every page. */

/* border-box everywhere: padding and borders sit inside an element's declared
   width, so the spacing tokens compose predictably (e.g. width:100% + padding
   doesn't overflow the viewport). Foundational to every component. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-family-roboto);
  color:       var(--color-font);
  background:  var(--color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: var(--font-family-mono);
  font-size:   var(--type-scale-02);   /* 14px */
  background:  var(--color-background-code);
  padding:     var(--spacing-02) var(--spacing-03);   /* 4px 8px */
  border-radius: var(--border-radius-image);
}

/* Global keyboard-focus ring, token-driven (setup mirrors squareup.com). The
   :not(:active) guard keeps the ring off elements being actively clicked, so it
   reads as a keyboard affordance. Components may override with their own outline
   (currently the red --color-accent rings) — those win on source order, since
   their CSS loads after tokens.css. See a11y/a11y.md §1. */
:focus-visible:not(:active) {
  outline: var(--accessibility-focus-outline-width)
           var(--accessibility-focus-outline-style, solid)
           var(--accessibility-focus-outline-color);
  outline-offset: var(--accessibility-focus-outline-offset);
  border-radius: var(--accessibility-focus-outline-border-radius);
}

/* Honour reduced-motion globally — see a11y/a11y.md §7. Components keep their
   own short transitions; this neutralises them when the user opts out. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration:  0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Semantics: Typography ---------- */
/* Utility classes composed from primitives. No raw values inside. */

.heading-01 {
  font-family: var(--font-family-roboto);
  font-size:   var(--type-scale-13);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-120);
}

.heading-02 {
  font-family: var(--font-family-roboto);
  font-size:   var(--type-scale-08);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-120);
}

.heading-03 {
  font-family: var(--font-family-roboto);
  font-size:   var(--type-scale-06);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-150);
}

.heading-04 {
  font-family: var(--font-family-roboto);
  font-size:   var(--type-scale-05);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-150);
}

.heading-05 {
  font-family:    var(--font-family-roboto);
  font-size:      var(--type-scale-02);
  font-weight:    var(--font-weight-bold);
  line-height:    var(--line-height-150);
  text-transform: uppercase;
}

.body-01 {
  font-family: var(--font-family-roboto);
  font-size:   var(--type-scale-04);   /* 18px */
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-150);
}

.body-02 {
  font-family: var(--font-family-roboto);
  font-size:   var(--type-scale-03);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-180);
}

.body-03 {
  font-family: var(--font-family-roboto);
  font-size:   var(--type-scale-02);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-160);
}