/* WaveAutomation theme — "engineered earth" system
   Loaded AFTER DaisyUI + Tailwind so it can override their CSS variables.
   Light theme = data-theme="corporate" (warm cream + deep forest, walnut brown).
   Dark theme  = data-theme="dark"       (warm near-black + olive / moss).

   The system reads as a software console: square corners, a monospace status
   strip, uppercase kickers, and a subtle engineering grid — but grounded in
   earth tones (cream paper, forest green, walnut brown) so it stays corporate. */

/* ---------- fonts are loaded in layout.scm; use them everywhere ---------- */
:root{
   --wf-mono:'IBM Plex Mono','JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
   --wf-sans:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
   --wf-display:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
}

/* ============================ LIGHT (corporate) ============================ */
html[data-theme="corporate"]{
   /* DaisyUI base palette — warm cream paper + deep forest + walnut brown.
      Calm, corporate, "garden" undertone. Forest is the primary accent. */
   --color-base-100:#f5efe2;     /* warm cream paper       */
   --color-base-200:#ece4d3;     /* deeper cream / section bg */
   --color-base-300:#ddd2bd;     /* line / border tone      */
   --color-base-content:#2a291f; /* warm near-black text    */
   --color-primary:#368a58;       /* deep forest green      */
   --color-primary-content:#f3eeda;
   --color-secondary:#6f4a2e;     /* walnut brown           */
   --color-secondary-content:#f3eeda;
   --color-accent:#5a7a3e;        /* moss / garden green    */
   --color-accent-content:#f3eeda;
   --color-neutral:#241f16;       /* espresso (near-black)  */
   --color-neutral-content:#f3eeda;
   --color-info:#368a58;
   --color-success:#3f6b35;
   --color-warning:#9a6a1f;
   --color-error:#8a3a28;
   --color-error-content:#f3eeda;
    --color-b1:#e4dcc8;
    --color-b2:#d8cdb6;
    --color-b3:#cabfa3;

   /* hairline accent used on cards / dividers */
   --wf-line:rgba(46,77,42,.16);
   --wf-ink:#2a291f;
   --wf-ink-soft:#5f5a49;
   --wf-muted:#8a8271;
   --wf-forest:#368a58;
   --wf-forest-pale:#6b9a65;     /* sage — status dots, kickers, accents */
   --wf-grid:rgba(46,77,42,.05); /* faint hero grid */
   --wf-moss:#5a7a3e;
   --wf-walnut:#6f4a2e;
   --wf-clay:#9c4a2c;            /* terracotta highlight, used sparingly */
   --wf-cream:#f5efe2;

   /* square, engineered corners everywhere */
   --radius-selector:0;
   --radius-field:0;
   --radius-box:0;
   --radius-btn:0;
   --radius-badge:0;
   --rounded-box:0;
   --rounded-btn:0;
   --rounded-field:0;
   --rounded-badge:0;

   /* typography: humanist sans for body + display, mono for system/labels */
   --font-sans:var(--wf-sans);
   --font-mono:var(--wf-mono);
}

/* ============================== DARK ============================== */
html[data-theme="dark"]{
   /* warm near-black base, forest + moss read brighter on it */
   --color-base-100:#14120c;      /* warm near-black          */
   --color-base-200:#1c1a12;
   --color-base-300:#2c281c;      /* olive-brown line         */
   --color-base-content:#d9cfb0;  /* warm off-white            */
   --color-primary:#8fae54;       /* moss green (accent)       */
   --color-primary-content:#14120c;
   --color-secondary:#c58a52;     /* tan / amber               */
   --color-secondary-content:#14120c;
   --color-accent:#a6bf63;        /* light olive               */
   --color-accent-content:#14120c;
   --color-neutral:#221e15;
   --color-neutral-content:#d9cfb0;
   --color-info:#8fae54;
   --color-success:#9fb25c;
   --color-warning:#d3a24f;
   --color-error:#c86a4c;
   --color-error-content:#f3eeda;
   --color-b1:#262217;
   --color-b2:#322d1d;
   --color-b3:#3f3826;

   --wf-line:rgba(143,174,84,.16);
   --wf-ink:#d9cfb0;
   --wf-ink-soft:#b3a888;
   --wf-muted:#8a8069;
   --wf-forest:#8fae54;
   --wf-forest-pale:#8fae54;
   --wf-grid:rgba(143,174,84,.06);
   --wf-moss:#a6bf63;
   --wf-walnut:#c58a52;
   --wf-clay:#d07a4c;
   --wf-cream:#14120c;

   --radius-selector:0;
   --radius-field:0;
   --radius-box:0;
   --radius-btn:0;
   --radius-badge:0;
   --rounded-box:0;
   --rounded-btn:0;
   --rounded-field:0;
   --rounded-badge:0;

   --font-sans:var(--wf-sans);
   --font-mono:var(--wf-mono);
}

/* ============================ shared type ============================ */
/* apply the type stack as a fallback (some builds don't re-read --font-*) */
html[data-theme="corporate"],
html[data-theme="dark"]{
   font-family:var(--wf-sans);
}
body{ font-family:var(--wf-sans); }

