/* =============================================================================
   Data & AI -- Data, Machine Learning & AI Engineering
   =============================================================================
   A dark analytics theme for a data or ML engineer: violet and lime on near-black, a pipeline motif, and a portfolio that leads with models shipped rather than notebooks written.

   SCOPING RULE (see .claude section 1.5 -- every theme must follow it).
   This file is loaded on EVERY page of the install, because `data-theme` sits on
   <html>: the public site, the admin and user control panels, and the printable
   CV at portfolio_pdf.php all link the active theme's theme.css. So it is split:

     1. TOKENS -- `[data-theme="engineer_data"] { ... }` sets brand colors and fonts
        only. These reach the control panels too, which is intended.
     2. PUBLIC -- everything structural is scoped to something that exists on
        public pages alone: `main` (emitted by public-header.php and nowhere
        else), `.site-header`, `.site-footer`, `.bg-animated`.

   The .cv sheet stays ink-on-paper in every theme: it is the same markup the PDF
   export prints.
   ============================================================================= */

/* ---------- 1. Tokens (shared with the control panels) ---------- */
[data-theme="engineer_data"] {
    --color-primary: #7c5cff;
    --color-primary-dark: #5b3df0;
    --color-accent: #a3e635;
    --font-heading: "Segoe UI Variable Display", "SF Pro Display", "Inter", "Segoe UI", system-ui, sans-serif;
    --bg-gradient: radial-gradient(120% 90% at 50% 0%, #141024 0%, #08060f 70%);

    --sp-ink: #e9eef7;
    --sp-muted: #93a1b8;
    --sp-line: rgba(255, 255, 255, 0.11);
    --sp-tint: color-mix(in srgb, #a3e635 16%, transparent);
    --sp-radius: 12px;
}

/* ---------- 2. Canvas ---------- */
[data-theme="engineer_data"] .bg-animated { background: var(--bg-gradient); }
[data-theme="engineer_data"] .bg-grid-line { stroke: #a3e635; opacity: 0.05; }
[data-theme="engineer_data"] .bg-blob { opacity: 0.22; filter: blur(34px); }
@supports selector(:has(*)) {
    [data-theme="engineer_data"]:has(main) { background: #08060f; }
    [data-theme="engineer_data"]:has(main) body { background: transparent; }
}

/* ---------- 3. Public chrome ---------- */
[data-theme="engineer_data"] .site-header {
    background: rgba(8, 12, 20, 0.62);
    backdrop-filter: saturate(150%) blur(14px);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    border-bottom: 1px solid var(--sp-line);
}
[data-theme="engineer_data"] .site-header .brand { color: var(--sp-ink); }
[data-theme="engineer_data"] .site-nav a { color: var(--sp-muted); font-weight: 600; }
[data-theme="engineer_data"] .site-nav a:hover { color: #a3e635; }
[data-theme="engineer_data"] .nav-toggle { color: var(--sp-ink); }

/* Re-point the shared tokens inside `main` so the blog/shop/customer pages -- whose markup reads
   var(--color-text) etc., some of it from inline style attributes -- follow the dark palette
   without any of those pages being touched. Nothing outside `main` is affected. */
[data-theme="engineer_data"] main {
    --color-text: #e9eef7;
    --color-text-muted: #93a1b8;
    --color-surface: rgba(255, 255, 255, 0.05);
    --color-border: rgba(255, 255, 255, 0.11);
    color: var(--sp-ink);
}
[data-theme="engineer_data"] main h1,
[data-theme="engineer_data"] main h2,
[data-theme="engineer_data"] main h3 { color: var(--sp-ink); }
[data-theme="engineer_data"] main a { color: #a3e635; }
[data-theme="engineer_data"] main input,
[data-theme="engineer_data"] main select,
[data-theme="engineer_data"] main textarea {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--sp-line);
    color: var(--sp-ink);
}
[data-theme="engineer_data"] main select option { background: #08060f; color: #e9eef7; }
[data-theme="engineer_data"] main th { background: rgba(255, 255, 255, 0.04); border-color: var(--sp-line); }
[data-theme="engineer_data"] main td { border-color: var(--sp-line); }
[data-theme="engineer_data"] main tbody tr:hover { background: rgba(255, 255, 255, 0.035); }
[data-theme="engineer_data"] main .badge-gray { background: var(--sp-tint); color: #a3e635; border: 1px solid var(--sp-line); }
[data-theme="engineer_data"] main .thumb-empty { background: var(--sp-tint); }
[data-theme="engineer_data"] .site-footer { background: rgba(6, 10, 16, 0.7); border-top: 1px solid var(--sp-line); color: #93a1b8; }

[data-theme="engineer_data"] main .btn,
[data-theme="engineer_data"] .site-header .btn {
    border-radius: 8px;
    background: linear-gradient(120deg, #7c5cff, #a3e635 150%);
    box-shadow: 0 14px 32px -18px #7c5cff;
}
[data-theme="engineer_data"] main .btn.btn-outline,
[data-theme="engineer_data"] .site-header .btn.btn-outline {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--sp-line);
    color: var(--sp-ink);
    box-shadow: none;
}

/* ---------- 4. Hero ---------- */
[data-theme="engineer_data"] .hp-hero { padding: 84px 0 48px; }
[data-theme="engineer_data"] .hp-eyebrow {
    background: var(--sp-tint);
    color: #a3e635;
    border: 1px solid var(--sp-line);
    letter-spacing: 0.12em;
}
[data-theme="engineer_data"] .hp-headline {
    font-size: clamp(2.2rem, 5.4vw, 3.6rem);
    letter-spacing: -0.03em;
    line-height: 1.06;
    color: var(--sp-ink);
}
[data-theme="engineer_data"] .hp-subheadline { color: var(--sp-muted); font-size: 1.08rem; line-height: 1.65; }
[data-theme="engineer_data"] .hp-hero-photo {
    border-radius: 14px;
    border: 1px solid var(--sp-line);
    box-shadow: 0 30px 70px -34px #7c5cff;
}

/* ---------- 5. Sections ---------- */
[data-theme="engineer_data"] .hp-section-title { letter-spacing: -0.03em; }
[data-theme="engineer_data"] .hp-section-title::before {
    content: "/ "; color: #a3e635; font-weight: 800;
}

[data-theme="engineer_data"] .hp-grid-card,
[data-theme="engineer_data"] .hp-work-card,
[data-theme="engineer_data"] .hp-post-card,
[data-theme="engineer_data"] .hp-testimonial,
[data-theme="engineer_data"] main .surface {
    border-radius: var(--sp-radius);
    border: 1px solid var(--sp-line);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    color: var(--sp-ink);
}
[data-theme="engineer_data"] .hp-grid-card:hover,
[data-theme="engineer_data"] a.hp-work-card:hover,
[data-theme="engineer_data"] .hp-post-card:hover {
    border-color: #a3e635;
    box-shadow: 0 24px 52px -30px #a3e635;
}
[data-theme="engineer_data"] .hp-grid-icon { background: var(--sp-tint); color: #a3e635; border-radius: 10px; }
[data-theme="engineer_data"] .hp-stat-value { color: #a3e635; letter-spacing: -0.03em; }
[data-theme="engineer_data"] .hp-chip,
[data-theme="engineer_data"] .hp-skill-chip { background: var(--sp-tint); color: #a3e635; border: 1px solid var(--sp-line); }
[data-theme="engineer_data"] .hp-timeline { border-left-color: var(--sp-line); }
[data-theme="engineer_data"] .hp-timeline-item::before { background: #08060f; border: 2px solid #a3e635; box-shadow: 0 0 0 4px var(--sp-tint); }
[data-theme="engineer_data"] .hp-testimonial p.hp-quote { color: #e9eef7; font-style: normal; }
[data-theme="engineer_data"] .hp-cta {
    border-radius: 16px;
    border: 1px solid var(--sp-line);
    background:
        radial-gradient(90% 140% at 10% 0%, #7c5cff, transparent 62%),
        radial-gradient(80% 130% at 92% 100%, #a3e635, transparent 60%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
}
[data-theme="engineer_data"] .hp-cta p { color: #e9eef7; }
[data-theme="engineer_data"] .hp-cta .btn { background: #ffffff; color: #08060f; }

/* The portfolio sheet stays light -- it is what the PDF export prints. */
[data-theme="engineer_data"] main .surface:has(.cv) {
    background: #ffffff;
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 46px 100px -50px rgba(0, 0, 0, 0.9);
}

/* ---------- 6. Signature motion ----------
   Each specialization gets one movement of its own, defined here rather than in
   assets/css/homepage-hero.css: a theme package cannot add to that shared file, so anything
   beyond the stock .hh-* classes has to travel with the theme. */
[data-theme="engineer_data"] .sig-flow { stroke-dasharray: 12 10; animation: dtFlow 1.8s linear infinite; }
@keyframes dtFlow { to { stroke-dashoffset: -22; } }
[data-theme="engineer_data"] .sig-node { animation: dtNode 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes dtNode { 0%, 100% { opacity: .5; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.12); } }
[data-theme="engineer_data"] .sig-bar { animation: dtBar 3.6s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom center; }
@keyframes dtBar { 0%, 100% { transform: scaleY(.45); } 50% { transform: scaleY(1); } }
[data-theme="engineer_data"] .hp-stat-value { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
    [data-theme="engineer_data"] .homepage-hero-art *,
    [data-theme="engineer_data"] .hp-eyebrow::before { animation: none !important; }
}

/* ---------- 7. Print ---------- */
@media print {
    [data-theme="engineer_data"] .bg-animated,
    [data-theme="engineer_data"] .site-header,
    [data-theme="engineer_data"] .site-footer { display: none !important; }
    [data-theme="engineer_data"] main { color: #1e293b; }
}