:root {
    /* Base palette - sampled from media/base/color_palette.png */
    --ioe-periwinkle: #9fb0e2;
    --ioe-forest:     #466e3f;
    --ioe-teal-black: #12272c;
    --ioe-coral:      #ea777c;
    --ioe-navy:       #242e48;
    --ioe-lavender:   #bcbcd8;

    /* Surfaces */
    --ioe-bg:            var(--ioe-teal-black);
    --ioe-bg-elevated:   var(--ioe-navy);
    --ioe-bg-elevated-2: #364060;

    /* Text */
    --ioe-text:       var(--ioe-lavender);
    --ioe-text-muted: #8d90ab;
    --ioe-heading:    var(--ioe-periwinkle);

    /* Borders */
    --ioe-border:        rgba(159, 176, 226, 0.18);
    --ioe-border-strong: rgba(159, 176, 226, 0.35);

    /* Interactive accent */
    --ioe-accent:       var(--ioe-periwinkle);
    --ioe-accent-hover: #8c9bc7;
    --ioe-focus-ring:   rgba(159, 176, 226, 0.5);

    /* Semantic/status */
    --ioe-danger:         var(--ioe-coral);
    --ioe-danger-text-on: var(--ioe-bg);
    --ioe-warning:        #e3b23c;
    --ioe-info:           var(--ioe-accent);
    --ioe-success:        var(--ioe-forest);
    --ioe-success-strong: #5f8758;
}

/* Reserved for the "safe zone" lore contrast (e.g. Helios) - apply to a
   container's root to re-theme everything beneath it via the cascade.
   Not yet applied anywhere; there's no zone/world template to hang it on. */
.zone-safe {
    --ioe-bg:          #24401f;
    --ioe-bg-elevated: #2f4d29;
    --ioe-heading:     var(--ioe-lavender);
    --ioe-accent:      var(--ioe-periwinkle);
}

body {
    color: var(--ioe-text);
    background-color: var(--ioe-bg);
    background-image: linear-gradient(rgba(18, 39, 44, 0.88), rgba(18, 39, 44, 0.94)),
                       url('/media/base/aurora_bi.jpg');
    background-size: cover;
    background-attachment: fixed;
    overflow: scroll;
}

.ban-image {
    background-image: linear-gradient(rgba(18, 39, 44, 0.55), rgba(18, 39, 44, 0.85)), url('/media/base/banner-logo.png');
    background-position: center;
    background-repeat: no-repeat;
    /*height: 200px;*/
}

#testboarder1 {
    background-image: url('/media/base/aurora_bi.jpg');
    background-size: cover;
    border-style: outset;
}

#testboarder2 {
    background-color: var(--ioe-bg-elevated);
    border-style: outset;
    border-color: var(--ioe-border);
}

/* Shared primitives - app stylesheets should prefer these over stacking
   Bootstrap utility classes (bg-dark text-light border-secondary, etc). */
.ioe-card {
    background-color: var(--ioe-bg-elevated);
    border-color: var(--ioe-border);
    color: var(--ioe-text);
}

.ioe-input {
    background-color: var(--ioe-bg-elevated);
    color: var(--ioe-text);
    border: 1px solid var(--ioe-border-strong);
}
.ioe-input:focus {
    background-color: var(--ioe-bg-elevated);
    color: var(--ioe-text);
    border-color: var(--ioe-accent);
    box-shadow: 0 0 0 0.25rem var(--ioe-focus-ring);
}
.ioe-input::placeholder {
    color: var(--ioe-text-muted);
}

/* Solid border */
hr.solid {
  border-top: 3px solid var(--ioe-border-strong);
}

/* Dashed border */
hr.dashed {
  border-top: 3px dashed var(--ioe-border-strong);
}

/* Dotted border */
hr.dotted {
  border-top: 3px dotted var(--ioe-border-strong);
}

/* Rounded border */
hr.rounded {
  border-top: 8px solid var(--ioe-border-strong);
  border-radius: 5px;
}

.login-card-wrap {
    max-width: 420px;
}

/* Django's built-in AuthenticationForm widgets carry no `form-control`
   class, so they're themed by attribute selector rather than by editing
   django.contrib.auth's view/form. */
#login-root input[type="text"],
#login-root input[type="password"] {
    display: block;
    width: 100%;
    background-color: var(--ioe-bg-elevated);
    color: var(--ioe-text);
    border: 1px solid var(--ioe-border-strong);
    border-radius: 0.375rem;
    padding: 0.375rem 0.75rem;
}
#login-root input[type="text"]:focus,
#login-root input[type="password"]:focus {
    outline: none;
    border-color: var(--ioe-accent);
    box-shadow: 0 0 0 0.25rem var(--ioe-focus-ring);
}

@media only screen and (max-width: 720px) {
  #toonData{ visibility: hidden; }
}