/* display headlines — tight, confident, engineered. The "Next Terminal" feel:
   big, tight, neutral, with a long-line rhythm. */
h1,h2,h3{ font-family:var(--wf-display); }

/* ============================ shared accents ============================ */
/* force every DaisyUI card / form control square, regardless of theme */
html[data-theme="corporate"] :where(.card,.btn,input.input,textarea.textarea,.form-control,.dropdown-content,.menu),
html[data-theme="dark"]         :where(.card,.btn,input.input,textarea.textarea,.form-control,.dropdown-content,.menu){
   border-radius:0 !important;
}
/* Cards read as flat panels separated by hairlines, not floating shadows */
html[data-theme="dark"] .card,
html[data-theme="corporate"] .card{ box-shadow:none; }

html[data-theme="corporate"] .card{
   background:var(--color-base-100);
   border:1px solid var(--wf-line);
}
html[data-theme="corporate"] .card:hover{ border-color:var(--wf-forest); }
html[data-theme="dark"] .card{ border:1px solid var(--wf-line); }

/* --- monospace system status strip (the "old-school system bar" motif) --- */
.sysbar{
   border-bottom:1px solid var(--color-base-300);
   background:var(--color-base-100);
   font-family:var(--wf-mono);
   font-size:11px;
   letter-spacing:.05em;
   color:var(--wf-ink-soft);
}
html[data-theme="corporate"] .sysbar{ background:var(--color-base-200); }
.sysbar .row{
   display:flex; justify-content:space-between; align-items:center;
   max-width:1180px; margin:0 auto; height:32px; padding:0 24px;
}
.sysbar .ok{
   display:inline-block; width:7px; height:7px; border-radius:50%;
   background:var(--wf-forest-pale);
   box-shadow:0 0 8px var(--wf-forest-pale);
   margin-right:8px; vertical-align:-1px;
}
html[data-theme="dark"] .sysbar .ok{ background:var(--wf-moss); box-shadow:0 0 8px var(--wf-moss); }

.cur{
   display:inline-block; width:7px; height:13px;
   vertical-align:-2px;
   background:var(--wf-forest-pale);
   animation:waveblink 1.05s steps(2) infinite;
}
html[data-theme="dark"] .cur{ background:var(--wf-moss); }
@keyframes waveblink{ 50%{ opacity:0; } }

@media (prefers-reduced-motion: reduce){ .cur{ animation:none; } }

/* --- uppercase mono labels: kickers / eyebrows / section indices --- */
.lbl-mono{
   display:inline-flex; align-items:center; gap:.6rem;
   font-family:var(--wf-mono);
   font-size:11px;
   font-weight:500;
   letter-spacing:.24em;
   text-transform:uppercase;
   color:var(--wf-forest-pale);
}
html[data-theme="dark"] .lbl-mono{ color:var(--wf-moss); }
.lbl-mono::before{
   content:""; width:18px; height:1px; background:currentColor; opacity:.7;
   /* a small rule that ties the kicker to the engineered aesthetic */
}

/* the index-style section markers (01 / 02 / 03 ...) used in process bands */
.idx{
   font-family:var(--wf-mono);
   font-size:.85rem;
   letter-spacing:.12em;
   color:var(--wf-forest);
}
html[data-theme="dark"] .idx{ color:var(--wf-moss); }

/* thin forest hairline used to frame sections */
.rule{ height:1px; width:100%; background:var(--wf-line); }

