/* ==========================================================================
   Autoflow brand tokens - single source of truth
   ==========================================================================

   Every page links this file. Do NOT redeclare these values in a page's
   inline <style>. Before this file existed the tokens were copy-pasted into
   all three pages and had already drifted: pricing/ and live/ were missing
   --bg-card-hover and --border-hover entirely.

   Full brand kit, including logo rules, typography, voice and the offer:
   Google Drive -> Autoflow AI / Brand / Autoflow Brand Kit

   CONTRAST, measured against --bg (#0A0A0F). WCAG AA needs 4.5:1 for body
   text, 3:1 for large text and UI elements.

     --text        #F9FAFB   ~19:1    fine everywhere
     --text-muted  #9CA3AF   ~7.8:1   fine everywhere
     --purple-light #A78BFA  ~7.3:1   fine everywhere. USE THIS FOR PURPLE TEXT
     --text-dim    #6B7280   ~4.1:1   FAILS AA for body text. Decorative labels only
     --purple      #7C3AED   ~3.5:1   FAILS AA for body text. Fills, borders and
                                      large display type only - never body copy

   Ratio to aim for: roughly 90% dark neutrals, 10% purple. If a page reads as
   purple rather than dark-with-purple-in-it, pull it back.
   ========================================================================== */

:root {
  /* Brand purple */
  --purple:        #7C3AED;              /* fills, borders, large type. NOT body text */
  --purple-light:  #A78BFA;              /* purple text, hover, highlights */
  --purple-dark:   #5B21B6;              /* gradient ends, pressed states */
  --purple-glow:   rgba(124,58,237,0.4); /* glows and shadows behind primary elements */

  /* Surfaces */
  --bg:             #0A0A0F;                 /* page background - near black, blue cast */
  --bg-card:        #14141A;  /* panel background */
  --bg-card-hover:  #1C1C24;  /* panel hover */
  --border:         rgba(255,255,255,0.14);  /* default hairline */
  --border-hover:   rgba(124,58,237,0.5);    /* hover border - ties interaction to brand */

  /* Text */
  --text:        #F9FAFB;  /* headlines and body */
  --text-muted:  #9CA3AF;  /* secondary copy, captions */
  --text-dim:    #6B7280;  /* quietest tier - decorative only, see contrast note */

  /* Type - Inter is the ONLY brand typeface, weights 300/400/500/600/700,
     upright and italic. Mono is for code, data and live system output only,
     never marketing copy.

     There is no display serif. Instrument Serif was added on 2026-07-28 with
     the ported Hero 03 and removed the same day: it only ever covered some
     headlines, so the homepage ran serif headlines in the hero, range and the
     new sections while positioning, the live teaser and the CTA stayed Inter
     bold. Jaiah's call - one font, everywhere. Headlines are Inter 700 with
     negative tracking that scales with size (roughly -0.03em display,
     -0.025em section, -0.02em small). Do not reintroduce --font-serif;
     add a weight, not a typeface. */
  --font:       'Inter', sans-serif;
  --font-mono: 'SFMono-Regular', Menlo, monospace;
}


/* ==========================================================================
   LIGHT THEME - white ground, purple accent
   ==========================================================================

   Applied by setting data-theme="light" on <html>. The dark theme above is
   untouched and is still the default; removing the attribute reverts.

   THE ONE IDEA THAT MAKES THIS WORK: tokens keep their ROLE and change their
   VALUE. --purple-light means "the purple you are allowed to set text in".
   On near-black that is #A78BFA. On white #A78BFA is 2.3:1 and illegible, so
   here it becomes #6D28D9. Every rule that already reaches for --purple-light
   to colour text stays correct without being edited. Same trick for --text-dim
   and the emerald below.

   CONTRAST, measured against #FFFFFF:
     --text        #0A0A0F   ~19:1    fine everywhere
     --text-muted  #52525E   ~8.3:1   fine everywhere
     --text-dim    #70707D   ~4.9:1   passes AA for body. Better than its dark
                                      counterpart, which does not
     --purple-light #6D28D9  ~6.6:1   USE THIS FOR PURPLE TEXT
     --purple      #7C3AED   ~5.4:1   passes AA. Note this is the reverse of
                                      the dark theme, where the same value
                                      fails. Still prefer it for fills

   Ratio to aim for is unchanged in spirit: roughly 90% ground, 10% purple.
   ========================================================================== */

:root[data-theme="light"] {
  --purple:        #7C3AED;
  --purple-light:  #6D28D9;               /* purple TEXT on white - see above */
  --purple-dark:   #4C1D95;               /* pressed states */
  --purple-glow:   rgba(124,58,237,0.26); /* softer - a 0.4 glow on white smears */

  --bg:             #FFFFFF;
  --bg-card:        #F6F6FA;              /* recessed, cool tint to echo the blue cast */
  --bg-card-hover:  #EFEFF5;
  --border:         rgba(10,10,15,0.14);
  --border-hover:   rgba(124,58,237,0.45);

  --text:        #0A0A0F;
  --text-muted:  #52525E;
  --text-dim:    #70707D;   /* measured 4.88:1. #767683 came in at 4.48 and missed AA */
}

/* --------------------------------------------------------------------------
   Hardcoded colours in the pages' inline <style> blocks that tokens cannot
   reach. Each selector below is the light counterpart of one dark rule.
   Specificity beats the page rules, so source order does not matter.
   -------------------------------------------------------------------------- */

