/* ==========================================================================
   PipAlgo design tokens — v1
   Bible §4.2. True white, small type, colour only where it carries meaning.
   Nothing in this file may be overridden by a later "fix" stylesheet.
   ========================================================================== */

:root {
  /* --- Surface -----------------------------------------------------------
     One surface colour. Separation comes from hairlines and spacing, never
     from grey fills or shadows. */
  --pa-white:        #FFFFFF;

  /* --- Ink: black + exactly two greys ---------------------------------- */
  --pa-black:        #111315;  /* primary text                    16.8:1 */
  --pa-grey:         #5B6169;  /* secondary text, labels           6.2:1 */
  --pa-line:         #E2E6EA;  /* hairlines only — never text            */

  /* --- Meaning colours: one green, one red, one amber, one blue --------
     These may ONLY be used for: profit, loss, drawdown, risk level,
     licence state, signal direction. Never for branding or decoration. */
  --pa-green:        #0A7D3C;  /* profit, pass, active             5.1:1 */
  --pa-red:          #C0271C;  /* loss, fail, revoked              5.4:1 */
  --pa-amber:        #9C5D00;  /* caution, risk, pending           5.0:1 */
  --pa-blue:         #17509E;  /* links, information               7.4:1 */

  /* Tints are permitted ONLY as 8%-alpha backgrounds behind their own
     meaning colour (e.g. a failed-gate badge). Never as decoration. */
  --pa-green-bg:     rgba(10, 125, 60, 0.08);
  --pa-red-bg:       rgba(192, 39, 28, 0.08);
  --pa-amber-bg:     rgba(156, 93, 0, 0.10);
  --pa-blue-bg:      rgba(23, 80, 158, 0.08);

  /* --- Brand: royal purple (token names kept for zero-churn re-theming) - */
  --pa-yellow:       #5B21B6;  /* brand accent, buttons (bg)               */
  --pa-yellow-hover: #4C1D95;
  --pa-yellow-ink:   #FFFFFF;  /* text that sits ON the purple             */
  --pa-yellow-deep:  #5B21B6;  /* purple TEXT on white (8.6:1, readable)   */
  --pa-yellow-bg:    rgba(91, 33, 182, 0.10);

  /* --- Type ------------------------------------------------------------
     One text family. One tabular face used ONLY for numbers, prices,
     drawdowns, dates and licence keys. */
  /* One clean neutral grotesk everywhere (Exness-style). Numbers use the same
     family with tabular figures — no monospace, so no slashed zero. */
  --pa-font-text: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --pa-font-num:  "Inter", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --pa-fs-title:  32px;   /* page title, once per page */
  --pa-fs-h2:     20px;
  --pa-fs-h3:     15px;
  --pa-fs-body:   15px;
  --pa-fs-data:   13px;
  --pa-fs-small:  12px;   /* secondary, captions, table headers */

  --pa-lh-prose:  1.5;    /* 1.45–1.55 */
  --pa-lh-data:   1.2;

  --pa-measure:   72ch;   /* prose under 80 characters */

  /* --- Space ------------------------------------------------------------ */
  --pa-1:  2px;
  --pa-2:  4px;
  --pa-3:  6px;
  --pa-4:  8px;
  --pa-5:  12px;
  --pa-6:  16px;
  --pa-7:  24px;
  --pa-8:  32px;
  --pa-9:  48px;

  --pa-hair: 1px;

  /* --- Motion ----------------------------------------------------------
     Durations are here so the "does this animation teach anything?"
     question has a single place to be answered. */
  --pa-dur-state:  180ms;  /* state change the user caused        */
  --pa-dur-sort:   320ms;  /* layout transition so movement reads */
  --pa-ease:       cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Mobile: everything smaller and tighter so it fits the screen (owner, 4 Sep
   2026). One place — every page uses these tokens, so this compacts all of them. */
@media (max-width: 600px) {
  :root {
    --pa-fs-title:  24px;
    --pa-fs-h2:     17px;
    --pa-fs-h3:     14px;
    --pa-fs-body:   14px;
    --pa-fs-data:   12px;
    --pa-fs-small:  11px;
    --pa-5:  10px;
    --pa-6:  12px;
    --pa-7:  18px;
    --pa-8:  22px;
    --pa-9:  30px;
  }
}

/* Motion budget rule, enforced globally: when the reader asks for less
   motion they still get every piece of information, as a static first
   frame. Nothing here merely shortens an animation — it removes it. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --pa-dur-state: 0ms;
    --pa-dur-sort:  0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}