/* GENERATED by web/theme-to-css.py from code/nix/theme.nix — do not edit.
 *
 * The desktop in the screenshots and the page around them read the same
 * attrset. Change a colour there and it changes here on the next build; there
 * is no second copy to forget.
 *
 * Dark is the root palette because aphrOS is a dark system first — "under the
 * water", in theme.nix's own words. Light ("the foam itself") arrives through
 * the viewer's preference, and the toggle overrides either way.
 */

:root {
  --base: #1b2430;
  --mantle: #161d27;
  --crust: #111720;
  --surface0: #23303f;
  --surface1: #31414f;
  --surface2: #425463;
  --text: #eef2f5;
  --subtext: #b7c4cf;
  --muted: #7e8fa0;
  --rose: #e8a0a8;
  --coral: #f0a58f;
  --gold: #e3c08d;
  --myrtle: #8fc7a6;
  --aegean: #7fb3c8;
  --iris: #b9a3d4;
  --alert: #e0798c;
  --accent: #e8a0a8;
  --accent-alt: #f0a58f;
  --ok: #8fc7a6;
  --warn: #e3c08d;
  --err: #e0798c;
  --info: #7fb3c8;

  --radius: 10px;
  --gap-inner: 5px;
  --gap-outer: 10px;
  --gap-float: 12px;
  --border-width: 2px;
  --shell-max: 1180px;
}

/* A viewer whose OS asks for light gets the foam — unless they have chosen
   dark on this site, in which case that choice wins. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --base: #f4efe9;
    --mantle: #ece5dd;
    --crust: #e2d9cf;
    --surface0: #e9e1d8;
    --surface1: #dbd1c6;
    --surface2: #c2b6a8;
    --text: #222c38;
    --subtext: #4c5a69;
    --muted: #7b8694;
    --rose: #b0596a;
    --coral: #b8654e;
    --gold: #8d6a2c;
    --myrtle: #3f7a58;
    --aegean: #356f8c;
    --iris: #6f549b;
    --alert: #a8415a;
    --accent: #b0596a;
    --accent-alt: #b8654e;
    --ok: #3f7a58;
    --warn: #8d6a2c;
    --err: #a8415a;
    --info: #356f8c;
  }
}

/* And the toggle wins in both directions. */
:root[data-theme="light"] {
  --base: #f4efe9;
  --mantle: #ece5dd;
  --crust: #e2d9cf;
  --surface0: #e9e1d8;
  --surface1: #dbd1c6;
  --surface2: #c2b6a8;
  --text: #222c38;
  --subtext: #4c5a69;
  --muted: #7b8694;
  --rose: #b0596a;
  --coral: #b8654e;
  --gold: #8d6a2c;
  --myrtle: #3f7a58;
  --aegean: #356f8c;
  --iris: #6f549b;
  --alert: #a8415a;
  --accent: #b0596a;
  --accent-alt: #b8654e;
  --ok: #3f7a58;
  --warn: #8d6a2c;
  --err: #a8415a;
  --info: #356f8c;
}

:root[data-theme="dark"] {
  --base: #1b2430;
  --mantle: #161d27;
  --crust: #111720;
  --surface0: #23303f;
  --surface1: #31414f;
  --surface2: #425463;
  --text: #eef2f5;
  --subtext: #b7c4cf;
  --muted: #7e8fa0;
  --rose: #e8a0a8;
  --coral: #f0a58f;
  --gold: #e3c08d;
  --myrtle: #8fc7a6;
  --aegean: #7fb3c8;
  --iris: #b9a3d4;
  --alert: #e0798c;
  --accent: #e8a0a8;
  --accent-alt: #f0a58f;
  --ok: #8fc7a6;
  --warn: #e3c08d;
  --err: #e0798c;
  --info: #7fb3c8;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{margin:0;background:var(--base);color:var(--text);
font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
code,kbd,pre{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"DejaVu Sans Mono",monospace}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
:focus-visible{outline:var(--border-width) solid var(--accent);outline-offset:3px}

.bar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:1.2rem;
padding:.85rem max(1.4rem,calc((100vw - 1180px)/2));
background:var(--crust);border-bottom:1px solid var(--surface0)}
.bar .home{color:var(--text);font-weight:600}
.bar .home:hover{color:var(--accent);text-decoration:none}
.bar nav{margin-left:auto;display:flex;gap:1.2rem;flex-wrap:wrap}
.bar nav a{color:var(--subtext);font-size:.92rem}
.bar nav a:hover{color:var(--text);text-decoration:none}

