/* ==========================================================================
   TAKUMIS — LIGHT theme  ·  concept A "Paper"
   Loaded last, after takumis-base.css and forge-base.css. Everything below the
   logo block lives inside one prefers-color-scheme query, so the dark site is
   the default and this file is purely additive: delete the <link> and nothing
   about the shipping look changes.

   PAPER, in one line: cream from top to bottom, and every division on the page
   is a 1px rule or a gap. No alternating bands, no tinted sections — the way a
   printed manual separates things.

   ---------------------------------------------------------------------------
   THE THREE SUBSTITUTIONS
   Almost every rule here is one of three mechanical swaps. If you are adding a
   component, apply them in this order and you will usually be done:

     1. --hp-cream-white used as INK        →  --lt-ink (midnight berry)
        The token stays put — it is also a real cream *background* under
        .cream, .btn-on-dark and the violet pricing panel, and those must not
        move. Only its text uses are unpicked, one rule at a time.

     2. --hp-tropical-indigo as INK         →  --hp-blue-violet
        Indigo #918EF4 reaches 2.4:1 on cream. Violet #7C3AED reaches 5.3:1.

     3. --hp-pastel-orange as INK           →  --hp-orange-ink
        Pastel orange #FF9E64 reaches 1.9:1 on cream — it is a fill colour on
        this ground, never a text colour. #9C4520 is the palette's answer.

   Backgrounds and borders keep their tokens; the --dk-* set is re-pointed once
   at the top and every component that reads it flips for free.

   ---------------------------------------------------------------------------
   WHAT DELIBERATELY DOES NOT FLIP

     · The code block and the app screenshot. They are pictures of the product,
       and the product's editor is dark in both themes. Inverting them would
       make the site lie about what you get.
     · The violet pricing panel and the violet "Build" phase. Brand blocks, not
       themed surfaces — identical in both modes, which is the point of them.
     · One inverse block per page. The dark site keeps a single cream section
       (.cream); here that same section goes berry, so the page keeps its
       punctuation instead of running flat for 8000 pixels.

   Non-negotiables still hold throughout: ground is cream #FDF8E8 and never
   white, blocks are sharp, controls are pills, zero shadows, Greycliff stops
   at 600, and a Castoro accent always changes colour too.
   ========================================================================== */

/* --- Logo -----------------------------------------------------------------
   Never recoloured in CSS — the two artworks are separate files and exactly
   one is ever displayed. Violet mark + berry wordmark on cream; indigo + cream
   on berry, because violet only reaches 2.7:1 against the berry ground.
   This pair sits outside the theme block: the dark artwork is the default.

   Qualified with img on purpose — takumis-base.css sets `.logo img {display:
   block}`, which outweighs a bare `.logo-light` and would leave both artworks
   stacked on top of each other. */
.logo img.logo-light { display: none; }

/* Tell the UA which way we went, so scrollbars, form controls and the canvas
   under an over-scroll follow the resolved theme rather than the meta hint. */
:root[data-theme="dark"] { color-scheme: dark; }

/* ==========================================================================
   Everything below is nested under the resolved theme rather than sitting in
   a prefers-color-scheme query. The switch in the nav needs to override the
   browser, and one attribute is the only way to express that without shipping
   this entire file twice. theme.js stamps the attribute before first paint —
   see the note in that file about what happens with JS off.
   ========================================================================== */
