/*
 * Cyanotype: an engineering drawing. Light mode is a whiteprint (cream paper,
 * indigo ink); dark mode is a blueprint (Prussian blue paper, white ink).
 * Martian Mono for labels and headings over IBM Plex Sans Condensed; square
 * corners, hairline rules, a drafting grid and a zone-tick strip on the
 * navbar. Red "redline" marks focus and negatives. Fonts are loaded by
 * themes/theme-boot.js from the registry entry.
 *
 * Token values first (whiteprint, then blueprint), then decoration.
 */

html[data-fw-theme="cyanotype"] {
    --fw-bg: #f3f0e6;
    --fw-surface: #f8f6ef;
    --fw-surface-2: #e8e4d5;
    --fw-text: #24318a;
    --fw-muted: #4b5590;
    --fw-border: #aab0d3;
    --fw-border-strong: #24318a;
    --fw-border-width: 1px;
    --fw-accent: #24318a;
    --fw-on-accent: #f8f6ef;
    --fw-accent-2: #c0392b;
    --fw-on-accent-2: #ffffff;
    --fw-link: #24318a;
    --fw-link-hover: #c0392b;
    --fw-focus: rgba(192, 57, 43, 0.35);
    --fw-positive: #2e6b47;
    --fw-negative: #c0392b;
    --fw-warning: #e0b64a;
    --fw-info: #2f5ea8;
    --fw-on-status: #ffffff;
    --fw-on-warning: #1b2466;
    --fw-nav-bg: #f8f6ef;
    --fw-nav-text: #24318a;
    --fw-footer-bg: #24318a;
    --fw-footer-text: #e9ecf7;
    --fw-input-bg: #fbfaf5;
    --fw-code-bg: #e8e4d5;
    --fw-row-stripe: rgba(36, 49, 138, 0.04);
    --fw-row-hover: rgba(36, 49, 138, 0.08);
    --fw-radius-sm: 0px;
    --fw-radius-md: 0px;
    --fw-radius-lg: 2px;
    --fw-radius-pill: 0px;
    --fw-font-body: "IBM Plex Sans Condensed", "Arial Narrow", sans-serif;
    --fw-font-display: "Martian Mono", Menlo, Consolas, monospace;
    --fw-font-mono: "Martian Mono", Menlo, Consolas, monospace;
    --fw-sec-high: #b9dcc2;
    --fw-sec-low: #f0c98a;
    --fw-sec-null: #eba79c;
    --fw-on-sec: #1b2466;
    --fw-status-good: #b9dcc2;
    --fw-status-ok: #efdc8a;
    --fw-status-bad: #eba79c;
    --fw-status-hover: #d9dcef;
    --fw-on-status-cell: #1b2466;
    --fw-group-row: #dfe2f0;
    --fw-shadow-raised: 2px 2px 0 #24318a;
    --cy-grid: rgba(36, 49, 138, 0.07);
}

html[data-fw-theme="cyanotype"][data-theme="dark"] {
    --fw-bg: #1c4384;
    --fw-surface: #1f4a8f;
    --fw-surface-2: #285496;
    --fw-text: #f4f7fc;
    --fw-muted: #c6d3ea;
    --fw-border: #5277b2;
    --fw-border-strong: #f4f7fc;
    --fw-accent: #f4f7fc;
    --fw-on-accent: #1c4384;
    --fw-accent-2: #ff9c87;
    --fw-on-accent-2: #1c4384;
    --fw-link: #ffffff;
    --fw-link-hover: #ff9c87;
    --fw-focus: rgba(255, 156, 135, 0.45);
    --fw-positive: #8fe0a8;
    --fw-negative: #ff9c87;
    --fw-warning: #ffd77a;
    --fw-info: #a9c8ff;
    --fw-on-status: #1c4384;
    --fw-on-warning: #1c4384;
    --fw-nav-bg: #1c4384;
    --fw-nav-text: #f4f7fc;
    --fw-footer-bg: #163668;
    --fw-footer-text: #c6d3ea;
    --fw-input-bg: #173c78;
    --fw-code-bg: #173c78;
    --fw-row-stripe: rgba(255, 255, 255, 0.04);
    --fw-row-hover: rgba(255, 255, 255, 0.09);
    --fw-sec-high: #2f7a55;
    --fw-sec-low: #8a6a2a;
    --fw-sec-null: #9a4040;
    --fw-on-sec: #f4f7fc;
    --fw-status-good: #2f7a55;
    --fw-status-ok: #857428;
    --fw-status-bad: #9a4040;
    --fw-status-hover: #3a5f9e;
    --fw-on-status-cell: #f4f7fc;
    --fw-group-row: #285496;
    --fw-shadow-raised: 2px 2px 0 #0f2a55;
    --cy-grid: rgba(244, 247, 252, 0.07);
}

/* ---- Decoration ---- */

