/* ============================================================================
 * CassianLab redesign — shared design tokens & primitives
 * ----------------------------------------------------------------------------
 * The single source of truth for the new design system. Phase 1 wires this into
 * includes/head.php so every page inherits it; new section markup references the
 * CSS custom properties below (via inline styles or these primitive classes)
 * rather than hard-coded hex, so the palette can move in one place.
 *
 * Fonts are self-hosted — link assets/fonts/fonts.css before this file.
 * Values taken from the Claude Design file "Cassian Lab Redesign.dc.html".
 * ==========================================================================*/

:root {
    /* Type */
    --font-display: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-body:    'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
    --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Light surfaces */
    --surface:        #f2f8f4;   /* mint page base */
    --surface-card:   #ffffff;
    --surface-line:   #e3ede7;

    /* Dark surfaces */
    --dark:           #041a13;   /* hero / cta */
    --dark-2:         #082a1e;   /* middleware band */
    --dark-card-a:    #06251b;   /* card gradient start */
    --dark-card-b:    #0a3627;   /* card gradient end */
    --footer:         #03130d;
    --dark-line:      rgba(255,255,255,.12);
    --dark-line-soft: rgba(255,255,255,.06);

    /* Accent */
    --accent:         #10c98d;   /* primary / interactive */
    --accent-bright:  #34d399;   /* bright / on-dark accents, italic emphasis */
    --accent-ink:     #0b7e58;   /* green text on light — AA 4.71:1 on #f2f8f4 (was #0e8f66 at 3.80, below AA) */
    --accent-hover:   #0b6e4f;
    --amber:          #fbbf6e;   /* status pill on dark */
    --before-mark:    #c96b53;   /* ✕ on light before-card */

    /* Ink */
    --ink:            #0a2c1f;   /* headings on light */
    --body:           #3d5c4e;   /* body on light */
    --body-2:         #4a5d54;
    --on-dark:        #eafff5;   /* headings on dark */
    --on-dark-body:   #a7d4c1;   /* body on dark */
    --on-dark-muted:  #7fb8a2;   /* muted / sub on dark */

    /* Shape */
    --radius-card:    20px;
    --radius-btn:     14px;
    --radius-pill:    999px;
}

/* ---- Base ---------------------------------------------------------------- */
.rd body, body.rd { background: var(--surface); color: var(--ink); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
.rd ::selection { background: var(--accent-bright); color: var(--dark); }

/* ---- Type primitives ---------------------------------------------------- */
.rd-disp   { font-family: var(--font-display); font-weight: 700; letter-spacing: -.025em; }
.rd-mono   { font-family: var(--font-mono); }
.rd-eyebrow{ font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink); }
.rd-eyebrow--dark { color: var(--accent-bright); }
.rd-em     { font-style: italic; color: var(--accent-ink); }
.rd-em--dark { font-style: italic; color: var(--accent-bright); }

/* ---- Buttons ------------------------------------------------------------ */
.rd-btn-primary {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent); color: var(--dark); font-weight: 700; font-size: 16px;
    padding: 15px 34px; border-radius: var(--radius-btn);
    box-shadow: 0 8px 30px rgba(16,201,141,.35); transition: all .2s;
}
.rd-btn-primary:hover { background: var(--accent-bright); transform: translateY(-2px); box-shadow: 0 12px 36px rgba(16,201,141,.45); }
.rd-btn-pill { border-radius: var(--radius-pill); }
.rd-btn-ghost {
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--on-dark); font-weight: 600; font-size: 16px;
    padding: 15px 30px; border-radius: var(--radius-btn);
    border: 1px solid rgba(234,255,245,.25); transition: all .2s;
}
.rd-btn-ghost:hover { border-color: var(--accent-bright); color: var(--accent-bright); }

/* ---- Cards -------------------------------------------------------------- */
.rd-card-dark {
    position: relative; overflow: hidden;
    background: linear-gradient(150deg, var(--dark-card-a), var(--dark-card-b));
    border: 1px solid rgba(52,211,153,.22); border-radius: var(--radius-card);
    transition: all .25s;
}
.rd-card-dark:hover { transform: translateY(-4px); border-color: rgba(52,211,153,.5); box-shadow: 0 18px 44px rgba(4,26,19,.35); }

/* ---- Motion ------------------------------------------------------------- */
@keyframes rdFadeUp  { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes rdDrift   { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px,-30px) scale(1.12); } }
@keyframes rdDrift2  { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-50px,24px) scale(1.08); } }
@keyframes rdPulse   { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.rd-fu { animation: rdFadeUp .7s cubic-bezier(.2,.7,.3,1) both; }
@media (prefers-reduced-motion: reduce) {
    .rd-fu, [style*="animation"] { animation: none !important; }
}