/* ============================================
   CUTTLEFISH BRAND STYLES
   Architectural Analyticism • Warm Minimalism
   ============================================ */

/* === TYPOGRAPHY === */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600&family=Inter:wght@300;400;500;600;700&family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

:root {
    /* Typography */
    --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-serif: 'Lora', Georgia, 'Times New Roman', serif;

    /* Color Palette — Black on cream, red for annotations */
    --color-bg-cream: #FAF9F6;
    --color-bg-white: #FFFFFF;
    --color-bg-warm-gray: #F5F4F1;

    --color-text-black: #1A1A1A;
    --color-text-charcoal: #2D2D2D;
    --color-text-gray: #5A5A5A;
    --color-text-light-gray: #8A8A8A;

    --color-border-dark: #3A3A3A;
    --color-border-medium: #C4C4C4;
    --color-border-light: #E5E5E5;

    /* Red annotation family — full 4-tier ladder from moodboard #11 red-scale study.
       Used like an architect's red pen: crimson primary, oxblood for emphasis,
       bright for hover/active, rose for pale tints, subtle for background washes. */
    --color-annotation: #B91C1C;
    --color-annotation-deep: #7F1D1D;
    --color-annotation-active: #DC2626;
    --color-annotation-muted: #991B1B;
    --color-annotation-rose: #FECACA;
    --color-annotation-subtle: rgba(185, 28, 28, 0.08);

    /* Legacy --accent aliases (kept so existing templates don't break — prefer --color-annotation-* in new code) */
    --color-accent: var(--color-annotation);
    --color-accent-light: var(--color-annotation-active);
    --color-accent-dark: var(--color-annotation-deep);
    --color-accent-muted: var(--color-annotation-muted);
    --color-accent-subtle: var(--color-annotation-subtle);

    /* Cobalt reference — cross-references, link states, alternate annotation paths
       (moodboard #12 / #13 / cover) */
    --color-reference: #1E3A8A;
    --color-reference-subtle: rgba(30, 58, 138, 0.08);

    /* Ochre — in-progress/development status, secondary structural line
       (moodboard #13 / #15 / cover, replaces former warm gold) */
    --color-ochre: #92400E;
    --color-ochre-light: #B45309;

    /* Technical grid */
    --grid-size: 8px;

    /* Button radius — subtle rounding per brand rule (square elsewhere) */
    --radius-btn: 2px;

    /* Status — muted earth tones (moodboard pass) */
    --color-status-operational: #5C7A3E;
    --color-status-development: var(--color-ochre);
    --color-status-offline: var(--color-annotation);

    /* Spacing scale (8px base) */
    --space-xs: calc(var(--grid-size) * 1);
    --space-sm: calc(var(--grid-size) * 2);
    --space-md: calc(var(--grid-size) * 3);
    --space-lg: calc(var(--grid-size) * 4);
    --space-xl: calc(var(--grid-size) * 6);
    --space-2xl: calc(var(--grid-size) * 8);
    --space-3xl: calc(var(--grid-size) * 12);
}

/* === BASE === */

body {
    font-family: var(--font-sans);
    font-weight: 400;
    color: var(--color-text-charcoal);
    background-color: var(--color-bg-cream);
    line-height: 1.6;
}

code, kbd, samp, pre {
    font-family: var(--font-mono);
}

/* === HEADINGS === */

h1, h2, h3 {
    font-family: var(--font-sans);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 0.85em;
    color: var(--color-text-black);
}

/* === LABELS === */

label, .label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-gray);
}

/* Annotation label — red, used sparingly for emphasis */
.label-annotation {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent);
}

/* === DATA DISPLAYS === */

.spec-sheet, .data-display {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    line-height: 1.8;
    letter-spacing: 0.02em;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-light);
    padding: var(--space-lg);
}

/* === TECHNICAL DRAWING ELEMENTS === */

/* Subtle grid background */
.technical-bg {
    background-image:
        linear-gradient(var(--color-border-light) 1px, transparent 1px),
        linear-gradient(90deg, var(--color-border-light) 1px, transparent 1px);
    background-size: var(--grid-size) var(--grid-size);
}

/* Connection lines with endpoint nodes */
.connection-line {
    border-top: 1px solid var(--color-border-medium);
    position: relative;
}

