/* ==================================================
   BEACONCORE — THEME TOKENS
   Palette and mode variables only.
   No layout. No components. No structure.
   ================================================== */

/* --------------------------------------------------
   BASE TOKENS
   -------------------------------------------------- */
html {
    --color-bg-base:        #050608;
    --color-bg-panel:       #0a0c0e;
    --color-bg-surface:     transparent;

    --color-text-primary:   #dfe7ef;
    --color-text-muted:     rgba(223, 231, 239, 0.65);
    --color-text-dim:       rgba(223, 231, 239, 0.4);

    --color-border:         #e2e2e2;
    --color-border-panel:   rgba(0, 180, 255, 0.16);

    --color-accent-operator: #00b4ff;
    --color-accent-glow:     rgba(0, 255, 229, 0.35);
    --color-accent-teal:     #00FFE5;

    --color-plate-rule:     rgba(255, 255, 255, 0.25);
}

/* --------------------------------------------------
   OPERATOR MODE — html.saber-on
   -------------------------------------------------- */
html.saber-on {
    --color-plate-rule:     rgba(0, 180, 255, 0.35);
}

/* --------------------------------------------------
   PROTOCOL PAGE
   -------------------------------------------------- */
html.saber-on body.protocol-page {
    background:
        linear-gradient(
            to bottom,
            #050608 0%,
            #050608 40%,
            rgba(10, 12, 14, 0.95) 60%,
            rgba(12, 14, 16, 0.98) 75%,
            rgba(15, 17, 19, 1) 100%
        );
    background-size: cover;
    background-attachment: fixed;
    background-position: center top;
    color: #dfe7ef;
}

