/* ═══════════════════════════════════════════════════════════════════
   TNT — Introduction to Prompting
   Theme Stylesheet  ·  tnt-theme-prompting.css

   WHAT THIS FILE DOES:
   All color decisions for the Introduction to Prompting page live here.
   The base file (tnt-base.css) handles structure and layout.

   Accent color: Violet — distinct from the three course pages
   (Foundation=green, Innovations=yellow, AP Java=blue) and chosen
   for its AI/creative/thoughtful connotations.
   ═══════════════════════════════════════════════════════════════════ */


/* ─── DESIGN TOKENS ──────────────────────────────────────────────── */
:root {
    /* Primary page color: prompting violet */
    --accent:        #a855f7;
    --accent-rgb:    168, 85, 247;
    --accent-dark:   #7c3aed;
    --accent-light:  #c084fc;

    /* Page backgrounds */
    --page-bg:       #080812;
    --page-mid:      #0f0820;
    --page-tint:     #140a2e;

    /* Navbar */
    --navbar-bg:     rgba(8, 8, 18, 0.95);
}


/* ─── HERO ───────────────────────────────────────────────────────── */
.hero {
    background: linear-gradient(135deg, #080812 0%, #100820 50%, #140a2e 100%);
}


/* ─── SECTION BACKGROUNDS ────────────────────────────────────────── */
.why-section      { background: linear-gradient(180deg, #080812 0%, #0f0820 100%); }
.anatomy-section  { background: linear-gradient(135deg, #140a2e 0%, #080812 100%); }
.examples-section { background: linear-gradient(180deg, #0a0815 0%, #080812 100%); }
.spark-section    { background: linear-gradient(135deg, #0f0820, #1a0a3a); }
.patterns-section { background: #0f0820; }
.loop-section     { background: linear-gradient(135deg, #140a2e 0%, #080812 100%); }
.cta-section      { background: linear-gradient(135deg, #140a2e, #080812); }


/* ─── HERO CODE-WINDOW: PROMPT ANATOMY TOKENS ───────────────────── */
/*
   The hero code window shows a real prompt color-coded by its four
   structural elements. Each .pt-* class corresponds to one layer.
   The .pt-lbl modifier dims the label tag slightly so the content
   is visually dominant.
*/
.pt-role   { color: #c084fc; }    /* Role / persona context — violet  */
.pt-task   { color: #5eb3d6; }    /* The ask / action verb  — blue    */
.pt-format { color: #f4e542; }    /* Desired output format  — yellow  */
.pt-limit  { color: #90c356; }    /* Constraints / limits   — green   */
.pt-lbl    { opacity: 0.55; font-weight: 700; }   /* Dimmed [LABEL] tags */
.pt-cm     { color: #8b949e; font-style: italic; } /* Comments / notes   */


/* ─── PROMPT TAG VARIANTS ────────────────────────────────────────── */
/* Three prompt lifecycle stages shown in the S.P.A.R.K. examples   */
.prompt-tag.initial {
    background: rgba(168,85,247,0.15);
    color: var(--accent);
    border: 1px solid rgba(168,85,247,0.3);
}
.prompt-tag.followup {
    background: rgba(244,229,66,0.12);
    color: #f4e542;
    border: 1px solid rgba(244,229,66,0.3);
}
.prompt-tag.validate {
    background: rgba(94,179,214,0.12);
    color: #5eb3d6;
    border: 1px solid rgba(94,179,214,0.3);
}

.prompt-body .user-tag { color: var(--accent-light); }
.prompt-body em        { color: var(--accent-light); }


/* ─── WEAK / STRONG COMPARISON CARDS ────────────────────────────── */
/*
   Used in the "See the Difference" section.
   Two card variants (weak=red, strong=violet) with a VS badge
   column between them. On mobile the VS column is hidden and the
   cards simply stack.
*/
.compare-card {
    border-radius: 16px;
    padding: 28px;
    height: 100%;
}

.compare-card.weak {
    background: rgba(239, 68, 68, 0.05);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.compare-card.strong {
    background: rgba(168, 85, 247, 0.06);
    border: 1px solid rgba(168, 85, 247, 0.25);
}

.compare-label {
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.compare-card.weak .compare-label   { color: #f87171; }
.compare-card.strong .compare-label { color: var(--accent-light); }

.compare-prompt {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.88rem;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.82);
    margin: 0;
}

.compare-note {
    margin-top: 16px;
    font-size: 0.83rem;
    line-height: 1.65;
    padding: 12px 16px;
    border-radius: 8px;
}

.compare-card.weak .compare-note {
    color: #f87171;
    background: rgba(239, 68, 68, 0.07);
    border-left: 3px solid rgba(239, 68, 68, 0.3);
}

.compare-card.strong .compare-note {
    color: var(--accent-light);
    background: rgba(168, 85, 247, 0.07);
    border-left: 3px solid rgba(168, 85, 247, 0.3);
}

/* VS separator column — visible on lg+ only, hidden on mobile  */
.vs-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.vs-badge {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.4);
    flex-shrink: 0;
}

.vs-arrow {
    color: rgba(255, 255, 255, 0.15);
    font-size: 1.1rem;
}


/* ─── PROMPT PATTERN STARTER BLOCK ──────────────────────────────── */
/*
   Each pattern card includes a "starter template" in monospace italic.
   This is the fill-in-the-blank prompt the student would copy and adapt.
*/
.pattern-starter {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.45);
    background: rgba(0, 0, 0, 0.25);
    border-left: 3px solid rgba(168, 85, 247, 0.35);
    padding: 10px 14px;
    border-radius: 0 6px 6px 0;
    margin-top: 14px;
    line-height: 1.75;
    font-style: italic;
}


/* ─── CTA BUTTONS ────────────────────────────────────────────────── */
.btn-prompting {
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: #fff;
    font-weight: 800;
    font-size: 1.1rem;
    padding: 16px 40px;
    border-radius: 50px;
    border: none;
    transition: transform 0.25s, box-shadow 0.25s;
    text-decoration: none;
    display: inline-block;
}

.btn-prompting:hover {
    transform: scale(1.06);
    box-shadow: 0 10px 35px rgba(168, 85, 247, 0.45);
    color: #fff;
}

.btn-outline-prompting {
    background: transparent;
    color: var(--accent);
    font-weight: 700;
    font-size: 1rem;
    padding: 14px 36px;
    border-radius: 50px;
    border: 2px solid var(--accent);
    transition: all 0.25s;
    text-decoration: none;
    display: inline-block;
}

.btn-outline-prompting:hover {
    background: var(--accent);
    color: #fff;
}