.connection-line::before,
.connection-line::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    border: 1px solid var(--color-border-dark);
    background: var(--color-bg-cream);
    border-radius: 50%;
    top: -3px;
}

.connection-line::before { left: 0; }
.connection-line::after { right: 0; }

/* Technical double-border */
.technical-border {
    border: 1px solid var(--color-border-dark);
    box-shadow:
        inset 0 0 0 3px var(--color-bg-cream),
        inset 0 0 0 4px var(--color-border-medium);
}

/* Blueprint container with inset border */
.blueprint-box {
    position: relative;
    padding: var(--space-lg);
    border: 2px solid var(--color-border-dark);
    background: var(--color-bg-white);
}

.blueprint-box::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border: 1px solid var(--color-border-light);
    pointer-events: none;
}

/* Red annotation overlay — structural emphasis line */
.annotation-line {
    border-top: 1.5px solid var(--color-accent);
    position: relative;
}

/* Red annotation mark — used for axis markers, emphasis points */
.annotation-mark {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--color-accent);
    border-radius: 50%;
}

/* Cobalt reference mark — cross-references, footnote anchors, link endpoints */
.annotation-reference-mark {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--color-reference);
    border-radius: 50%;
}

/* Ochre mark — secondary structural points, in-progress markers */
.annotation-ochre-mark {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--color-ochre);
    border-radius: 50%;
}

/* Dashed red registration line — alignment guide / overlay grid
   (moodboard #07 kristin-king dashed site-plan crosshair) */
.annotation-dashed {
    border-top: 1.5px dashed var(--color-annotation);
    position: relative;
}

/* Pale-rose highlight plate — marginalia, editorial callouts, quoted lines
   (moodboard #11 pale-rose floor tiles). Tint-level surface; red body type
   stays legible on it. Use once per section at most. */
.highlight-rose {
    background: var(--color-annotation-rose);
    padding: var(--space-md) var(--space-lg);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text-black);
}

.highlight-rose > .highlight-eyebrow {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-annotation-deep);
    margin-bottom: var(--space-xs);
}

/* Cobalt monospace label — mirrors .label-annotation for cross-references */
.label-reference {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-reference);
}

/* === LAYOUT === */

.section {
    padding: var(--space-3xl) 0;
}

.section-hero {
    max-width: 1000px;
    margin: 0 auto;
    padding: var(--space-3xl) var(--space-lg);
    text-align: center;
}

.container-brand {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

/* === BUTTONS === */

/* Button family — four self-contained variants with subtle lift shadow.
   Visual hierarchy (most → least prominent):
     1. .btn-brand-accent  solid red       — primary CTA, max one per page
     2. .btn-brand         outline black   — neutral default
     3. .btn-brand-deep    solid dark red  — secondary CTA in red ladder
     4. .btn-brand-dark    solid black     — neutral alternate / inverse
   All four share typography, padding, border-radius, transition, and rest/hover shadow. */

.btn-brand,
.btn-brand-accent,
.btn-brand-deep,
.btn-brand-dark {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: var(--space-sm) var(--space-lg);
    border: 1px solid transparent;
    border-radius: var(--radius-btn);
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    box-shadow: 0 1px 2px rgba(26, 26, 26, 0.08);
}

.btn-brand:hover,
.btn-brand-accent:hover,
.btn-brand-deep:hover,
.btn-brand-dark:hover {
    box-shadow: 0 3px 8px rgba(26, 26, 26, 0.14);
    transform: translateY(-1px);
}

/* Outline black — neutral default */
.btn-brand {
    background: var(--color-bg-white);
    border-color: var(--color-border-dark);
    color: var(--color-text-black);
}

.btn-brand:hover {
    background: var(--color-text-black);
    color: var(--color-bg-white);
    border-color: var(--color-text-black);
}

/* Accent — solid red, primary CTA */
.btn-brand-accent {
    background: var(--color-annotation);
    border-color: var(--color-annotation);
    color: var(--color-bg-white);
}

.btn-brand-accent:hover {
    background: var(--color-annotation-deep);
    border-color: var(--color-annotation-deep);
    color: var(--color-bg-white);
}

/* Deep red — solid annotation-deep, secondary CTA */
.btn-brand-deep {
    background: var(--color-annotation-deep);
    border-color: var(--color-annotation-deep);
    color: var(--color-bg-white);
}

.btn-brand-deep:hover {
    background: var(--color-annotation-muted);
    border-color: var(--color-annotation-muted);
    color: var(--color-bg-white);
}

/* Dark — solid black, neutral alternate */
.btn-brand-dark {
    background: var(--color-text-black);
    border-color: var(--color-text-black);
    color: var(--color-bg-white);
}

.btn-brand-dark:hover {
    background: var(--color-text-charcoal);
    border-color: var(--color-text-charcoal);
    color: var(--color-bg-white);
}

/* Disabled — inert, no shadow, no lift, muted color */
.btn-brand:disabled,
.btn-brand[aria-disabled="true"],
.btn-brand-accent:disabled,
.btn-brand-accent[aria-disabled="true"],
.btn-brand-deep:disabled,
.btn-brand-deep[aria-disabled="true"],
.btn-brand-dark:disabled,
.btn-brand-dark[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.5;
    box-shadow: none;
    transform: none;
}

.btn-brand-accent:disabled,
.btn-brand-accent[aria-disabled="true"] {
    background: var(--color-annotation-muted);
    border-color: var(--color-annotation-muted);
}

/* === CARDS === */

.card-technical {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-medium);
    padding: var(--space-lg);
    position: relative;
    transition: all 0.3s ease;
}

