/* ============================================================================
   LOREBENCH BLUEPRINT THEME
   ============================================================================
   Architectural/engineering blueprint aesthetic
   Classic blueprint blue with white technical drafting lines
   ============================================================================ */

:root[data-theme="blueprint"] {
    /* PRIMARY ACCENT COLOR (white for lines/buttons) */
    --lb-accent-primary: #ffffff;
    --lb-accent-primary-light: #ffffff;
    --lb-accent-primary-dark: #d0e8ff;
    --lb-accent-primary-darker: #a0c8e8;

    /* BACKGROUND COLORS (classic blueprint blue - lighter) */
    --lb-bg-base: #1e5a99;
    --lb-bg-elevated: #2468a8;
    --lb-bg-elevated-1: #2a72b5;
    --lb-bg-elevated-2: #3080c0;
    --lb-bg-elevated-3: #3a8acc;
    --lb-bg-input: #1a5090;
    --lb-bg-hover: #3a8acc;
    --bg-tertiary: #2468a8;
    --bg-primary: #2468a8;

    /* BORDER COLORS (white/light technical lines) */
    --lb-border-subtle: rgba(255, 255, 255, 0.2);
    --lb-border-default: rgba(255, 255, 255, 0.4);
    --lb-border-strong: rgba(255, 255, 255, 0.6);
    --lb-border-focus: #ffffff;

    /* TEXT COLORS (white technical text) */
    --lb-text-primary: #ffffff;
    --lb-text-secondary: #e0f0ff;
    --lb-text-muted: #a0c8e8;
    --lb-text-subtle: #80b0d8;
    --lb-text-inverse: #1e5a99;

    /* STATE COLORS */
    --lb-success: #90ee90;
    --lb-error: #ff9090;
    --lb-error-bg: #4a3050;
    --lb-error-border: #ff9090;
    --lb-warning: #ffe066;
    --lb-info: #a0d8ff;

    /* COMPONENT-SPECIFIC */
    --lb-card-bg: var(--lb-bg-elevated);
    --lb-card-border: var(--lb-border-default);
    --lb-card-header-bg: linear-gradient(135deg, var(--lb-bg-elevated-3) 0%, var(--lb-bg-elevated) 100%);

    /* INTERACTIVE ELEMENTS - White buttons with blue text */
    --lb-button-primary-bg: #ffffff;
    --lb-button-primary-hover: #e0f0ff;
    --lb-button-primary-text: #1e5a99;
    --lb-button-secondary-bg: rgba(255, 255, 255, 0.15);
    --lb-button-secondary-hover: rgba(255, 255, 255, 0.25);
    --lb-button-secondary-text: #ffffff;

    /* RATING SYSTEM */
    --lb-rating-fill: #ffffff;
    --lb-rating-empty: rgba(255, 255, 255, 0.3);
    --lb-rating-hover: #e0f0ff;

    /* SHADOWS (subtle dark glow) */
    --lb-shadow-sm: 0 1px 3px rgba(0, 30, 60, 0.3);
    --lb-shadow-md: 0 4px 8px rgba(0, 30, 60, 0.35);
    --lb-shadow-lg: 0 8px 20px rgba(0, 30, 60, 0.4);

    /* ========================================================================
       BACKWARDS COMPATIBILITY MAPPINGS
       ======================================================================== */
    --primary-color: var(--lb-accent-primary);
    --primary-hover: var(--lb-accent-primary-light);
    --bg-secondary: var(--lb-bg-elevated-2);
    --bg-card: var(--lb-bg-elevated);
    --bg-hover: var(--lb-bg-hover);
    --border-color: var(--lb-border-default);
    --text-primary: var(--lb-text-primary);
    --text-secondary: var(--lb-text-secondary);
    --text-muted: var(--lb-text-muted);

    /* UX Component Mappings */
    --ux-bg: var(--lb-bg-base);
    --ux-text: var(--lb-text-primary);
}

/* ============================================================================
   BLUEPRINT GRID BACKGROUND WITH CONSTRUCTION LINES
   ============================================================================ */

:root[data-theme="blueprint"] body {
    background-color: var(--lb-bg-base);
    background-image:
        /* Major grid lines */
        linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px),
        /* Minor grid lines */
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size:
        100px 100px,
        100px 100px,
        20px 20px,
        20px 20px;
}

/* ============================================================================
   OVERDRAWN CONSTRUCTION LINES (extending past corners)
   ============================================================================ */

/* Cards with overdrawn corner lines */
:root[data-theme="blueprint"] .card,
:root[data-theme="blueprint"] .lb-card {
    position: relative;
    border: 1px solid var(--lb-border-default);
    box-shadow: var(--lb-shadow-md);
}

/* Top-left overdrawn lines */
:root[data-theme="blueprint"] .card::before,
:root[data-theme="blueprint"] .lb-card::before {
    content: "";
    position: absolute;
    top: -8px;
    left: -8px;
    width: 20px;
    height: 20px;
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    pointer-events: none;
}

/* Bottom-right overdrawn lines */
:root[data-theme="blueprint"] .card::after,
:root[data-theme="blueprint"] .lb-card::after {
    content: "";
    position: absolute;
    bottom: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    pointer-events: none;
}

/* ============================================================================
   BLUEPRINT-SPECIFIC COMPONENT OVERRIDES
   ============================================================================ */