/* Chrome: nav, burger and the mobile panel are all painted --bg by hand */
:root[data-theme="light"] #nav.scrolled { background: #FFFFFF; }
:root[data-theme="light"] .mobile-menu { background: #FFFFFF; }
:root[data-theme="light"] .nav-links a:hover,
:root[data-theme="light"] .nav-links a.active,
:root[data-theme="light"] .nav-burger:hover { background: #F1F1F6; }

/* The about portrait is the only photo on the site now. It sat in the hero
   with a dark multiply tint built for near-black; on white it needs lifting
   or it reads as a hole punched in the page. */
:root[data-theme="light"] .about-photo img { filter: brightness(1.04) contrast(0.98) saturate(0.96); }

/* The pain section's noise rows are near-black-on-near-black. Invert to
   near-white-on-white, keeping them as texture rather than content. */
:root[data-theme="light"] .sv-word { color: #ECECF3; }
:root[data-theme="light"] .sv-row.sv-quiet .sv-word { color: #F2F2F7; }

/* The solution highlight is a purple bar in BOTH themes, so the text sitting
   on it must be white in both. In the dark theme it inherits #F9FAFB from the
   headline and is already correct; here the headline is near-black. */
:root[data-theme="light"] .hl > span { color: #FFFFFF; }

/* Positioning list hairlines were a flat #18181F */
:root[data-theme="light"] .pos-item,
:root[data-theme="light"] .pos-item:first-child { border-color: rgba(10,10,15,0.11); }

/* Discovery teaser icon ring: the flattened purple tint, re-flattened on white */
:root[data-theme="light"] .discovery-icon { background: #EDE7FB; }

/* Buttons */
:root[data-theme="light"] .btn-ghost:hover { border-color: rgba(10,10,15,0.3); }

/* EMERALD, the "live in production" signal. #10B981 is 2.5:1 on white and
   fails, and white-on-#10B981 is worse. Darkened to #047857 (5.4:1 as text,
   and 5.4:1 the other way with white on it), which reads as the same signal.
   The dot loses its glow: a coloured halo on white looks like a rendering
   artefact rather than a status light. */
:root[data-theme="light"] .lt-badge { background: #E8F6F0; border-color: rgba(4,120,87,0.3); color: #047857; }
:root[data-theme="light"] .lt-dot { background: #047857; box-shadow: none; }
:root[data-theme="light"] .btn-live { background: #047857; }
:root[data-theme="light"] .btn-live:hover { background: #036249; box-shadow: 0 8px 24px rgba(4,120,87,0.28); }
:root[data-theme="light"] .s-dot { background: #047857; box-shadow: none; }
:root[data-theme="light"] .project-status { color: #047857; }
:root[data-theme="light"] .stage-pill.green { background: #E8F6F0; color: #047857; }

/* /live hero: an emerald-to-purple gradient clipped to text. It is on the
   killed-effects list anyway, but until it goes it has to survive the swap,
   and a 2.5:1 emerald does not. */
:root[data-theme="light"] .hero h1 em {
  background: linear-gradient(135deg, #047857 0%, #6D28D9 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

/* The CTA strip's diagonal wash and the live card's hover fill. Both are
   purple at very low alpha over the ground, so they only need re-weighting. */
:root[data-theme="light"] .cta-strip {
  background: linear-gradient(118deg, rgba(124,58,237,0.10) 0%, rgba(124,58,237,0.03) 42%, transparent 72%);
}
:root[data-theme="light"] .live-teaser-card:hover { background: rgba(124,58,237,0.05); }

/* /live is the page that fights this hardest. It predates the tokens and
   paints several surfaces and label colours by hand, including four inline
   style="color:..." attributes that only !important can reach. Everything
   below is that cleanup.

   The honest read: this page needs a proper pass, not overrides. If white
   wins, rewrite these against the tokens and delete this block. */
:root[data-theme="light"] .project-visual { background: #F2F2F7; }
:root[data-theme="light"] .pipeline-stage { background: #FFFFFF; border-color: rgba(10,10,15,0.12); }
:root[data-theme="light"] .live-dot { background: #047857; box-shadow: none; }
:root[data-theme="light"] .project-tag { color: #52525E !important; border-color: rgba(10,10,15,0.16) !important; background: #F6F6FA !important; }
/* The four inline label colours, each 2.2:1 to 2.9:1 on white. Same hues,
   darkened to clear 4.5:1. Inline styles win on everything but !important. */
:root[data-theme="light"] [style*="#A78BFA"] { color: #6D28D9 !important; }
:root[data-theme="light"] [style*="#10B981"] { color: #047857 !important; }
:root[data-theme="light"] [style*="#0082FB"] { color: #0A5FB4 !important; }
:root[data-theme="light"] [style*="#F59E0B"] { color: #A16207 !important; }

/* /discovery declares five of its own tokens in app.css. Four of them are
   colours built for a near-black ground and have to be restated here: the
   three map states (which fail contrast on white at their dark values) and
   the selected-tile surface, which is a deep purple that would read as a
   hole punched in a white page. --sel-border needs no change.

   These have higher specificity than app.css's plain :root, so they win
   regardless of which file loads first. */
:root[data-theme="light"] {
  --ok:     #047857;
  --amber:  #B45309;
  --red:    #B91C1C;
  --sel-bg: #F2EDFD;   /* light counterpart of #191233, still a solid colour */
}
:root[data-theme="light"] .tool[aria-pressed="true"] svg,
:root[data-theme="light"] .tool[aria-pressed="true"] .t-word { color: #6D28D9; }