/* Hover only when the card is the click target (anchor or button).
   Static container usage stays inert. */
a.card-technical:hover,
button.card-technical:hover {
    border-color: var(--color-border-dark);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Hero section spec box */
.technical-spec-box {
    background: var(--color-bg-white);
    border: 2px solid var(--color-border-dark);
    padding: var(--space-2xl);
    position: relative;
}

.technical-spec-box::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    border: 1px solid var(--color-border-light);
    pointer-events: none;
}

/* Product card — homepage multi-product cards */
.product-card {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-medium);
    padding: var(--space-lg);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

a.product-card:hover,
button.product-card:hover {
    border-color: var(--color-border-dark);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Episode card — podcast episode cards */
.episode-card {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-medium);
    padding: var(--space-lg);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    display: block;
    text-decoration: none;
    color: inherit;
}

.episode-card:hover {
    border-color: var(--color-border-dark);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Server card — static container; no hover (see usage in pages/home.html).
   If a future surface makes it clickable, wrap in <a class="server-card"> and
   add an a.server-card:hover rule alongside it. */
.server-card {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-medium);
    padding: var(--space-lg);
}

/* Corner-mark card (architectural drawing style) */
.card-corner-marks {
    position: relative;
    background: var(--color-bg-white);
    padding: var(--space-lg);
}

.card-corner-marks::before,
.card-corner-marks::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-border-dark);
}

.card-corner-marks::before {
    top: 0;
    left: 0;
    border-right: none;
    border-bottom: none;
}

.card-corner-marks::after {
    bottom: 0;
    right: 0;
    border-left: none;
    border-top: none;
}

/* === NAVIGATION === */

/* Root nav — cream bg to kill the white/cream seam; ledger-rule bottom border */
.nav-brand {
    background: var(--color-bg-cream);
    border-bottom: 1px solid var(--color-border-medium);
    position: relative;
    z-index: 100;
}

/* Inner flex container — fixed 64px height, max-width 1280px */
.nav-brand__container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Logo anchor — no underline, just the mark */
.nav-brand__brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

/* Logo image — sized in CSS only; markup must never carry inline sizing */
.nav-brand__logo {
    height: 32px;
    width: auto;
    display: block;
}

/* Desktop link group */
.nav-brand__links {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

/* Individual nav link — Inter, mono-caps style */
.nav-brand__link {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-gray);
    text-decoration: none;
    position: relative;
    transition: color 0.15s ease;
}

.nav-brand__link:hover {
    color: var(--color-text-black);
}

/* Active state — architect's red-pen underline via ::after pseudo-element */
.nav-brand__link.is-active {
    color: var(--color-text-black);
}

.nav-brand__link.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 1px;
    background: var(--color-annotation);
}

