/* ============================================
   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&display=swap');

:root {
    /* Typography */
    --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-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 accent — used like an architect's red pen */
    --color-accent: #B91C1C;
    --color-accent-light: #DC2626;
    --color-accent-dark: #7F1D1D;
    --color-accent-muted: #991B1B;
    --color-accent-subtle: rgba(185, 28, 28, 0.08);

    /* Secondary warmth — gold for quiet diagram lines */
    --color-warm: #B8935F;
    --color-warm-light: #D4A574;

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

    /* 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%;
}

/* === 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 === */

.btn-brand {
    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 var(--color-border-dark);
    background: var(--color-bg-white);
    color: var(--color-text-black);
    transition: all 0.2s ease;
    cursor: pointer;
}

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

/* Accent button — red annotation style, for primary CTAs only */
.btn-brand-accent {
    background: var(--color-bg-white);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

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

/* === 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;
}

.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;
}

.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 */
.server-card {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-medium);
    padding: var(--space-lg);
    transition: border-color 0.2s ease;
}

.server-card:hover {
    border-color: var(--color-border-dark);
}

/* 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 === */

.nav-brand {
    background: var(--color-bg-white);
    border-bottom: 1px solid var(--color-border-light);
}

.nav-brand a {
    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;
    transition: color 0.2s ease;
}

.nav-brand a:hover,
.nav-brand a.active {
    color: var(--color-text-black);
}

/* === 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);
}

.table-spec tr:hover {
    background: var(--color-bg-warm-gray);
}

.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: #4CAF50;
}

.status-development {
    background: #FFA726;
}

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

/* === 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-warm { color: var(--color-warm); }

.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;
    }
}