/* ===========================================================================
   app.css — Global design tokens, reset, and shared utilities ONLY.
   Component-specific styles live in their .razor.css files.
   =========================================================================== */

/* ========== DESIGN TOKENS (Light — default) ========== */
:root,
[data-theme="light"] {
    --color-bg: #ffffff;
    --color-text: #1a1a2e;
    --color-muted: #6b7280;
    --color-primary: #2563eb;
    --color-primary-fg: #ffffff;
    --color-accent: #3b82f6;
    --color-surface: #f3f4f6;
    --color-border: #e5e7eb;
    --color-card-bg: #ffffff;
    --color-header-bg: #2563eb;
    --color-header-fg: #ffffff;
    --color-footer-bg: #f3f4f6;
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", "Courier New", monospace;
    --radius: 0.375rem;
    --max-width: 60rem;

    /* Inline code */
    --color-inline-code-bg: #eff1f5;
    --color-inline-code-fg: #1a1a2e;
    --color-inline-code-border: #dde0e6;

    /* Syntax highlighting tokens (bg #f3f4f6) — contrast verified vs bg */
    --hl-bg: #f3f4f6;
    --hl-fg: #1a1a2e;
    --hl-keyword: #6f42c1;
    --hl-string: #0a3069;
    --hl-comment: #636c76;
    --hl-number: #cf7700;
    --hl-function: #0550ae;
    --hl-title: #c11e3a;
    --hl-type: #0b6e6e;
    --hl-literal: #cf7700;
    --hl-attr: #4f46e5;
    --hl-built-in: #0b6e6e;
    --hl-tag: #0550ae;
    --hl-selector: #6f42c1;
    --hl-property: #4f46e5;
    --hl-punctuation: #1a1a2e;

    /* Terminal box — always dark-tinted */
    --terminal-bg: #1e1e2e;
    --terminal-fg: #cdd6f4;
    --terminal-prompt: #a6e3a1;
    --terminal-ok: #a6e3a1;
    --terminal-out: #cdd6f4;
    --terminal-dot-red: #f38ba8;
    --terminal-dot-amber: #f9e2af;
    --terminal-dot-green: #a6e3a1;
    --terminal-header-bg: #313244;
    --terminal-title-fg: #bac2de;
}

/* ---- Dark ---- */
[data-theme="dark"] {
    --color-bg: #0f172a;
    --color-text: #e2e8f0;
    --color-muted: #94a3b8;
    --color-primary: #60a5fa;
    --color-primary-fg: #0f172a;
    --color-accent: #3b82f6;
    --color-surface: #1e293b;
    --color-border: #334155;
    --color-card-bg: #1e293b;
    --color-header-bg: #1e293b;
    --color-header-fg: #e2e8f0;
    --color-footer-bg: #1e293b;

    --color-inline-code-bg: #1c2433;
    --color-inline-code-fg: #e2e8f0;
    --color-inline-code-border: #2d3a4d;

    --hl-bg: #1e293b;
    --hl-fg: #e2e8f0;
    --hl-keyword: #c084fc;
    --hl-string: #7ee7a8;
    --hl-comment: #8b949e;
    --hl-number: #fbbf24;
    --hl-function: #6cb6ff;
    --hl-title: #f87171;
    --hl-type: #22d3ee;
    --hl-literal: #fbbf24;
    --hl-attr: #a5b4fc;
    --hl-built-in: #22d3ee;
    --hl-tag: #6cb6ff;
    --hl-selector: #c084fc;
    --hl-property: #a5b4fc;
    --hl-punctuation: #e2e8f0;

    --terminal-bg: #11111b;
    --terminal-fg: #cdd6f4;
    --terminal-prompt: #a6e3a1;
    --terminal-ok: #a6e3a1;
    --terminal-out: #cdd6f4;
    --terminal-dot-red: #f38ba8;
    --terminal-dot-amber: #f9e2af;
    --terminal-dot-green: #a6e3a1;
    --terminal-header-bg: #1e1e2e;
    --terminal-title-fg: #bac2de;
}