/* Focus ring — 2px annotation-red, applies to all interactive nav elements */
.nav-brand__link:focus-visible,
.nav-brand__brand:focus-visible,
.nav-brand__hamburger:focus-visible,
.nav-brand__avatar:focus-visible,
.nav-brand__login:focus-visible,
.nav-brand__menu-item:focus-visible,
.nav-brand__mobile-link:focus-visible {
    outline: 2px solid var(--color-annotation);
    outline-offset: 2px;
}

/* Edition stamp wrapper — right-rail, mono, hidden below 768px */
.nav-brand__edition {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

/* Mono uppercase utility — used inside __edition and wherever a label stamp is needed */
.nav-brand__label {
    font-family: var(--font-mono);
    font-size: 0.688rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-light-gray);
}

/* Mobile hamburger toggle — square, transparent, focus ring matches others */
.nav-brand__hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    border-radius: 0;
    cursor: pointer;
    padding: 0;
    color: var(--color-text-charcoal);
    transition: color 0.15s ease;
}

.nav-brand__hamburger:hover {
    color: var(--color-text-black);
}

/* Square user-initials tile — 32×32, charcoal border, NO border-radius */
.nav-brand__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-dark);
    border-radius: 0;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-charcoal);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.nav-brand__avatar:hover {
    background: var(--color-bg-warm-gray);
}

/* Dropdown panel — architectural offset shadow, square corners */
.nav-brand__menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 200px;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-dark);
    box-shadow: 4px 4px 0 0 rgba(26, 26, 26, 0.08);
    z-index: 200;
}

/* Dropdown link/button */
.nav-brand__menu-item {
    display: block;
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--color-text-charcoal);
    text-decoration: none;
    text-align: left;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-brand__menu-item:hover {
    background: var(--color-bg-warm-gray);
}

/* Logout variant — hover draws attention with annotation red */
.nav-brand__menu-item--logout:hover {
    color: var(--color-annotation);
    background: var(--color-bg-warm-gray);
}

/* Anonymous-state LOG IN CTA — btn-brand look scoped to nav context */
.nav-brand__login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xs) var(--space-md);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-black);
    text-decoration: none;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-dark);
    border-radius: var(--radius-btn);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.nav-brand__login:hover {
    background: var(--color-text-black);
    color: var(--color-bg-white);
    border-color: var(--color-text-black);
}

/* Mobile-open panel — cream bg, top border, block links */
.nav-brand__mobile-panel {
    background: var(--color-bg-cream);
    border-top: 1px solid var(--color-border-light);
    padding: var(--space-md) var(--space-lg);
}

.nav-brand__mobile-link {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-gray);
    text-decoration: none;
    padding: var(--space-sm) 0;
    transition: color 0.15s ease;
}

.nav-brand__mobile-link:hover {
    color: var(--color-text-black);
}

.nav-brand__mobile-link.is-active {
    color: var(--color-text-black);
}

/* Responsive — logo shrinks at mobile, hamburger/desktop links toggle */
@media (max-width: 639px) {
    .nav-brand__logo {
        height: 28px;
    }

    .nav-brand__links,
    .nav-brand__edition {
        display: none;
    }
}

@media (min-width: 640px) {
    .nav-brand__hamburger {
        display: none;
    }

    .nav-brand__mobile-panel {
        display: none;
    }
}

@media (max-width: 767px) {
    .nav-brand__edition {
        display: none;
    }
}

/* Reduced-motion — strip all transitions for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .nav-brand__link,
    .nav-brand__brand,
    .nav-brand__hamburger,
    .nav-brand__avatar,
    .nav-brand__login,
    .nav-brand__menu-item,
    .nav-brand__mobile-link {
        transition: none;
    }
}

/* === FOOTER === */

.footer-section-header {
    font-family: var(--font-mono);
    font-size: 0.688rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-gray);
    margin-bottom: var(--space-md);
}