.wrap{max-width:1180px;margin:0 auto;padding:0 1.4rem;
display:grid;grid-template-columns:210px minmax(0,1fr);gap:3.2rem}
aside{position:sticky;top:5rem;align-self:start;padding:2.6rem 0;
max-height:calc(100vh - 5rem);overflow:auto}
aside h2{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--muted);margin:0 0 .7rem}
aside ul{list-style:none;margin:0 0 1.8rem;padding:0}
aside li{margin:0 0 .25rem}
aside a{color:var(--subtext);font-size:.92rem}
aside a.on{color:var(--accent);font-weight:600}
aside .sub a{color:var(--muted);font-size:.87rem}

main{padding:2.6rem 0 4rem;min-width:0}
main h1{font-size:clamp(1.8rem,4vw,2.5rem);line-height:1.1;letter-spacing:-.02em;
margin:0 0 1.2rem;text-wrap:balance}
main h2{font-size:1.35rem;margin:2.8rem 0 .8rem;letter-spacing:-.01em;text-wrap:balance;
padding-top:1.4rem;border-top:1px solid var(--surface0)}
main h3{font-size:1.05rem;margin:1.8rem 0 .5rem}
main p{margin:0 0 1rem;max-width:42rem}
main ul,main ol{max-width:42rem;padding-left:1.2rem}
main li{margin-bottom:.45rem}
strong{color:var(--text)}
p,li{color:var(--subtext)}

code{font-size:.87em;color:var(--info);background:var(--mantle);
padding:.1em .35em;border-radius:4px}
pre{background:var(--mantle);border:1px solid var(--surface0);border-radius:var(--radius);
padding:1rem 1.1rem;overflow-x:auto;font-size:.85rem;line-height:1.6}
pre code{background:none;padding:0;color:var(--subtext)}

.diagram{margin:1.4rem 0;max-width:42rem}
.diagram figcaption{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--muted);margin-bottom:.4rem}

blockquote{margin:1.4rem 0;padding:.2rem 0 .2rem 1.1rem;
border-left:var(--border-width) solid var(--surface2);color:var(--muted)}

.scroll{overflow-x:auto;margin:0 0 1.4rem;max-width:100%}
table{border-collapse:collapse;font-size:.94rem;min-width:min(100%,28rem)}
th,td{text-align:left;padding:.5rem .9rem .5rem 0;border-bottom:1px solid var(--surface0);
vertical-align:top}
th{color:var(--muted);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
td{color:var(--subtext)}

hr{border:0;border-top:1px solid var(--surface0);margin:2rem 0}

.cards{list-style:none;padding:0;margin:1.8rem 0 0;display:grid;
grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem}
.cards a{display:block;padding:1.1rem 1.2rem;background:var(--mantle);
border:1px solid var(--surface0);border-radius:var(--radius);color:var(--text)}
.cards a:hover{border-color:var(--accent);text-decoration:none}
.cards b{display:block;margin-bottom:.3rem}
.cards span{color:var(--muted);font-size:.9rem;line-height:1.5}

footer{margin-top:3.5rem;padding-top:1.4rem;border-top:1px solid var(--surface0);
color:var(--muted);font-size:.88rem}

@media(max-width:860px){
.wrap{grid-template-columns:1fr;gap:0}
aside{position:static;padding:1.6rem 0 0;max-height:none}
.bar nav{display:none}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}