/* --- terminal panel + command prompt (used on the hero) --- */
.term{
   background:var(--color-base-200);
   border:1px solid var(--wf-line);
   font-family:var(--wf-mono);
   font-size:13px;
}
html[data-theme="dark"] .term{ background:#0f0d08; border-color:#2a2416; }
html[data-theme="corporate"] .term{ background:#efe7d6; }
.term .tbar{
   display:flex; align-items:center; gap:8px;
   padding:10px 14px; border-bottom:1px solid var(--wf-line);
   color:var(--wf-ink-soft);
   font-size:11px; letter-spacing:.08em; text-transform:uppercase;
}
.term .tbar i{ width:9px; height:9px; border-radius:50%; background:var(--color-base-300); }
.term .tbar i.on{ background:var(--wf-forest-pale); }
html[data-theme="dark"] .term .tbar i.on{ background:var(--wf-moss); }
.term .tbody{ padding:18px 20px; line-height:1.95; color:var(--wf-ink); }
.term .o{ color:var(--wf-ink); }
.term .g{ color:var(--wf-forest-pale); }
html[data-theme="dark"] .term .o{ color:#b9b19a; }
html[data-theme="dark"] .term .g{ color:var(--wf-moss); }
.term .c{ color:var(--wf-walnut); }

.prompt{
   display:flex; gap:10px; align-items:center;
   background:var(--color-base-200);
   border:1px solid var(--wf-line);
   font-family:var(--wf-mono); font-size:14px;
   padding:15px 18px; max-width:620px;
   color:var(--wf-ink);
   transition:border-color .2s ease, box-shadow .2s ease;
}
.prompt:hover{ border-color:var(--wf-forest); }
html[data-theme="dark"] .prompt:hover{ border-color:var(--wf-moss); }
.prompt b{ color:var(--wf-forest); }
html[data-theme="dark"] .prompt b{ color:var(--wf-moss); }

/* --- square, mono-accented buttons --- */
.btn-mono{
   font-family:var(--wf-mono);
   font-size:13px; font-weight:500;
   letter-spacing:.08em; text-transform:uppercase;
   border-radius:0;
}
.btn-mono.btn-outline{ color:var(--wf-forest); border-color:var(--wf-line); }
html[data-theme="dark"] .btn-mono.btn-outline{ color:var(--wf-moss); }
.btn-mono.btn-outline:hover{ border-color:var(--wf-forest); }
html[data-theme="dark"] .btn-mono.btn-outline:hover{ border-color:var(--wf-moss); }

/* --- link arrow: the standard in-content "read more" / inline CTA --- */
.link-arrow{
   display:inline-flex; align-items:center; gap:.45rem;
   font-family:var(--wf-mono); font-size:13px; font-weight:500;
   letter-spacing:.04em; text-transform:uppercase;
   color:var(--wf-forest);
   border-bottom:1px solid var(--wf-line); padding-bottom:2px;
   transition:gap .2s ease, border-color .2s ease;
}
.link-arrow:hover{ gap:.7rem; border-color:var(--wf-forest); }
html[data-theme="dark"] .link-arrow{ color:var(--wf-moss); }

/* --- subtle engineering grid, used as a hero backdrop veil --- */
.grid-veil{
   position:absolute; inset:0; pointer-events:none; z-index:0;
   background-image:
      linear-gradient(var(--wf-line) 1px,transparent 1px),
      linear-gradient(90deg,var(--wf-line) 1px,transparent 1px);
   background-size:56px 56px;
   -webkit-mask-image:radial-gradient(circle at 20% 25%,#000,transparent 72%);
   mask-image:radial-gradient(circle at 20% 25%,#000,transparent 72%);
}
/* home hero: fainter, unmasked grid across the whole band */
.grid-veil.flat{
   background-image:
      linear-gradient(var(--wf-grid) 1px,transparent 1px),
      linear-gradient(90deg,var(--wf-grid) 1px,transparent 1px);
   -webkit-mask-image:none; mask-image:none;
}

/* --- capability card: forest hairline + corner tick + mono index --- */
.cap{
   position:relative;
   padding:32px;
   min-height:200px;
   border:1px solid var(--wf-line);
   background:var(--color-base-100);
   transition:border-color .2s ease, transform .2s ease;
   height:100%;
}
.cap:hover{ border-color:var(--wf-forest); }
html[data-theme="dark"] .cap:hover{ border-color:var(--wf-moss); }
.cap .cap-idx{
   position:absolute; top:14px; right:24px;
   font-family:var(--wf-mono); font-size:11px; letter-spacing:.1em;
   color:var(--wf-muted);
}
.cap .cap-line{
   position:absolute; top:0; left:0; width:40px; height:4px; background:var(--wf-forest-pale);
}
html[data-theme="dark"] .cap .cap-line{ background:var(--wf-moss); }
html[data-theme="dark"] .cap{ background:var(--color-base-200); }

/* --- stats band figures --- */
.stat-num{
   font-family:var(--wf-display);
   font-weight:600; line-height:1; letter-spacing:-.01em;
   color:var(--wf-ink);
}
html[data-theme="corporate"] .stat-num{ color:var(--wf-forest); }
html[data-theme="dark"] .stat-num{ color:var(--wf-moss); }

/* --- logo row (past-employer strip) --- */
.logo-row img{ filter:grayscale(1); opacity:.45; transition:opacity .2s ease, filter .2s ease; }
.logo-row img:hover{ opacity:1; filter:grayscale(0); }

/* --- before/after transform rows: square, hairline-separated --- */
.txfx-row{ transition:background .15s ease; }
.txfx-row:hover{ background:var(--color-base-200); }

/* --- terminal "rise" for the hero command block --- */
.term-rise{ animation:terprise .7s cubic-bezier(.16,.84,.3,1) both; }
@keyframes terprise{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }
@media (prefers-reduced-motion: reduce){ .term-rise{ animation:none; } }

/* --- section kicker spacing helper when paired with a display title --- */
.section-head{ max-width:760px; }
.section-head.center{ margin:0 auto; text-align:center; }

/* --- engineered hairline grids / ticks (defined here, not as Tailwind
   arbitrary values, because the browser JIT mishandles nested parens) --- */
.hairline-grid{ background:var(--wf-line); }
.process-dot{ background:var(--wf-forest); }
html[data-theme="dark"] .process-dot{ background:var(--wf-moss); }

/* --- contact choice tiles (book a call / send a message) --- */
.contact-tile{
   display:flex; flex-direction:column; align-items:center; gap:.5rem;
   padding:24px; text-align:center;
   border:1px solid var(--wf-line);
   transition:border-color .2s ease;
}
.contact-tile:hover{ border-color:var(--wf-forest-pale); }
.contact-tile .tile-lbl{
   font-family:var(--wf-mono); font-size:13px;
   letter-spacing:.08em; text-transform:uppercase;
}