.footer-link {
    color: var(--color-text-gray);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-link:hover {
    color: var(--color-text-black);
}

/* === TABLES === */

.table-spec {
    width: 100%;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    border-collapse: collapse;
}

.table-spec th {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
    padding: var(--space-sm);
    border-bottom: 2px solid var(--color-border-dark);
    background: var(--color-bg-warm-gray);
}

.table-spec td {
    padding: var(--space-sm);
    border-bottom: 1px solid var(--color-border-light);
}

.spec-table-inline {
    font-family: var(--font-mono);
    font-size: 0.75rem;
}

.spec-table-inline td {
    padding: var(--space-xs) 0;
    vertical-align: top;
}

.spec-table-inline td:first-child {
    color: var(--color-text-gray);
    padding-right: var(--space-md);
}

/* === FORMS === */

.input-brand {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    padding: var(--space-sm);
    border: 1px solid var(--color-border-medium);
    background: var(--color-bg-white);
    color: var(--color-text-charcoal);
    transition: border-color 0.2s ease;
}

.input-brand:focus {
    outline: none;
    border-color: var(--color-border-dark);
    box-shadow: 0 0 0 3px rgba(58, 58, 58, 0.1);
}

/* === CODE BLOCKS === */

pre.brand-code {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    line-height: 1.6;
    background: var(--color-text-black);
    color: var(--color-bg-cream);
    padding: var(--space-lg);
    border: 1px solid var(--color-border-dark);
    overflow-x: auto;
}

/* === STATUS INDICATORS === */

.status-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
}

.status-operational {
    background: var(--color-status-operational);
}

.status-development {
    background: var(--color-status-development);
}

.status-offline {
    background: var(--color-status-offline);
}

/* === DIVIDERS === */

.divider-technical {
    height: 1px;
    background: var(--color-border-medium);
    margin: var(--space-lg) 0;
    position: relative;
}

.divider-technical::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -3px;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    border: 1px solid var(--color-border-dark);
    background: var(--color-bg-cream);
    border-radius: 50%;
}

/* === UTILITY CLASSES === */

.text-mono { font-family: var(--font-mono); }
.text-sans { font-family: var(--font-sans); }
.text-technical-label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-gray);
}
.text-small-caps { font-variant: small-caps; letter-spacing: 0.05em; }
.text-accent { color: var(--color-accent); }
.text-ochre { color: var(--color-ochre); }

.bg-cream { background-color: var(--color-bg-cream); }
.bg-warm-gray { background-color: var(--color-bg-warm-gray); }
.bg-accent-subtle { background-color: var(--color-accent-subtle); }

.border-technical { border: 1px solid var(--color-border-dark); }
.border-accent { border-color: var(--color-accent); }

/* === MCP PAGE LAYOUT === */

/* Full-width MCP page layout override */
.mcp-page #main_header { display: none; }
.mcp-page main > div { max-width: 100% !important; padding: 0 !important; }

.mcp-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: var(--space-2xl) var(--space-lg);
}

.mcp-header {
    border: 2px solid var(--color-border-dark);
    background: var(--color-bg-white);
    padding: var(--space-2xl);
    margin-bottom: var(--space-2xl);
    position: relative;
}

.mcp-header::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border: 1px solid var(--color-border-light);
    pointer-events: none;
}

.install-note {
    font-size: 0.75rem;
    color: var(--color-text-gray);
    background: var(--color-bg-warm-gray);
    padding: var(--space-sm);
    border-left: 2px solid var(--color-accent);
    line-height: 1.6;
}

.details-accordion {
    margin-bottom: var(--space-sm);
    border: 1px solid var(--color-border-light);
    background: var(--color-bg-cream);
}

.details-accordion summary {
    padding: var(--space-md);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.details-accordion > div {
    padding: var(--space-lg);
    border-top: 1px solid var(--color-border-light);
    background: var(--color-bg-white);
}

/* Copy button for code blocks */
.copy-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--color-border-medium);
    color: var(--color-text-black);
    border: none;
    padding: 4px 8px;
    font-family: var(--font-mono);
    font-size: 0.688rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.copy-btn:hover {
    opacity: 1;
}

/* === RESPONSIVE === */

@media (max-width: 768px) {
    :root {
        --space-3xl: calc(var(--grid-size) * 8);
        --space-2xl: calc(var(--grid-size) * 6);
    }
}

/* === ACCESSIBILITY === */

*:focus-visible {
    outline: 2px solid var(--color-border-dark);
    outline-offset: 2px;
}

@media (prefers-contrast: high) {
    :root {
        --color-border-medium: #000000;
        --color-text-gray: #000000;
        --color-accent: #B91C1C;
    }
}