/* ==================================================
   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-bg-surfaces-warm: #241a1a;

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

    --color-border:         #e2e2e2;
    --color-border-image:   #393836;
    --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-BLUE ALPHA RAMP
       Token name = --op-<alpha*100>
       Used for borders, glows, scrim, scrollbar, dividers.
       ---------------------------------------------------- */
    --op-04: rgba(0, 180, 255, 0.04);
    --op-05: rgba(0, 180, 255, 0.05);
    --op-08: rgba(0, 180, 255, 0.08);
    --op-10: rgba(0, 180, 255, 0.10);
    --op-12: rgba(0, 180, 255, 0.12);
    --op-18: rgba(0, 180, 255, 0.18);
    --op-22: rgba(0, 180, 255, 0.22);
    --op-25: rgba(0, 180, 255, 0.25);
    --op-28: rgba(0, 180, 255, 0.28);
    --op-30: rgba(0, 180, 255, 0.30);
    --op-35: rgba(0, 180, 255, 0.35);
    --op-45: rgba(0, 180, 255, 0.45);
    --op-50: rgba(0, 180, 255, 0.50);
    --op-55: rgba(0, 180, 255, 0.55);
    --op-85: rgba(0, 180, 255, 0.85);
    --op-link-rest: rgba(0, 220, 255, 0.85);

    /* ----------------------------------------------------
       TEAL GLOW RAMP (artifact-plate hover, sf-card hover)
       ---------------------------------------------------- */
    --glow-teal-08: rgba(0, 255, 229, 0.08);
    --glow-teal-18: rgba(0, 255, 229, 0.18);
    --glow-teal-30: rgba(0, 255, 229, 0.30);
    --glow-teal-55: rgba(0, 255, 229, 0.55);

    /* ----------------------------------------------------
       RED SABER ALPHA RAMP (surfaces / saber-red blocks)
       --red-* (220,60,60 family) and --red-deep-* (200,40,40)
       ---------------------------------------------------- */
    --red-06:      rgba(220, 60, 60, 0.06);
    --red-28:      rgba(220, 60, 60, 0.28);
    --red-32:      rgba(220, 60, 60, 0.32);
    --red-65:      rgba(220, 60, 60, 0.65);
    --red-85:      rgba(220, 60, 60, 0.85);
    --red-deep-10: rgba(200, 40, 40, 0.10);
    --red-deep-14: rgba(200, 40, 40, 0.14);
    --red-deep-30: rgba(200, 40, 40, 0.30);
    --red-warm-22: rgba(200, 80, 80, 0.22);
    --red-warm-45: rgba(200, 80, 80, 0.45);

    /* ----------------------------------------------------
       TEXT LUMINANCE RAMP (text-primary alpha)
       Used for axis captions, slot labels, summary chrome.
       ---------------------------------------------------- */
    --text-alpha-22: rgba(223, 231, 239, 0.22);
    --text-alpha-32: rgba(223, 231, 239, 0.32);
    --text-alpha-38: rgba(223, 231, 239, 0.38);
    --text-alpha-40: rgba(223, 231, 239, 0.40);
    --text-alpha-42: rgba(223, 231, 239, 0.42);
    --text-alpha-45: rgba(223, 231, 239, 0.45);
    --text-alpha-52: rgba(223, 231, 239, 0.52);
    --text-alpha-72: rgba(223, 231, 239, 0.72);

    /* ----------------------------------------------------
       PANEL SCRIM (bg-base alpha)
       Used for instrument frames (sc-topbar, sc-sidebar).
       ---------------------------------------------------- */
    --panel-scrim-55: rgba(5, 6, 8, 0.55);
    --panel-scrim-60: rgba(5, 6, 8, 0.6);

    /* ----------------------------------------------------
       PHASE PULSE (instrument phase transitions)
       ---------------------------------------------------- */
    --phase-pincer:      rgba(255, 160, 60, 0.85);
    --phase-apex:        rgba(255, 255, 255, 0.90);
    --phase-reexpansion: rgba(120, 220, 140, 0.85);
    /* phase-collapse   = --red-85 (reuse)                  */
    /* phase-divergence = --op-85 (reuse)                   */

    /* ----------------------------------------------------
       SHAPE CATEGORY (sidebar pattern strip)
       loop  = --glow-teal-55  (reuse)
       arc   = --op-55         (reuse)
       claw  = --red-65        (reuse)
       ---------------------------------------------------- */
    --shape-spiral: rgba(255, 210, 80, 0.60);
    --shape-funnel: rgba(255, 120, 120, 0.60);
    --shape-bloom:  rgba(180, 255, 200, 0.55);
    --shape-empty:  rgba(120, 140, 160, 0.20);
}

/* --------------------------------------------------
   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
   -------------------------------------------------- */
/* Token overrides — shift all accent/border tokens from blue to red */
html.saber-red {
    --color-border-panel:    rgba(200, 60, 60, 0.18);
    --color-accent-operator: #cc3030;
    --color-accent-glow:     rgba(220, 60, 60, 0.35);
    --color-accent-teal:     #ff4040;
    --color-text-primary:    #f2dfe4;
    --color-text-muted:      rgba(242, 223, 228, 0.65);
    --color-text-dim:        rgba(242, 223, 228, 0.4);
}

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