/* ============================================================
   Design iteration — Midnight Cyan
   2026-09-11 · the design the site opens in

   The terminal layout recoloured to the ML monogram: the logo's
   midnight navy (#0B1928) for the ground, and the blue-to-cyan
   run of its L (#00ACFD → #00F6FF) for the accent. Structure,
   type and the status bar are site.css, untouched.
   ============================================================ */

/* ---- Tokens ------------------------------------------------ */

[data-design="midnight"] {
    --bg: #0b1928;
    --panel: #0f1f31;
    --panel-2: #142639;
    --panel-3: #1a2e44;

    --line: #22364c;
    --line-2: #2f4760;

    --fg: #eef4fa;
    --fg-1: #a3b3c5;
    --fg-2: #6d819a;

    /* The middle of the L's gradient; 9.8:1 on the ground. */
    --accent: #00d1fe;
    --accent-solid: #00d1fe;
    --accent-ink: #0b1928;
    --accent-soft: rgb(0 209 254 / 10%);
    --accent-line: rgb(0 209 254 / 35%);

    color-scheme: dark;
}

/* The logo's cyan is unreadable as text on paper, so the light theme takes a
   deeper blue from the same hue for text (5.2:1) and keeps the bright cyan
   for solid fills, where navy ink sits on it. */
[data-design="midnight"][data-theme="light"] {
    --bg: #f3f6fa;
    --panel: #fff;
    --panel-2: #e8eef5;
    --panel-3: #dce5ef;

    --line: #d3dde8;
    --line-2: #b6c4d3;

    --fg: #0b1928;
    --fg-1: #46576c;
    --fg-2: #718299;

    --accent: #0069b8;
    --accent-solid: #00c2fe;
    --accent-ink: #0b1928;
    --accent-soft: rgb(0 105 184 / 8%);
    --accent-line: rgb(0 105 184 / 30%);

    --grid: rgb(11 25 40 / 5%);
    --hard: #0b1928;

    color-scheme: light;
}

/* ---- Terminal ---------------------------------------------- */

/* Stays dark in both themes, as it does in site.css — in this design's navy
   rather than the base's near-black. */
[data-design="midnight"] .term,
[data-design="midnight"] .code {
    --panel: #0f1f31;
    --panel-2: #142639;
    --line: #22364c;
    --line-2: #2f4760;
    --fg: #eef4fa;
    --fg-1: #a3b3c5;
    --fg-2: #6d819a;
    --accent: #00d1fe;
}

/* ---- Brand mark -------------------------------------------- */

/* The ML monogram in place of the blinking block — a logo does not blink. On
   paper the M turns navy and the L's gradient deepens, or it would vanish. */
[data-design="midnight"] .brand-mark {
    width: 1.4rem;
    height: 1rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44.75 32'%3E%3Cdefs%3E%3ClinearGradient id='ml' gradientUnits='userSpaceOnUse' x1='25.06' y1='32' x2='44' y2='21.13'%3E%3Cstop offset='0' stop-color='%2300acfd'/%3E%3Cstop offset='1' stop-color='%2300f6ff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='%23fff' d='M0 0L15.63 14.81L32.06 0L32.06 7.31L15.31 22.56L5.75 13.13L5.75 32L0 32Z'/%3E%3Cpath fill='url(%23ml)' d='M25.06 16.81L32.06 10.44L32.06 25.88L44.75 25.88L44.75 32L25.06 32Z'/%3E%3C/svg%3E") center / contain no-repeat;
    animation: none;
}

[data-design="midnight"][data-theme="light"] .brand-mark {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44.75 32'%3E%3Cdefs%3E%3ClinearGradient id='ml' gradientUnits='userSpaceOnUse' x1='25.06' y1='32' x2='44' y2='21.13'%3E%3Cstop offset='0' stop-color='%230069b8'/%3E%3Cstop offset='1' stop-color='%2300acfd'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='%230b1928' d='M0 0L15.63 14.81L32.06 0L32.06 7.31L15.31 22.56L5.75 13.13L5.75 32L0 32Z'/%3E%3Cpath fill='url(%23ml)' d='M25.06 16.81L32.06 10.44L32.06 25.88L44.75 25.88L44.75 32L25.06 32Z'/%3E%3C/svg%3E");
}