/* Dashed borders for secondary elements */
:root[data-theme="blueprint"] .card-header,
:root[data-theme="blueprint"] .lb-card-header {
    border-bottom: 1px dashed var(--lb-border-default);
}

/* Technical corner markers */
:root[data-theme="blueprint"] .main-content,
:root[data-theme="blueprint"] .page-content {
    position: relative;
}

:root[data-theme="blueprint"] .main-content::before,
:root[data-theme="blueprint"] .page-content::before {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    width: 25px;
    height: 25px;
    border-left: 2px solid rgba(255, 255, 255, 0.5);
    border-top: 2px solid rgba(255, 255, 255, 0.5);
    pointer-events: none;
    z-index: 1;
}

:root[data-theme="blueprint"] .main-content::after,
:root[data-theme="blueprint"] .page-content::after {
    content: "";
    position: absolute;
    bottom: 15px;
    right: 15px;
    width: 25px;
    height: 25px;
    border-right: 2px solid rgba(255, 255, 255, 0.5);
    border-bottom: 2px solid rgba(255, 255, 255, 0.5);
    pointer-events: none;
    z-index: 1;
}

/* Input fields with technical styling */
:root[data-theme="blueprint"] input,
:root[data-theme="blueprint"] textarea,
:root[data-theme="blueprint"] select {
    border: 1px solid var(--lb-border-default);
    background: var(--lb-bg-input);
    color: var(--lb-text-primary);
}

:root[data-theme="blueprint"] input:focus,
:root[data-theme="blueprint"] textarea:focus,
:root[data-theme="blueprint"] select:focus {
    border-color: #ffffff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
    outline: none;
}

:root[data-theme="blueprint"] input::placeholder,
:root[data-theme="blueprint"] textarea::placeholder {
    color: var(--lb-text-muted);
}

/* Buttons - White with blue text */
:root[data-theme="blueprint"] button,
:root[data-theme="blueprint"] .btn {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    font-size: 0.9em;
}

:root[data-theme="blueprint"] .btn-primary,
:root[data-theme="blueprint"] button[type="submit"] {
    background: #ffffff !important;
    color: #1e5a99 !important;
    border: 2px solid #ffffff !important;
}

:root[data-theme="blueprint"] .btn-primary:hover,
:root[data-theme="blueprint"] button[type="submit"]:hover {
    background: #e0f0ff !important;
    border-color: #e0f0ff !important;
}

:root[data-theme="blueprint"] .btn-secondary {
    background: transparent !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

:root[data-theme="blueprint"] .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: #ffffff !important;
}

/* Links styled as technical references */
:root[data-theme="blueprint"] a {
    color: #ffffff;
    text-decoration: none;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.5);
}

:root[data-theme="blueprint"] a:hover {
    color: #e0f0ff;
    border-bottom-style: solid;
    border-bottom-color: #e0f0ff;
}

/* Tables with technical grid styling */
:root[data-theme="blueprint"] table {
    border: 1px solid var(--lb-border-default);
}

:root[data-theme="blueprint"] th,
:root[data-theme="blueprint"] td {
    border: 1px solid var(--lb-border-subtle);
}

:root[data-theme="blueprint"] th {
    background: var(--lb-bg-elevated-2);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8em;
    font-weight: 600;
}

/* Scrollbar styling */
:root[data-theme="blueprint"] ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

:root[data-theme="blueprint"] ::-webkit-scrollbar-track {
    background: var(--lb-bg-base);
    border-left: 1px solid var(--lb-border-subtle);
}

:root[data-theme="blueprint"] ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

:root[data-theme="blueprint"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}

/* Code blocks with monospace technical feel */
:root[data-theme="blueprint"] code,
:root[data-theme="blueprint"] pre {
    background: rgba(0, 30, 60, 0.3);
    border: 1px solid var(--lb-border-subtle);
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    color: #e0f0ff;
}

/* Headings with technical annotation style */
:root[data-theme="blueprint"] h1,
:root[data-theme="blueprint"] h2,
:root[data-theme="blueprint"] h3,
:root[data-theme="blueprint"] h4,
:root[data-theme="blueprint"] h5,
:root[data-theme="blueprint"] h6 {
    letter-spacing: 0.03em;
    font-weight: 500;
    text-transform: uppercase;
}

/* Section labels with dimension line style */
:root[data-theme="blueprint"] h2::before {
    content: "// ";
    opacity: 0.5;
}

/* Horizontal rules as section dividers with dimension markers */
:root[data-theme="blueprint"] hr {
    border: none;
    height: 1px;
    background:
        linear-gradient(90deg,
            transparent 0%,
            rgba(255,255,255,0.4) 10%,
            rgba(255,255,255,0.4) 90%,
            transparent 100%
        );
    margin: 2rem 0;
    position: relative;
}

:root[data-theme="blueprint"] hr::before,
:root[data-theme="blueprint"] hr::after {
    content: "";
    position: absolute;
    top: -4px;
    width: 1px;
    height: 9px;
    background: rgba(255, 255, 255, 0.4);
}

:root[data-theme="blueprint"] hr::before {
    left: 10%;
}

:root[data-theme="blueprint"] hr::after {
    right: 10%;
}

/* Selection color */
:root[data-theme="blueprint"] ::selection {
    background: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}