/* ---- Sepia ---- */
[data-theme="sepia"] {
    --color-bg: #f4ecd8;
    --color-text: #433422;
    --color-muted: #7a6652;
    --color-primary: #8b4513;
    --color-primary-fg: #ffffff;
    --color-accent: #a0522d;
    --color-surface: #ede0c8;
    --color-border: #d4c4a8;
    --color-card-bg: #f4ecd8;
    --color-header-bg: #6b3410;
    --color-header-fg: #f4ecd8;
    --color-footer-bg: #ede0c8;

    --color-inline-code-bg: #e8dbc3;
    --color-inline-code-fg: #433422;
    --color-inline-code-border: #cdbfa5;

    --hl-bg: #ede0c8;
    --hl-fg: #433422;
    --hl-keyword: #7a3510;
    --hl-string: #2e6e32;
    --hl-comment: #8a7a66;
    --hl-number: #b05800;
    --hl-function: #6b3410;
    --hl-title: #a01c1c;
    --hl-type: #006050;
    --hl-literal: #b05800;
    --hl-attr: #4a148c;
    --hl-built-in: #006050;
    --hl-tag: #6b3410;
    --hl-selector: #7a3510;
    --hl-property: #4a148c;
    --hl-punctuation: #433422;

    --terminal-bg: #2a2013;
    --terminal-fg: #d4c4a8;
    --terminal-prompt: #6b8e23;
    --terminal-ok: #6b8e23;
    --terminal-out: #d4c4a8;
    --terminal-dot-red: #cd5c5c;
    --terminal-dot-amber: #daa520;
    --terminal-dot-green: #6b8e23;
    --terminal-header-bg: #3a2d1a;
    --terminal-title-fg: #b8a88a;
}

/* ---- Solarized Light ---- */
[data-theme="solarized-light"] {
    --color-bg: #fdf6e3;
    --color-text: #657b83;
    --color-muted: #93a1a1;
    --color-primary: #268bd2;
    --color-primary-fg: #fdf6e3;
    --color-accent: #2aa198;
    --color-surface: #eee8d5;
    --color-border: #d6cdb5;
    --color-card-bg: #fdf6e3;
    --color-header-bg: #073642;
    --color-header-fg: #eee8d5;
    --color-footer-bg: #eee8d5;

    --color-inline-code-bg: #e8e1cc;
    --color-inline-code-fg: #586e75;
    --color-inline-code-border: #d0c8b0;

    --hl-bg: #eee8d5;
    --hl-fg: #657b83;
    --hl-keyword: #859900;
    --hl-string: #2aa198;
    --hl-comment: #93a1a1;
    --hl-number: #d33682;
    --hl-function: #268bd2;
    --hl-title: #cb4b16;
    --hl-type: #b58900;
    --hl-literal: #d33682;
    --hl-attr: #6c71c4;
    --hl-built-in: #b58900;
    --hl-tag: #268bd2;
    --hl-selector: #859900;
    --hl-property: #6c71c4;
    --hl-punctuation: #657b83;

    --terminal-bg: #002b36;
    --terminal-fg: #839496;
    --terminal-prompt: #859900;
    --terminal-ok: #859900;
    --terminal-out: #839496;
    --terminal-dot-red: #dc322f;
    --terminal-dot-amber: #b58900;
    --terminal-dot-green: #859900;
    --terminal-header-bg: #073642;
    --terminal-title-fg: #93a1a1;
}

/* ---- Solarized Dark ---- */
[data-theme="solarized-dark"] {
    --color-bg: #002b36;
    --color-text: #839496;
    --color-muted: #586e75;
    --color-primary: #268bd2;
    --color-primary-fg: #002b36;
    --color-accent: #2aa198;
    --color-surface: #073642;
    --color-border: #2a4a53;
    --color-card-bg: #073642;
    --color-header-bg: #073642;
    --color-header-fg: #93a1a1;
    --color-footer-bg: #073642;

    --color-inline-code-bg: #0a3440;
    --color-inline-code-fg: #93a1a1;
    --color-inline-code-border: #1f4852;

    --hl-bg: #073642;
    --hl-fg: #839496;
    --hl-keyword: #859900;
    --hl-string: #2aa198;
    --hl-comment: #586e75;
    --hl-number: #d33682;
    --hl-function: #268bd2;
    --hl-title: #cb4b16;
    --hl-type: #b58900;
    --hl-literal: #d33682;
    --hl-attr: #6c71c4;
    --hl-built-in: #b58900;
    --hl-tag: #268bd2;
    --hl-selector: #859900;
    --hl-property: #6c71c4;
    --hl-punctuation: #839496;

    --terminal-bg: #00212b;
    --terminal-fg: #839496;
    --terminal-prompt: #859900;
    --terminal-ok: #859900;
    --terminal-out: #839496;
    --terminal-dot-red: #dc322f;
    --terminal-dot-amber: #b58900;
    --terminal-dot-green: #859900;
    --terminal-header-bg: #002b36;
    --terminal-title-fg: #93a1a1;
}