html.saber-on body.protocol-page header {
    border-bottom: 1px solid rgba(0, 180, 255, 0.18);
    background: rgba(5, 6, 8, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

html.saber-on body.protocol-page .nav-left a {
    color: #dff8ff;
    text-shadow: 0 0 12px rgba(0, 180, 255, 0.35);
}

html.saber-on body.protocol-page .nav-right a {
    color: rgba(180, 220, 255, 0.75);
}

html.saber-on body.protocol-page .nav-right a:hover {
    color: #dff8ff;
    text-shadow: 0 0 8px rgba(0, 180, 255, 0.4);
    opacity: 1;
}

html.saber-on body.protocol-page .nav-right a.active {
    color: #dff8ff;
    text-shadow: 0 0 10px rgba(0, 180, 255, 0.45);
    opacity: 1;
}

/* --------------------------------------------------
   SURFACES PAGE — warm neutral palette
   -------------------------------------------------- */
html.saber-on body.surfaces-page {
    background:
        linear-gradient(
            to bottom,
            #1f1616 0%,
            #1c1414 35%,
            rgba(30, 22, 22, 0.95) 60%,
            rgba(26, 20, 20, 0.98) 75%,
            rgba(22, 17, 17, 1) 100%
        );
    background-size: cover;
    background-attachment: fixed;
    background-position: center top;
    color: #f2e9e4;
}

html.saber-on body.surfaces-page header {
    border-bottom: 1px solid rgba(180, 150, 130, 0.18);
    background: rgba(31, 22, 22, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* --------------------------------------------------
   ARTIFACT PAGE — default dark
   -------------------------------------------------- */
html.saber-on body.artifact-page {
    background: #050608;
    color: #dfe7ef;
}

html.saber-on body.artifact-page header {
    border-bottom: 1px solid rgba(0, 180, 255, 0.18);
    background: rgba(5, 6, 8, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

html.saber-on body.artifact-page .nav-left a {
    color: #dff8ff;
    text-shadow: 0 0 12px rgba(0, 180, 255, 0.35);
}

html.saber-on body.artifact-page .nav-right a {
    color: rgba(180, 220, 255, 0.75);
}

html.saber-on body.artifact-page .nav-right a:hover {
    color: #dff8ff;
    text-shadow: 0 0 8px rgba(0, 180, 255, 0.4);
    opacity: 1;
}

html.saber-on body.artifact-page .nav-right a.active {
    color: #dff8ff;
    text-shadow: 0 0 10px rgba(0, 180, 255, 0.45);
    opacity: 1;
}

/* --------------------------------------------------
   RED SABER — html.saber-red override
   -------------------------------------------------- */
html.saber-red body:not(.surfaces-page) {
    background:
        linear-gradient(
            to bottom,
            #110608 0%,
            #0f0507 40%,
            rgba(16,6,8,0.95) 60%,
            rgba(14,5,7,0.98) 75%,
            rgba(12,4,6,1) 100%
        );
    background-size: cover;
    background-attachment: fixed;
    color: #f2dfe4;
}

html.saber-red header {
    border-bottom-color: rgba(200,60,60,0.55) !important;
    background: rgba(12,5,6,0.82) !important;
    box-shadow: none !important;
}
html.saber-red header:hover {
    border-bottom-color: rgba(200,60,60,0.55) !important;
    background: rgba(12,5,6,0.82) !important;
    box-shadow: 0 4px 22px rgba(200, 40, 40, 0.18), 0 1px 6px rgba(220, 60, 60, 0.38) !important;
}

html.saber-red .panel-hero,
html.saber-red .artifact-hero,
html.saber-red .protocol-hero,
html.saber-red .panel-body,
html.saber-red .artifact-body,
html.saber-red .protocol-overview,
html.saber-red .protocol-artifacts,
html.saber-red .codex-class,
html.saber-red .protocol-doctrine {
    border-color: rgba(200,60,60,0.22) !important;
}

html.saber-red .panel-hero:hover,
html.saber-red .artifact-hero:hover,
html.saber-red .panel-body:hover,
html.saber-red .artifact-body:hover,
html.saber-red .protocol-overview:hover,
html.saber-red .protocol-artifacts:hover {
    border-color: rgba(220,60,60,0.65) !important;
    box-shadow: 0 0 22px rgba(200,40,40,0.14), 0 0 6px rgba(220,60,60,0.28) !important;
}

html.saber-red .artifact-plate {
    border-left-color: rgba(200,80,80,0.45) !important;
}
html.saber-red .artifact-plate:hover {
    border-left-color: rgba(220,60,60,0.85) !important;
    box-shadow: -4px 0 18px rgba(200,40,40,0.30), 0 0 24px rgba(200,40,40,0.10) !important;
}

/* --------------------------------------------------
   SURFACES INVERT — when red saber hits surfaces page,
   activate blue instead (and vice versa via toggle)
   -------------------------------------------------- */
html.saber-red body.surfaces-page,
html.saber-on body.surfaces-page.surfaces-invert {
    background:
        linear-gradient(
            to bottom,
            #050608 0%,
            #050608 40%,
            rgba(10,12,14,0.95) 60%,
            rgba(12,14,16,0.98) 75%,
            rgba(15,17,19,1) 100%
        ) !important;
    color: #dfe7ef !important;
}

html.saber-red body.surfaces-page .panel-hero,
html.saber-red body.surfaces-page .artifact-hero,
html.saber-red body.surfaces-page .panel-body,
html.saber-red body.surfaces-page .artifact-body,
html.saber-on body.surfaces-page.surfaces-invert .panel-hero,
html.saber-on body.surfaces-page.surfaces-invert .artifact-hero,
html.saber-on body.surfaces-page.surfaces-invert .panel-body,
html.saber-on body.surfaces-page.surfaces-invert .artifact-body {
    background: #050608 !important;
    border: 1px solid rgba(0,180,255,0.22) !important;
}

html.saber-red body.surfaces-page header,
html.saber-on body.surfaces-page.surfaces-invert header {
    border-bottom-color: rgba(0,180,255,0.22) !important;
    background: rgba(5,6,8,0.82) !important;
}