/* ==========================================================================
   Primexa Pay — design tokens
   Single source of truth for colour, type and spacing.
   Derived from the brand audit of primexapay.com, with two corrections:
     · one blue, not two  (#0099FF removed)
     · two typefaces, not five
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- brand ---- */
  --blue:        #183DEB;   /* the logo blue. the only blue. */
  --blue-700:    #1030B8;   /* hover / pressed */
  --blue-100:    #E7EBFD;   /* fills */
  --blue-50:     #F3F5FE;   /* hover wash */
  --navy:        #010028;   /* dark sections */

  /* ---- ink ---- */
  --ink:         #14141A;   /* headings */
  --slate:       #4A4F59;   /* body copy */
  --grey:        #8B8F98;   /* secondary, captions */

  /* ---- surface ---- */
  --paper:       #FFFFFF;
  --bone:        #F7F7F5;
  --rule:        #E3E4E8;
  --rule-2:      #CFD1D8;

  /* ---- semantic (status, never decorative) ---- */
  --ok:     #1F7A4D;  --ok-bg:   #E6F1EB;
  --warn:   #9A6410;  --warn-bg: #F6EEDE;
  --hot:    #B03A32;  --hot-bg:  #F7E6E3;

  /* ---- type ----
     Outfit  — geometric, single-storey 'a', echoes the wordmark
     Inter   — text and UI                                            */
  --display: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --text:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- type scale ---- */
  --t-hero:  clamp(38px, 7.4vw, 82px);
  --t-h1:    clamp(32px, 5vw, 56px);
  --t-h2:    clamp(26px, 3.6vw, 40px);
  --t-h3:    21px;
  --t-h4:    17px;
  --t-body:  16px;
  --t-sm:    14.5px;
  --t-xs:    13px;
  --t-label: 10px;   /* mono, uppercase, tracked */

  /* ---- layout ----
     Three widths, used deliberately:
       --max-bleed  full viewport, edge padding only — chrome, hero, footer
       --max-wide   layout sections: bento, sector grids, sliders
       --max        reading width for prose and article pages
     A section picks one. Nothing else sets a width.                    */
  --edge:      clamp(18px, 4vw, 56px);
  --max-bleed: 100%;
  --max-wide:  1560px;
  --max:       1180px;
  --measure:   68ch;
  --nav-h:     72px;
  /* pad full-bleed chrome so its contents line up with the boxed page,
     never letting the gutter fall below --edge on narrow viewports */
  --box-pad:   max(var(--edge), calc((100% - var(--max)) / 2));

  /* ---- spacing ---- */
  --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: clamp(56px, 8vw, 96px);

  --radius: 6px;
  --radius-lg: 10px;
}