/* Drafting paper */
html[data-fw-theme="cyanotype"] body {
    background-image:
        linear-gradient(var(--cy-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--cy-grid) 1px, transparent 1px);
    background-size: 24px 24px;
    font-size: 15px;
}

/* Lettering: mono display, tight tracking */
html[data-fw-theme="cyanotype"] h1,
html[data-fw-theme="cyanotype"] h2,
html[data-fw-theme="cyanotype"] h3 {
    font-weight: 700;
    letter-spacing: -0.5px;
}
html[data-fw-theme="cyanotype"] h4,
html[data-fw-theme="cyanotype"] h5,
html[data-fw-theme="cyanotype"] h6 { font-family: var(--fw-font-display); font-weight: 600; }

/* Content links: underlined, since in blueprint mode links and text share a colour */
html[data-fw-theme="cyanotype"] #wrap > .container a:not(.btn):not(.list-group-item),
html[data-fw-theme="cyanotype"] .fw-grid a {
    text-decoration: underline;
    text-underline-offset: 2px;
}
/* ...but not headings or accordion titles (same :not()s so this out-specifies the rule above) */
html[data-fw-theme="cyanotype"] #wrap > .container :is(h1, h2, h3, .panel-title) a:not(.btn):not(.list-group-item),
html[data-fw-theme="cyanotype"] #wrap > .container a.accordion-toggle:not(.btn):not(.list-group-item) { text-decoration: none; }

/* Navbar: a boxed title strip with zone ticks along the top edge */
/* Zone ticks are a background (Bootstrap's clearfix owns .navbar::before):
   eight tick marks in a 7px strip, with a hairline under the strip. */
html[data-fw-theme="cyanotype"] #topnavbar {
    border: 0;
    border-bottom: 2px solid var(--fw-border-strong);
    margin-bottom: 24px;
    padding-top: 8px;
    background-image:
        repeating-linear-gradient(90deg, var(--fw-border-strong) 0 1px, transparent 1px 12.5%),
        linear-gradient(var(--fw-border), var(--fw-border));
    background-size: 100% 7px, 100% 1px;
    background-position: 0 0, 0 7px;
    background-repeat: no-repeat;
}
html[data-fw-theme="cyanotype"] #topnavbar .navbar-brand {
    font-family: var(--fw-font-display);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
html[data-fw-theme="cyanotype"] #topnavbar .navbar-nav > li > a {
    font-family: var(--fw-font-display);
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-left: 1px solid var(--fw-border);
}
@media (max-width: 767px) {
    html[data-fw-theme="cyanotype"] #topnavbar .navbar-nav > li > a { border-left: 0; }
}

/* Panels: hairline boxes with title-block headings */
html[data-fw-theme="cyanotype"] .panel { box-shadow: none; }
html[data-fw-theme="cyanotype"] .panel > .panel-heading {
    background-color: transparent;
    border-bottom: 1px solid var(--fw-border-strong);
}
html[data-fw-theme="cyanotype"] .panel-title,
html[data-fw-theme="cyanotype"] .panel > .panel-heading {
    font-family: var(--fw-font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}
html[data-fw-theme="cyanotype"] .panel-primary > .panel-heading { background-color: var(--fw-accent); color: var(--fw-on-accent); }

/* Controls: square, mono labels, ink-inverting hover */
html[data-fw-theme="cyanotype"] .btn,
html[data-fw-theme="cyanotype"] :where(button:not(.navbar-toggle, .close)),
html[data-fw-theme="cyanotype"] :where(input[type="button"], input[type="submit"], input[type="reset"]) {
    font-family: var(--fw-font-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
html[data-fw-theme="cyanotype"] .btn-default:hover,
html[data-fw-theme="cyanotype"] .btn-default:focus {
    background-color: var(--fw-text);
    border-color: var(--fw-text);
    color: var(--fw-bg);
}
html[data-fw-theme="cyanotype"] .form-control:focus,
html[data-fw-theme="cyanotype"] input:focus,
html[data-fw-theme="cyanotype"] select:focus,
html[data-fw-theme="cyanotype"] textarea:focus { border-color: var(--fw-accent-2); }

/* Tables: mono column heads, ink rule under the head */
html[data-fw-theme="cyanotype"] .table > thead > tr > th,
html[data-fw-theme="cyanotype"] table.dataTable thead th,
html[data-fw-theme="cyanotype"] .fw-grid thead th {
    font-family: var(--fw-font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
html[data-fw-theme="cyanotype"] .fw-grid .fw-group-row {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Footer: double rule, like a drawing border */
html[data-fw-theme="cyanotype"] #footer {
    border-top: 4px double var(--fw-border-strong);
}
html[data-fw-theme="cyanotype"][data-theme="dark"] #footer { border-top-color: var(--fw-border); }

/* Labels and badges stay square */
html[data-fw-theme="cyanotype"] .label,
html[data-fw-theme="cyanotype"] .badge { border-radius: 0; font-family: var(--fw-font-display); font-weight: 600; }