/* ==========================================================================
   Preston design tokens — the design system, in code.

   Hand-written, NOT compiled from assets/scss/. Editing this file is the
   whole job; there is no build step, which also means it deploys by upload.
   Same precedent as lp-chrome.css.

   Loaded site-wide so any new page can use the tokens. It declares custom
   properties only — no selectors, no resets — so adding it cannot change the
   appearance of an existing page.

   Reference: DESIGN-SYSTEM.md
   ========================================================================== */

:root {
  /* --- brand ------------------------------------------------------------
     The only saturated colour on a page. One primary action per view. */
  --ir-brand:       #4A35F0;
  --ir-brand-hover: #3826C0;
  --ir-brand-tint:  #EEEBFE;

  /* --- text: a hierarchy, not a palette --------------------------------- */
  --ir-ink:     #17103F;   /* headings, emphasis */
  --ir-text:    #4C4A63;   /* body copy */
  --ir-muted:   #6C6A85;   /* supporting text */
  --ir-faint:   #8D8BA3;   /* captions, legal, "not included" */
  --ir-nav:     #3D4761;   /* header navigation only */
  --ir-on-dark: #CFC7F2;   /* body text on an ink ground */

  /* --- surfaces and lines ----------------------------------------------- */
  --ir-white:     #FFFFFF;
  --ir-wash-2:    #FAF9FF;
  --ir-wash:      #F7F6FD;
  --ir-line:      #EAE8F5;
  --ir-line-btn:  #D8D3F0;
  --ir-line-pill: #DFDAF5;

  /* --- semantic: never decorative --------------------------------------- */
  --ir-green: #16A34A;
  /* Negative counterpart to --ir-green. Clears 4.5:1 on --ir-white and
     --ir-wash. Deliberately not HubSpot's #FF7A59, which it replaces. */
  --ir-danger:      #C2410C;
  --ir-danger-tint: #FDF0E9;
  --ir-mint:  #7DF4DC;   /* legacy accent; brand gradient terminus only */

  /* --- elevation --------------------------------------------------------- */
  --ir-shadow-card: 0 1px 2px rgba(10, 22, 51, .04);
  --ir-shadow-cta:  0 6px 18px rgba(74, 53, 240, .28);
  --ir-shadow-lift: 0 10px 40px rgba(23, 16, 63, .10);

  /* --- layout ------------------------------------------------------------ */
  --ir-gutter: 40px;
  --ir-wrap:   1080px;

  /* --- radius ------------------------------------------------------------ */
  --ir-radius-sm:   8px;
  --ir-radius-md:   10px;
  --ir-radius-lg:   14px;
  --ir-radius-pill: 999px;

  /* --- type -------------------------------------------------------------- */
  --ir-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI",
             Helvetica, Arial, sans-serif;
}

@media (max-width: 1080px) { :root { --ir-gutter: 28px; } }
@media (max-width:  600px) { :root { --ir-gutter: 20px; } }