/* ==========================================================================
   Design tokens. Every colour, size, radius and easing on the site comes from
   here — change a value once and the whole page follows.

   The palette is the name: deep water for the ground, coral for the one thing
   that is allowed to shout. One accent, used sparingly, reads as confidence;
   three accents read as a template.
   ========================================================================== */
:root {
  /* --- ground ---------------------------------------------------------- */
  /* Deep navy rather than neutral black: the reference language for this site
     is a lit circuit board, and a board reads as blue-black, not grey-black. */
  --bg:            #060A14;
  --bg-2:          #0A1020;   /* alternating section band */
  --surface:       #0E1626;   /* cards */
  --surface-2:     #142033;   /* raised / hover */
  --line:          rgba(120, 170, 255, .12);
  --line-strong:   rgba(120, 170, 255, .22);

  /* --- ink -------------------------------------------------------------- */
  --ink:           #EDF3F5;
  --ink-2:         #9DACB4;
  --ink-3:         #6C7C85;

  /* --- the brand ramp -------------------------------------------------- */
  /* Sampled straight out of the wordmark: the logo runs teal → blue → violet →
     mauve → coral, left to right. Those nine values are the only accent
     colours on the site, and the six services take six of them in order, so
     the page and the logo are visibly the same object. */
  --c-teal:    #24969B;
  --c-cyan:    #3391B5;
  --c-blue:    #4790D4;
  --c-indigo:  #5F8DDE;
  --c-violet:  #8480D4;
  --c-purple:  #9B7CCA;
  --c-mauve:   #B97DAE;
  --c-pink:    #C97EA0;
  --c-coral:   #F6776C;

  /* Coral is the primary action colour: it is the end of the ramp, the highest
     contrast of the nine on this background, and the company's own name. */
  --accent:        var(--c-coral);
  --accent-hot:    #FF9084;
  --accent-deep:   #D9584C;
  --accent-soft:   rgba(246, 119, 108, .14);
  --accent-line:   rgba(246, 119, 108, .40);
  --accent-ink:    #2B0A07;   /* text on a coral fill */

  /* States borrow the ramp's other end rather than inventing a green. */
  --good:          var(--c-teal);
  --good-soft:     rgba(36, 150, 155, .16);

  --brand-ramp: linear-gradient(90deg, var(--c-teal), var(--c-blue),
                                var(--c-violet), var(--c-mauve), var(--c-coral));

  /* --- type ------------------------------------------------------------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;

  /* A modular scale that stays readable on a phone: every heading is a clamp,
     so there is no breakpoint where the type is briefly wrong. */
  --fs-3xs:  11px;
  --fs-2xs:  12px;
  --fs-xs:   13px;
  --fs-sm:   14px;
  --fs-md:   16px;
  --fs-lg:   clamp(17px, 1.1vw + 13px, 19px);
  --fs-xl:   clamp(21px, 1.4vw + 16px, 26px);
  --fs-2xl:  clamp(26px, 2.2vw + 18px, 38px);
  --fs-3xl:  clamp(26px, 2.4vw + 16px, 40px);
  --fs-4xl:  clamp(34px, 4.2vw + 18px, 62px);

  /* --- space ------------------------------------------------------------ */
  --s-1: 4px;  --s-2: 8px;   --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px;  --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;
  --section-y: clamp(44px, 4.4vw, 76px);
  --gutter:    clamp(20px, 4vw, 48px);
  --maxw:      1200px;
  --maxw-text: 68ch;

  /* --- shape ------------------------------------------------------------ */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 18px 40px -24px rgba(0, 0, 0, .8);
  --shadow-lg: 0 40px 80px -40px rgba(0, 0, 0, .9);
  --glow:      0 0 0 1px var(--accent-line), 0 20px 60px -30px rgba(255, 106, 77, .55);

  /* --- motion ----------------------------------------------------------- */
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --t-fast:    .16s;
  --t-mid:     .28s;
  --t-slow:    .6s;
}