/*
Theme Name:   PredictionEdge
Theme URI:    https://predictionedge.pro
Description:  Child theme of Hello Elementor. Carries the PredictionEdge design system, the block patterns, the site schema, and the hand-coded homepage page template. Built for Gutenberg, not the Elementor page builder.
Author:       Jean Borg
Template:     hello-elementor
Version:      1.4.0
Text Domain:  predictionedge
*/

/* ==========================================================================
   PredictionEdge design system

   Inherited from the Fuck it OS dashboard, with the palette taken to the
   DegenKit blue Jean chose for the homepage on 5 Aug 2026.

   ── SUPERSEDED 5 Aug 2026, recorded rather than deleted ──────────────────
   This file previously ran a warm red-tinted palette, and argued for it:

     "1. WARM near-black (#140e11), not slate-blue (#0f172a). Slate reads as a
         terminal. Warm reads as paper in low light, which suits a site whose
         whole proposition is being read and believed."

   Old tokens, should this ever need reversing:
     bg #140e11 · panel #1b1417 · panel-2 #211a1d · raise #2a2124
     line #2e2427 · line-2 #241c1f · text #f0e7e0 · muted #a5928c
     faint #71605d · accent #f0645e · accent-2 #f79089 · accent-soft #3a1614

   Every one of those was red-dominant (R>B), not just the accent, which is
   why this change is the whole palette and not a one-line swap. The homepage
   is #05070e, so leaving the surfaces warm would have left the site two-tone.
   See TOMORROW.md > CORRECTION 1 for the differentiation argument this gives
   up, and the note there about where differentiation has to come from instead.
   ─────────────────────────────────────────────────────────────────────────

   The other differentiator SURVIVES intact, and now carries more weight:
   Georgia italic against uppercase mono. Editorial, and almost nobody pairs a
   serif with mono labels. It is what makes an eyebrow line feel set rather
   than styled, and with hue no longer doing the work, this is the signature.

   One accent colour. No gradient soup. Restraint is the point.
   ========================================================================== */

:root {
  /* surfaces, cool dark. --pe-bg matches the homepage ground exactly */
  --pe-bg:      #05070e;
  --pe-panel:   #0b1020;
  --pe-panel-2: #111729;
  --pe-raise:   #182034;
  --pe-line:    #1e2740;
  --pe-line-2:  #161d30;

  /* text */
  --pe-text:    #e9eef8;
  --pe-muted:   #9aa6bd;
  --pe-faint:   #6f7a94;   /* was #71605d: 3.2:1 on the old bg, i.e. failed AA */

  /* accent: DegenKit blue, same values as the homepage */
  --pe-accent:      #2f6fe4;   /* 4.4:1, headings and borders only, see note below */
  --pe-accent-2:    #7ea1de;   /* 7.7:1, use this for accent text at body size */
  --pe-accent-soft: #10203f;

  /* semantic. Never used alone to convey meaning: every state also carries
     an icon or a word, per the accessibility rule.
     THESE STAY AS THEY ARE. --pe-crit is red because red means "bad", not
     because the brand used to be red. Do not blue it to "finish the job".
     --pe-crit is also the correct colour for a negative P&L figure; the brand
     accent is not, because it reads as a highlight. */
  --pe-good: #4ec98a;
  --pe-warn: #e0a94a;
  --pe-crit: #f0736e;

  /* type */
  /* Inter FIRST. It used to sit fourth, behind the system fonts, and nothing
     enqueued it, so every page rendered in Segoe UI or SF while the homepage
     rendered in Inter. The site was set in two typefaces. functions.php now
     enqueues it; the system fonts remain as the fallback chain. */
  --pe-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --pe-serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --pe-mono:  ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;

  /* 4/8 spacing rhythm */
  --pe-s1: 4px;  --pe-s2: 8px;  --pe-s3: 12px; --pe-s4: 16px;
  --pe-s5: 24px; --pe-s6: 32px; --pe-s7: 48px; --pe-s8: 64px;

  --pe-radius: 12px;
  --pe-measure: 68ch;   /* 60-75 chars, the readable line length */
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
body {
  background: var(--pe-bg);
  color: var(--pe-text);
  font-family: var(--pe-sans);
  font-size: 17px;          /* 16px min on mobile; 17 reads better for long-form */
  line-height: 1.65;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--pe-accent-soft); color: var(--pe-accent-2); }

