/* Path design tokens v0.2 · 31 October 2026, from Pospai v0.1 of 15 September, matched to the back office (styles/pathpos.css)
   The source of truth for every colour, font, size and spacing the website,
   the back office theme and the till build use. Change a value here, not in a page.
   Light is the default. The dark block only re-states what changes.
   Brand colours were sampled from the logo files in design/logo/. */
:root {
  /* Brand */
  --pp-black: #000000;            /* the wordmark on light */
  --pp-ink: #0B0C0C;              /* UI black: buttons, headlines, the get-ready banner */
  --pp-white: #FFFFFF;
  --pp-teal: #00BABC;             /* brand teal: the one "Start free" button per page, focus rings, progress, free-days pill */
  --pp-teal-deep: #007E80;        /* teal for text and links on white (passes AA) */
  --pp-teal-soft: #DDF6F6;        /* teal fills behind text */
  --pp-teal-tint: rgba(0,186,188,.14);
  --pp-pink: #FD2062;             /* accent: a word in a headline, the section marker, a number that matters, the sparks; never a button, never an error */
  --pp-pink-deep: #C2144A;
  --pp-pink-soft: #FFE3EB;

  /* Neutrals */
  --pp-canvas: #F7F9F9;           /* page background */
  --pp-surface: #FFFFFF;          /* cards, panels, inputs */
  --pp-sunken: #F0F4F4;           /* table heads, code, quiet panels */
  --pp-hover: #EAF0F0;
  --pp-line: #E1E7E7;
  --pp-line-strong: #808D8D;
  --pp-line-field: #BCC7C7;       /* the border of a field; line-strong is for what must stand out from the page */
  --pp-text-1: #0B0C0C;
  --pp-text-2: #3E4949;
  --pp-text-3: #657171;
  --pp-text-4: #8B9797;

  /* Meaning */
  --pp-success: #1E9E5A;  --pp-success-soft: #E3F5EA;   /* paid, live, done */
  --pp-warning: #E8A13A;  --pp-warning-soft: #FCF0DC;   /* free period ending: the amber strip on the till */
  --pp-danger: #E03A3A;   --pp-danger-soft: #FBE3E3;    /* payment needed: the red bar on the till; form errors */
  --pp-info: var(--pp-teal-deep);
  --pp-teal-hover: #005E60;      /* links on hover */
  --pp-warning-text: #8A560C;    /* text on warning-soft */
  --pp-danger-text: #B92C2C;     /* text on danger-soft */

  /* Type */
  --pp-font-display: 'Poppins', 'Helvetica Neue', Arial, sans-serif;   /* headlines, buttons, numbers in tiles; shared with Path */
  --pp-font-body: 'Roboto', 'Helvetica Neue', Arial, sans-serif;        /* everything else; shared with Path */
  --pp-font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --pp-display: 56px; --pp-display-lh: 1.05;
  --pp-h1: 44px; --pp-h1-lh: 1.1;
  --pp-h2: 32px; --pp-h2-lh: 1.15;
  --pp-h3: 24px; --pp-h3-lh: 1.2;
  --pp-h4: 18px; --pp-h4-lh: 1.3;
  --pp-body-lg: 18px; --pp-body: 16px; --pp-small: 14px; --pp-micro: 12px;
  --pp-body-lh: 1.6;
  --pp-tracking-tight: -0.02em;   /* no spaced capitals anywhere: section labels are sentence case with an 18x3px pink bar before them */

  /* Space (4-point) */
  --pp-s1: 4px; --pp-s2: 8px; --pp-s3: 12px; --pp-s4: 16px; --pp-s5: 24px; --pp-s6: 32px; --pp-s7: 48px; --pp-s8: 64px; --pp-s9: 96px;
  --pp-gutter: clamp(20px, 5vw, 40px);
  --pp-maxw: 1360px;              /* 1,280 of content between the gutters. Was 1200 until 19 Sep 2026: David found the sections narrow beside Square (1,200 of content at a 1,440 screen, 1,400 at 1,920) and SumUp (1,328 and about 1,400) */

  /* Shape */
  --pp-r-sm: 4px; --pp-r-md: 6px; --pp-r-lg: 8px; --pp-r-xl: 12px;   /* chips · buttons and inputs · cards · hero panels. Kept square; no pills */
  --pp-control-h: 48px;           /* buttons and inputs; never below 44px */
  --pp-field-h: 60px;             /* an input or select with its label inside the box (the signup pages) */
  --pp-shadow-sm: 0 1px 2px rgba(11,12,12,.06), 0 1px 3px rgba(11,12,12,.08);
  --pp-shadow-md: 0 8px 24px rgba(11,12,12,.10);
  --pp-focus: 0 0 0 3px var(--pp-teal-tint), 0 0 0 1.5px var(--pp-teal);

  /* Motion */
  --pp-ease: cubic-bezier(.22,.61,.36,1);
  --pp-fast: 180ms; --pp-slow: 320ms;
}

[data-theme="dark"] {
  --pp-canvas: #0B0C0C; --pp-surface: #151717; --pp-sunken: #101212; --pp-hover: #1C1F1F;
  --pp-line: #232727; --pp-line-strong: #333838;
  --pp-text-1: #F8F8F8; --pp-text-2: #D7DEDE; --pp-text-3: #AEB8B8; --pp-text-4: #8B9797;
  --pp-teal-deep: #3FD3D0; --pp-teal-soft: rgba(0,186,188,.18);
  --pp-pink: #FD326A; --pp-pink-soft: rgba(253,50,106,.18);
  --pp-success-soft: rgba(30,158,90,.18); --pp-warning-soft: rgba(232,161,58,.18); --pp-danger-soft: rgba(224,58,58,.18);
  --pp-shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
  --pp-shadow-md: 0 8px 24px rgba(0,0,0,.45);
}

/* How the other systems consume these tokens:
   - Merchant Portal: PartnerPortalBranding primaryColor = --pp-teal, accentColor = --pp-pink; styles/pathpos.css maps the rest, and adds --pp-teal-deep-hover #005E60, --pp-teal-text #006B6D, --pp-success-text #177A47, --pp-danger-strong #D33434 and --pp-focus-ring for the back office's own screens. Compared 31 October 2026: everything the website uses matches.
   - Till app (Path build): --oc-brand = #007E80 (teal-deep), --oc-brand-accent = #00BABC, --oc-brand-soft = #DDF6F6, --oc-on-brand = #FFFFFF, --oc-brand-shadow = rgba(0,126,128,.30).
   - Website: this file, loaded first. */