:root[data-theme="light"] {

color-scheme: light;

.logo img.logo-dark  { display: none; }
.logo img.logo-light { display: block; }

/* --- Tokens ---------------------------------------------------------------
   The dark shell's tokens, re-pointed at cream. Same names, same jobs. */
  --dk-surface:   #FFFDF6;   /* raised panel — cream-50 */
  --dk-raised:    #FDF8E8;
  --dk-sunken:    #F5EDD8;   /* cream-200 — recessed wells and chart grounds */
  --dk-line:      #DCD5C2;   /* control borders: one step darker than the
                                structural hairline so inputs stay findable */
  --dk-line-soft: #E3DECF;   /* line-300 — the structural hairline */
  --dk-text:      #2A1B4E;
  --dk-muted:     #5B5470;
  --dk-subtle:    #857F97;   /* 3.6:1 — micro-labels only, as in the light set */

  /* Ink that stands in for --hp-cream-white wherever it did a text job. */
  --lt-ink: var(--hp-midnight-berry);

  /* The net-return figure is the loudest number on a strategy card. #4ADE80
     clears 8:1 on berry and 1.5:1 on cream, so the light side gets its own
     green rather than the dark one dimmed. Green is not in the brand palette;
     it is here because the product already uses it for this one job. */
  --lt-gain:      #15803D;
  --lt-gain-line: #22A35A;

  /* Chart steps re-picked for cream, not flipped off the berry set.
     equity-chart.js reads these by name, so it needs no light-mode branch. */
  --chart-1-dk:    #7C3AED;
  --chart-2-dk:    #C85E38;   /* direct-labelled, always */
  --chart-grid-dk: var(--hp-lavender-400);

body { background: var(--surface-page); color: var(--text-body); }
::selection { background: var(--hp-violet-200); color: var(--hp-midnight-berry); }

/* ==========================================================================
   PAPER — the concept itself
   A hairline at every section boundary is the only structure there is. The
   hero opts out because it already sits under the nav rule.
   ========================================================================== */
.section { border-top: 1px solid var(--dk-line-soft); }
.hero, .fp-hero, .section.cream + .section { border-top: 0; }

/* The graph-paper wash is the one texture on the page, and it is nearly gone.
   Drawn in violet because indigo at 13% simply disappears against cream. */
.wash::before {
  opacity: .5;
  background-image:
    linear-gradient(to right, rgba(124,58,237,.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(124,58,237,.10) 1px, transparent 1px);
}

/* ==========================================================================
   Nav
   ========================================================================== */
.nav { background: rgba(253, 248, 232, .84); border-bottom-color: var(--dk-line-soft); }
.nav-links a:hover,
.nav-links a[aria-current="page"] { color: var(--lt-ink); }
.nav-toggle span { background: var(--lt-ink); }
.btn-ghost-dk { color: var(--dk-muted); }
.btn-ghost-dk:hover { background: var(--hp-violet-050); color: var(--hp-blue-violet); }
@media (max-width: 900px) { .nav-menu { background: var(--surface-page); } }
.nav.is-compact .nav-menu { background: var(--surface-page); }

/* Dark-ground button variants become their light counterparts. */
.btn-outline-dark { color: var(--lt-ink); border-color: rgba(42,27,78,.4); }
.btn-outline-dark:hover { background: var(--hp-violet-050); border-color: var(--hp-blue-violet); color: var(--hp-blue-violet); }
.btn-on-dark { background: var(--hp-midnight-berry); color: var(--hp-cream-white); }
.btn-on-dark:hover { background: var(--hp-blue-violet); color: var(--hp-cream-white); }

/* ==========================================================================
   Type
   ========================================================================== */
.sec-head h2 { color: var(--lt-ink); }
.sec-head p  { color: var(--text-muted); }
.eyebrow.on-dark { color: var(--text-muted); }
.eyebrow.on-dark::before { background: var(--hp-blue-violet); }
.hp-period.on-dark { color: var(--hp-blue-violet); }
.hp-accent.on-dark { color: var(--hp-blue-violet); }
.cta h2 { color: var(--lt-ink); }

/* ==========================================================================
   Composer, chips
   ========================================================================== */
.composer { background: var(--dk-surface); border-color: var(--dk-line); }
.composer-field { color: var(--text-body); }
.chip:hover { border-color: var(--hp-blue-violet); color: var(--hp-blue-violet); background: var(--hp-violet-050); }

/* ==========================================================================
   Product surfaces — kept dark on purpose (see the header note)
   ========================================================================== */
.code { background: var(--hp-berry-900); color: #D9D2EC; }

/* ==========================================================================
   Build stream, conversation
   ========================================================================== */
.stream-head .tag { border-color: var(--hp-violet-200); background: var(--hp-violet-050); color: var(--hp-violet-700); }
.stream li .mark { background: var(--dk-line); }
.stream li.on .mark { background: var(--hp-blue-violet); }
.msg-user p { background: var(--hp-violet-050); border-left-color: var(--hp-blue-violet); color: var(--text-body); }
.note { border-left-color: var(--hp-warm-terracotta); color: var(--hp-orange-ink); }

/* ==========================================================================
   Workspace, charts
   ========================================================================== */
.ws-tab:hover { color: var(--lt-ink); }
.chart-title { color: var(--lt-ink); }
.bt-stats > div { background: var(--dk-surface); }
.bt-stats .v { color: var(--lt-ink); }
/* The tooltip has to pop off the chart ground, so it inverts with everything
   else rather than staying cream-on-cream. */
.tooltip { background: var(--hp-midnight-berry); color: var(--hp-cream-white); }

/* ==========================================================================
   Stat bar, gallery
   ========================================================================== */
.statbar-item .v { color: var(--lt-ink); }
.statbar-item .v.warm { color: var(--hp-orange-ink); }
.gcard { background: var(--dk-surface); }
.gcard:hover { border-color: var(--hp-blue-violet); }
.gcard h4 { color: var(--lt-ink); }
.gcard-top .stage { color: var(--hp-blue-violet); }

/* ==========================================================================
   Pricing
   ========================================================================== */
.credit > div { background: var(--dk-surface); }
.credit .free { background: var(--hp-blue-violet); }        /* brand block — unchanged */
.credit .ct-v { color: var(--lt-ink); }
.credit .free .ct-l { color: rgba(253,248,232,.78); }
.credit .free .ct-v { color: var(--hp-cream-white); }
.credit .free p { color: rgba(253,248,232,.88); }
.topup { color: var(--lt-ink); border-color: var(--dk-line); }
.topup:hover { border-color: var(--hp-blue-violet); background: var(--hp-violet-050); }
.topup.any { color: var(--dk-subtle); }
.costs .row .v { color: var(--lt-ink); }
.costs .row .v.free { color: var(--hp-orange-ink); }
.costs .row.head { background: var(--dk-sunken); color: var(--dk-muted); }
.costs .row.head .v { color: var(--dk-muted); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq summary { color: var(--lt-ink); }
.faq summary:hover { color: var(--hp-blue-violet); }
.faq summary::after { color: var(--hp-blue-violet); }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer li a:hover { color: var(--hp-blue-violet); }

/* ==========================================================================
   THE INVERSE BLOCK
   .cream is the dark site's single light section. Here it is the single dark
   one, in the same place, doing the same job. Everything nested inside it has
   to go dark with it — including the components that were already authored for
   a cream ground, which is why they are re-stated rather than left alone.
   ========================================================================== */
.cream { background: var(--hp-midnight-berry); color: var(--dk-muted); }
.cream h2, .cream h3, .cream h4 { color: var(--hp-cream-white); }
.cream p { color: #B9AFC9; }
.cream .eyebrow { color: var(--hp-lavender-200); }
.cream .eyebrow::before { background: var(--hp-tropical-indigo); }
.cream .hp-accent { color: var(--hp-tropical-indigo); }
.cream .hp-period { color: var(--hp-tropical-indigo); }

/* index.html — the four determinism points */
.cream .det-points { background: #3E2F5C; border: 1px solid #3E2F5C; }
.cream .det-points > div { background: #33234F; }

/* lp.html — the same four, numbered */
.cream .det-list { background: #3E2F5C; border: 1px solid #3E2F5C; }
.cream .det-list > div { background: #33234F; }
.cream .det-list .idx { color: var(--hp-tropical-indigo); }

/* how-it-works.html — read / fork / publish */

/* ==========================================================================
   index.html
   ========================================================================== */
.hero h1 { color: var(--lt-ink); }
.hero-micro b { color: var(--dk-muted); }

.three > div { background: var(--dk-surface); }
.three h3 { color: var(--lt-ink); }
.three .n { color: var(--hp-blue-violet); }

.shot { background: var(--dk-sunken); border-color: var(--dk-line-soft); }
.shot-notes > div { background: var(--dk-surface); }
.shot-notes h3 { color: var(--lt-ink); }

/* Strategy cards */
.sc { background: var(--dk-surface); }
.sc:hover { border-color: var(--hp-blue-violet); }
.sc-ret { color: var(--lt-gain); }
.sc-spark polyline { stroke: var(--lt-gain-line); }
.sc-rob-v,
.sc-stats b { color: var(--lt-ink); }
.sc-bar { background: rgba(42,27,78,.12); }
.sc-bar i { background: var(--hp-blue-violet); }
.sc-tag.you { border-color: var(--hp-blue-violet); color: var(--hp-violet-700); }
.sc-fork { color: var(--hp-violet-700); }
.sc-fork:hover { background: var(--hp-violet-050); color: var(--hp-violet-700); }

/* ==========================================================================
   how-it-works.html
   ========================================================================== */
.clocks { background: var(--dk-sunken); }
.clock-head .t { color: var(--lt-ink); }
.clock.run .clock-head .t { color: var(--hp-orange-ink); }
.node b { color: var(--lt-ink); }
.node.ai { border-color: var(--hp-blue-violet); background: var(--hp-violet-050); }
.node.ai b { color: var(--hp-violet-700); }
.node.strat { border-color: #F0B48E; background: var(--hp-orange-100); }
.node.strat b { color: var(--hp-orange-ink); }


.q-num { color: var(--hp-blue-violet); }
.q-head h2 { color: var(--lt-ink); }
.answer { color: var(--hp-orange-ink); }

.defs > div { background: var(--dk-surface); }
.defs dt, .defs .k { color: var(--lt-ink); }
.assume-grid > div { background: var(--dk-surface); }
.assume-grid .v { color: var(--lt-ink); }
.annot-notes > div { background: var(--dk-surface); }
.annot-notes .l { color: var(--hp-blue-violet); }

.invite h2 { color: var(--lt-ink); }

/* Phases — .now stays a violet brand block in both modes. */
.phase { background: var(--dk-surface); }
.phase .st { color: var(--hp-blue-violet); }
.phase h4, .phase h3 { color: var(--lt-ink); }
.phase.now { background: var(--hp-blue-violet); }
.phase.now .st { color: rgba(253,248,232,.86); }
.phase.now h4 { color: var(--hp-cream-white); }

/* ==========================================================================
   features.html
   ========================================================================== */
.fp-hero h1 { color: var(--lt-ink); }
.fp-cta h2 { color: var(--lt-ink); }

.stg-n { color: var(--hp-blue-violet); }
.stg-side h2 { color: var(--lt-ink); }
.stg-item { background: var(--dk-surface); }
.stg-item h3 { color: var(--lt-ink); }
.stg-item.hero { background: var(--hp-orange-100); }
.stg-item.hero h3 { color: var(--hp-orange-ink-deep); }

.loop { border-color: var(--hp-blue-violet); background: var(--hp-violet-050); }
.loop-node { background: var(--hp-cream-50); border-color: var(--dk-line); }
.loop-node b { color: var(--lt-ink); }
.loop-arrow { color: var(--hp-blue-violet); }
.loop-back { color: var(--hp-blue-violet); }
.loop-rule { border-top-color: var(--dk-line); color: var(--hp-orange-ink); }
.loop-rule a { color: var(--hp-violet-700); }
.stg-n.next { color: var(--hp-orange-ink); }
.next-list > div { background: var(--dk-surface); }
.next-list h3 { color: var(--lt-ink); }

/* ==========================================================================
   The rule sheet — how-it-works.html and lp.html
   Replaced the C# panels. The sheet is page furniture, not a product surface,
   so unlike the code block it does flip to cream.
   ========================================================================== */
.rules { background: var(--dk-sunken); border-color: var(--dk-line); }
.rules-head .tag { border-color: var(--hp-violet-200); background: var(--hp-violet-050); color: var(--hp-violet-700); }
.rule { background: var(--dk-sunken); }
.rule .v b { color: var(--lt-ink); border-bottom-color: var(--hp-blue-violet); }
.rule.assumed .k { color: var(--hp-orange-ink); }
.rule.added { background: var(--hp-violet-050); }
.rule.added .k { color: var(--hp-violet-700); }
.rule-note b { color: var(--hp-orange-ink); }

/* features.html — the loop now ends on the human step */
.loop-node.you { border-color: var(--hp-warm-terracotta); }
.loop-node.you b { color: var(--hp-orange-ink); }

/* ==========================================================================
   lp.html
   ========================================================================== */
.demo { background: var(--dk-sunken); }
.rail-step[aria-selected="true"] { border-left-color: var(--hp-blue-violet); }
.rail-step[aria-selected="true"] .h,
.rail-step:hover .h { color: var(--lt-ink); }
.rail-step[aria-selected="true"] .n { color: var(--hp-blue-violet); }
.rail-progress { background: var(--hp-blue-violet); }

.verify > div { background: var(--dk-surface); }
.verify .k { color: var(--hp-blue-violet); }
.verify h4, .verify h3 { color: var(--lt-ink); }

.tree .who { color: var(--lt-ink); }
.tree .me { color: var(--hp-blue-violet); }

/* ==========================================================================
   404.html
   Only the two places that used --hp-cream-white as ink. Everything else on
   that page is built from --dk-* tokens, which the block above has already
   re-pointed at cream.
   ========================================================================== */
.nf h1 { color: var(--lt-ink); }
.nf-links a { color: var(--lt-ink); }

/* ==========================================================================
   The switch
   Icon-only, pill, in the nav next to the account buttons. It shows the theme
   you would get by pressing it, not the one you are in — a sun on the dark
   site, a moon on the light one. Base styling lives in forge-base.css; this
   is only the cream-ground half.
   ========================================================================== */
.theme-toggle { border-color: var(--dk-line); color: var(--dk-muted); }
.theme-toggle:hover { border-color: var(--hp-blue-violet); color: var(--hp-blue-violet); background: var(--hp-violet-050); }
.theme-toggle .i-sun  { display: none; }
.theme-toggle .i-moon { display: block; }

/* The language switch beside it, same treatment. */
.lang-switch { border-color: var(--dk-line); color: var(--dk-muted); }
.lang-switch:hover { border-color: var(--hp-blue-violet); color: var(--hp-blue-violet); background: var(--hp-violet-050); }

/* Plain text links (no class) darken on hover on the light ground. */
:where(main, .disclaimer) a:not([class]):hover { color: var(--hp-violet-700); }

/* Human / AI switch and the AI view */
.view-switch button:hover { color: var(--lt-ink); }
.view-switch button[aria-pressed="true"] { background: var(--hp-midnight-berry); color: var(--hp-cream-white); }
.ai-files a { color: var(--lt-ink); }
.ai-files a:hover { color: var(--hp-violet-700); }
.ai-md { color: var(--lt-ink); }
.footer-files a:hover { color: var(--hp-violet-700); }

}   /* end :root[data-theme="light"] */