a { color: var(--pe-accent-2); text-decoration: none; border-bottom: 1px solid rgba(126,161,222,.26); }
a:hover { border-bottom-color: var(--pe-accent-2); }

/* Focus rings stay. Removing them is the single most common accessibility
   failure and it locks out keyboard users entirely. */
:focus-visible { outline: 2px solid var(--pe-accent-2); outline-offset: 2px; border-radius: 3px; }

/* --------------------------------------------------------------------------
   Typography scale
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 { font-family: var(--pe-sans); font-weight: 600; letter-spacing: -.02em; line-height: 1.18; }
h1 { font-size: clamp(31px, 5vw, 46px); margin: 0 0 var(--pe-s4); }
h2 { font-size: clamp(23px, 3.4vw, 30px); margin: var(--pe-s7) 0 var(--pe-s3); }
h3 { font-size: clamp(18px, 2.4vw, 21px); margin: var(--pe-s6) 0 var(--pe-s2); }

p, li { max-width: var(--pe-measure); }
p { margin: 0 0 var(--pe-s4); }

/* The editorial eyebrow. Uppercase mono over a serif italic accent is the
   signature of this design; use it above every H1. */
.pe-eyebrow {
  font-family: var(--pe-mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--pe-faint);
  display: flex; align-items: center; gap: var(--pe-s3);
  margin-bottom: var(--pe-s3);
}
.pe-eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--pe-line); }
/* accent-2, NOT accent. This renders inside .pe-eyebrow at 10px, so it is
   small text and needs 4.5:1. --pe-accent (#2f6fe4) is 4.33:1 on the ground
   and fails; --pe-accent-2 (#7ea1de) is 7.7:1. The old red happened to pass
   at 6.1:1, so this was a silent regression introduced by the blue swap. */
.pe-serif { font-family: var(--pe-serif); font-style: italic; color: var(--pe-accent-2); }

/* Data columns must not jiggle as digits change. */
.pe-num, table td, table th { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Components
   -------------------------------------------------------------------------- */
.pe-panel {
  background: var(--pe-panel);
  border: 1px solid var(--pe-line);
  border-radius: var(--pe-radius);
  padding: var(--pe-s5);
}

.pe-note { border-left: 2px solid var(--pe-accent); background: var(--pe-panel-2);
  padding: var(--pe-s4) var(--pe-s5); border-radius: 0 var(--pe-radius) var(--pe-radius) 0; margin: var(--pe-s5) 0; }
.pe-note--good { border-left-color: var(--pe-good); }
.pe-note--warn { border-left-color: var(--pe-warn); }

table { width: 100%; border-collapse: collapse; margin: var(--pe-s4) 0; font-size: 15px; }
th { text-align: left; font-family: var(--pe-mono); font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--pe-faint); font-weight: 500;
  padding: var(--pe-s2) var(--pe-s3); border-bottom: 1px solid var(--pe-line); }
td { padding: var(--pe-s3); border-bottom: 1px solid var(--pe-line-2); vertical-align: top; }

/* Wide tables scroll inside their own container. The page body never scrolls
   sideways, which is the most common mobile layout failure. */
.pe-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Every data surface states when it was generated. A number without a
   timestamp is a claim; with one it is a reading. */
.pe-stamp { font-family: var(--pe-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--pe-faint); }
.pe-stale { color: var(--pe-warn); }

/* --------------------------------------------------------------------------
   Motion: 150-300ms, and honoured only when the reader wants it
   -------------------------------------------------------------------------- */
a, button, .pe-panel { transition: color .18s ease-out, border-color .18s ease-out, background .18s ease-out; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.pe-wrap { max-width: 1120px; margin: 0 auto; padding: var(--pe-s7) var(--pe-s5) var(--pe-s8); }

@media (max-width: 767px) {
  body { font-size: 16px; }             /* below 16px iOS auto-zooms the field */
  .pe-wrap { padding: var(--pe-s5) var(--pe-s4) var(--pe-s7); }
}

/* Hello Elementor ships a light-mode body background. Override it, or the
   page flashes white before our CSS lands. */
.site-main, .page-content { background: transparent; }