/* ============================================================ michaelscaffidi.com - one palette for every page ------------------------------------------------------------ Every colour on the site comes from a token defined here. Pages never write a raw hex value; they write var(--ink) or var(--surface). Change a value here and it changes everywhere, in both themes. The theme is stamped as data-theme="light" or "dark" on by assets/theme-boot.js before the page paints. The media query below is the no-JavaScript fallback. ============================================================ */ :root{ /* --- surfaces, from the page ground upward --- */ --bg:#f7f5f1; --surface:#ffffff; --surface-2:#f0ece5; --surface-3:#e7e2d9; /* --- text, most to least prominent --- */ --ink:#23201c; --ink-2:#5c564d; --ink-3:#8a8479; /* --- rules and borders --- */ --line:#e3ded5; --line-2:#ccc5b9; /* --- primary action --- */ --accent:#1d6b86; --accent-hover:#155468; --accent-fill:#1d6b86; --on-accent:#ffffff; --accent-soft:#e0edf2; /* --- achievement / index numbers --- */ --gold:#8a6714; --gold-fill:#d5a42c; --on-gold:#2c2100; --gold-soft:#f7efdb; /* --- success / mastered --- */ --green:#2c7550; --green-fill:#3f9469; --on-green:#ffffff; --green-soft:#e4f0e9; /* --- failure / destructive --- */ --danger:#b0403c; --danger-fill:#b0403c; --on-danger:#ffffff; --danger-soft:#fbe8e7; /* --- exam / special marker --- */ --purple:#5f45a4; --purple-soft:#ece7f8; /* --- the composition side: walnut ink and manuscript blue --- */ --warm:#7a5c3e; --warm-2:#b08a5a; --navy:#1f3864; /* --- notation demos --- */ --note:#7a5c3e; --note-2:#2e5496; --grid:#efe8db; --demo-bg:#fcfaf6; /* --- notation demo internals (used by the inline SVGs) --- */ --roll-nat:#ffffff; --roll-acc:#f4eee2; --roll-line:#efe8da; --roll-bar:#e0d8c8; --key-white:#ffffff; --key-white-line:#b9b0a0; --key-black:#2a2520; --key-black-line:#000000; --key-on-white:#a87f4c; --key-on-black:#7a5c3e; --on-key:#ffffff; --voice-1:#7a5c3e; --voice-2:#2e5496; --voice-3:#9a731a; --voice-4:#3e7a5c; --on-voice:#ffffff; /* --- warnings / constraint checker --- */ --scope-open:#7a5a12; --scope-glob:#3d6b4f; --scope-sect:#2f5d7a; --scope-evt:#7a3f5e; --warn-bg:#fff4e0; --warn-line:#e0b066; --warn-ink:#8a5a00; /* --- top bar --- */ --bar-bg:#ffffff; --bar-ink:#23201c; --bar-muted:#6f6a61; --bar-line:#e3ded5; --bar-hover:#f0ece5; /* --- shape and depth --- */ --radius:14px; --radius-sm:9px; --shadow:0 1px 2px rgba(35,32,28,.05), 0 6px 24px rgba(35,32,28,.06); --shadow-lg:0 4px 8px rgba(35,32,28,.06), 0 16px 44px rgba(35,32,28,.09); /* --- type --- */ --font-ui:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',sans-serif; --font-display:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif; --font-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace; } :root[data-theme="dark"]{ --bg:#16181b; --surface:#1d2126; --surface-2:#252a30; --surface-3:#2e343b; --ink:#e9ebee; --ink-2:#a8adb4; --ink-3:#7d838a; --line:#2c3138; --line-2:#3b424a; --accent:#4cc9f0; --accent-hover:#7ad8f5; --accent-fill:#4cc9f0; --on-accent:#06222e; --accent-soft:#15303a; --gold:#ffd166; --gold-fill:#ffd166; --on-gold:#3a2e00; --gold-soft:#332a12; --green:#5dd39e; --green-fill:#5dd39e; --on-green:#0b2e1f; --green-soft:#163025; --danger:#ef6f6c; --danger-fill:#ef6f6c; --on-danger:#3a1210; --danger-soft:#33201f; --purple:#b197fc; --purple-soft:#241738; --warm:#cba274; --warm-2:#a4834f; --navy:#a9c2e8; --note:#cba274; --note-2:#8fb4e8; --grid:#2a2f35; --demo-bg:#1a1e23; --roll-nat:#242a31; --roll-acc:#1c2027; --roll-line:#2b3139; --roll-bar:#3a424b; --key-white:#cfd4da; --key-white-line:#697079; --key-black:#14171b; --key-black-line:#080a0d; --key-on-white:#c79a63; --key-on-black:#8a6743; --on-key:#12161a; --voice-1:#cba274; --voice-2:#84acdf; --voice-3:#e0ba62; --voice-4:#71c193; --on-voice:#14171b; --scope-open:#e8c377; --scope-glob:#8fd0a8; --scope-sect:#8ec4e6; --scope-evt:#e6a0c4; --warn-bg:#33291a; --warn-line:#6b5427; --warn-ink:#f0cf94; --bar-bg:#1a1d21; --bar-ink:#e9ebee; --bar-muted:#98a0a8; --bar-line:#2b3037; --bar-hover:#252a30; --shadow:0 1px 2px rgba(0,0,0,.40), 0 8px 28px rgba(0,0,0,.34); --shadow-lg:0 4px 10px rgba(0,0,0,.45), 0 18px 46px rgba(0,0,0,.45); } /* No-JavaScript fallback: follow the operating system unless the page has been explicitly stamped light. */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#16181b; --surface:#1d2126; --surface-2:#252a30; --surface-3:#2e343b; --ink:#e9ebee; --ink-2:#a8adb4; --ink-3:#7d838a; --line:#2c3138; --line-2:#3b424a; --accent:#4cc9f0; --accent-hover:#7ad8f5; --accent-fill:#4cc9f0; --on-accent:#06222e; --accent-soft:#15303a; --gold:#ffd166; --gold-fill:#ffd166; --on-gold:#3a2e00; --gold-soft:#332a12; --green:#5dd39e; --green-fill:#5dd39e; --on-green:#0b2e1f; --green-soft:#163025; --danger:#ef6f6c; --danger-fill:#ef6f6c; --on-danger:#3a1210; --danger-soft:#33201f; --purple:#b197fc; --purple-soft:#241738; --warm:#cba274; --warm-2:#a4834f; --navy:#a9c2e8; --note:#cba274; --note-2:#8fb4e8; --grid:#2a2f35; --demo-bg:#1a1e23; --roll-nat:#242a31; --roll-acc:#1c2027; --roll-line:#2b3139; --roll-bar:#3a424b; --key-white:#cfd4da; --key-white-line:#697079; --key-black:#14171b; --key-black-line:#080a0d; --key-on-white:#c79a63; --key-on-black:#8a6743; --on-key:#12161a; --voice-1:#cba274; --voice-2:#84acdf; --voice-3:#e0ba62; --voice-4:#71c193; --on-voice:#14171b; --scope-open:#e8c377; --scope-glob:#8fd0a8; --scope-sect:#8ec4e6; --scope-evt:#e6a0c4; --warn-bg:#33291a; --warn-line:#6b5427; --warn-ink:#f0cf94; --bar-bg:#1a1d21; --bar-ink:#e9ebee; --bar-muted:#98a0a8; --bar-line:#2b3037; --bar-hover:#252a30; --shadow:0 1px 2px rgba(0,0,0,.40), 0 8px 28px rgba(0,0,0,.34); --shadow-lg:0 4px 10px rgba(0,0,0,.45), 0 18px 46px rgba(0,0,0,.45); } } /* ============================================================ Shared base. Anything every page agrees on lives here. ============================================================ */ *{box-sizing:border-box} html{color-scheme:light} :root[data-theme="dark"]{color-scheme:dark} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){color-scheme:dark} } body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-ui); line-height:1.55; -webkit-font-smoothing:antialiased; } h1,h2,h3,.display{font-family:var(--font-display)} a{color:var(--accent)} ::selection{background:var(--accent-soft); color:var(--ink)} :focus-visible{outline:2px solid var(--accent); outline-offset:2px}