/* ---- High Contrast ---- */
[data-theme="high-contrast"] {
    --color-bg: #000000;
    --color-text: #ffffff;
    --color-muted: #cccccc;
    --color-primary: #ffff00;
    --color-primary-fg: #000000;
    --color-accent: #00ffff;
    --color-surface: #1a1a1a;
    --color-border: #666666;
    --color-card-bg: #111111;
    --color-header-bg: #1a1a1a;
    --color-header-fg: #ffffff;
    --color-footer-bg: #1a1a1a;

    --color-inline-code-bg: #1a1a1a;
    --color-inline-code-fg: #ffffff;
    --color-inline-code-border: #555555;

    --hl-bg: #1a1a1a;
    --hl-fg: #ffffff;
    --hl-keyword: #ffff00;
    --hl-string: #00ff00;
    --hl-comment: #888888;
    --hl-number: #ff6600;
    --hl-function: #00ffff;
    --hl-title: #ff4444;
    --hl-type: #44ffff;
    --hl-literal: #ff6600;
    --hl-attr: #ffff00;
    --hl-built-in: #44ffff;
    --hl-tag: #00ffff;
    --hl-selector: #ffff00;
    --hl-property: #ffff00;
    --hl-punctuation: #ffffff;

    --terminal-bg: #000000;
    --terminal-fg: #ffffff;
    --terminal-prompt: #00ff00;
    --terminal-ok: #00ff00;
    --terminal-out: #ffffff;
    --terminal-dot-red: #ff0000;
    --terminal-dot-amber: #ffff00;
    --terminal-dot-green: #00ff00;
    --terminal-header-bg: #111111;
    --terminal-title-fg: #cccccc;
}

/* ========== RESET ========== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    /* overflow-x: hidden removed to prevent viewport scaling bugs on mobile */
}

body {
    font-family: var(--font-sans);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
    overflow-wrap: break-word;
    word-break: normal;
    /* Removed width: 100%, max-width: 100vw, and overflow-x: hidden */
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; }

code {
    font-family: var(--font-mono);
}
pre { min-width: 0; }

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1rem;
    overflow-wrap: break-word;
}

/* ========== BUTTONS (shared utility) ========== */
.btn {
    display: inline-block;
    padding: 0.625rem 1.5rem;
    border-radius: var(--radius);
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.15s;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
}
.btn:hover { opacity: 0.88; text-decoration: none; }
.btn-primary { background: var(--color-primary); color: var(--color-primary-fg); }
.btn-secondary { background: var(--color-accent); color: #fff; }
.btn-danger { background: #dc2626; color: #fff; }
.btn-outline {
    background: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}
.btn-sm {
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
}

/* ========== SHARED BLOG / TAG STYLES (used in Blog, BlogPost, Home) ========== */
.blog-meta { color: var(--color-muted); font-size: 0.875rem; margin-bottom: 0.75rem; }

.tag-list { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.75rem; }

.tag {
    display: inline-block;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 3px;
    padding: 0.15rem 0.5rem;
    font-size: 0.8rem;
    color: var(--color-text);
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}
a.tag:hover {
    background: var(--color-primary);
    color: var(--color-primary-fg);
    border-color: var(--color-primary);
    text-decoration: none;
}

.featured-badge {
    display: inline-block;
    background: var(--color-accent);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    margin-bottom: 0.5rem;
}

/* ========== FORMS (shared across MasterDetail, Showcase, ShowcaseDetail) ========== */
.form-group { margin-bottom: 1rem; }
.form-group label {
    display: block;
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
    color: var(--color-muted);
}
.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.95rem;
    font-family: var(--font-sans);
    background: var(--color-bg);
    color: var(--color-text);
    overflow-wrap: break-word;
}
.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
.form-group textarea {
    resize: vertical;
    min-height: 5rem;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}
.form-actions { display: flex; gap: 0.5rem; margin-top: 1rem; }
.form-validation { color: #dc2626; font-size: 0.8rem; margin-top: 0.25rem; }

/* ========== LOADING ========== */
.loading { text-align: center; padding: 2rem; color: var(--color-muted); }