


:root {
  --paper: #F4EFE4;
  --paper-lift: #FBF8F1;     
  --ink: #1B3A40;
  --ink-soft: #516769;       
  --ink-45: #929E9A;         
  --ink-30: #B3B9B3;         
  --ink-18: #CDCEC6;         
  --ink-hover: #2E4C52;
  --ink-shadow: rgba(27, 58, 64, .35);
  --marker: #E4532A;         
  --marker-deep: #C4441F;
  --marker-light: #EC7552;   
  --marker-tint: #F0C3B0;    
  --marker-wash: #F3CDBB;    
  --lit-shade-1: #D24B24; --lit-shade-2: #DD5027;
  --lit-mid: #7A2810; --lit-lo: #9C3517; --lit-faint: #B8401C;
  --room: #2D6B66;           
  --on-room: #F4EFE4;
  --rule-on-h: #A4BAB2;
  --rule-on-h-soft: #6E978F;
  --on-ink-soft: #BEC2BB;    
  --rule-on-ink: #7C8D8E;
  --rule-on-ink-soft: #4E6669;
  --plate-paper: #FAF7F0; --plate-top: #FFFCF6;
  --plate-shade-0: #DED9CF; --plate-shade-1: #E5E1D6; --plate-shade-2: #EDE8DD;
  --plate-halo: #7F7A6B;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .2 0 0 0 0 .22 0 0 0 .22 -.07'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}



html[data-paper="warm"] {
  --paper: #F5EBDB; --paper-lift: #FCF6EC; --plate-paper: #FBF5EB; --plate-top: #FFFBF6;
  --plate-shade-0: #DFD6C7; --plate-shade-1: #E6DDCE; --plate-shade-2: #EEE4D4; --plate-halo: #817660;
  --on-room: #F5EBDB; --ink-soft: #526667; --ink-45: #939B95; --ink-30: #B4B6AC;
  --ink-18: #CECBBF; --on-ink-soft: #BEBFB4; --rule-on-ink: #7C8C8A; --rule-on-ink-soft: #4E6567;
  --rule-on-h: #A5B8AC; --rule-on-h-soft: #6E958C;
}


html[data-paper="light"] {
  --paper: #F6F4ED; --paper-lift: #FBFAF6; --plate-paper: #FBFAF5; --plate-top: #FEFDF9;
  --plate-shade-0: #E0DED8; --plate-shade-1: #E7E5DF; --plate-shade-2: #EFEDE6; --plate-halo: #807E75;
  --on-room: #F6F4ED; --ink-soft: #52686B; --ink-45: #93A09F; --ink-30: #B4BCB9;
  --ink-18: #CFD3CE; --on-ink-soft: #BFC6C2; --rule-on-ink: #7D9092; --rule-on-ink-soft: #4F686C;
  --rule-on-h: #A6BDB7; --rule-on-h-soft: #6E9892;
}


html[data-ink="dark"] {
  --ink: #122F35; --ink-hover: #254047; --ink-soft: #4A5F61; --ink-45: #8E9995;
  --ink-30: #B0B5B0; --ink-18: #CBCCC4; --on-ink-soft: #BCBFB8; --rule-on-ink: #778788;
  --rule-on-ink-soft: #475E61;
  --ink-shadow: rgba(18, 47, 53, .35);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .065 0 0 0 0 .157 0 0 0 0 .177 0 0 0 .22 -.07'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}


html[data-ink="soft"] {
  --ink: #273B3D; --ink-hover: #394D4F; --ink-soft: #5A6867; --ink-45: #989E99;
  --ink-30: #B6B9B2; --ink-18: #CFCFC6; --on-ink-soft: #C1C2BA; --rule-on-ink: #828E8C;
  --rule-on-ink-soft: #576767;
  --ink-shadow: rgba(39, 59, 61, .35);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .147 0 0 0 0 .204 0 0 0 0 .208 0 0 0 .22 -.07'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}


html[data-marker="deep"] {
  --marker: #E44C36; --marker-deep: #C43D2A; --marker-light: #EC7058; --marker-tint: #F2C2B2;
  --marker-wash: #F5CCBD; --lit-shade-1: #D2442F; --lit-shade-2: #DD4933; --lit-mid: #792316;
  --lit-lo: #9B2F1F; --lit-faint: #B83A26;
}


html[data-marker="bright"] {
  --marker: #E75914; --marker-deep: #C74A08; --marker-light: #EF7A4A; --marker-tint: #EFC4AD;
  --marker-wash: #F2CEB9; --lit-shade-1: #D5510E; --lit-shade-2: #E05610; --lit-mid: #7D2D05;
  --lit-lo: #9F3A07; --lit-faint: #BB4607;
}


html[data-room="deep"] {
  --room: #1F5C59; --rule-on-h: #9FB4AC; --rule-on-h-soft: #648D86;
}


html[data-room="light"] {
  --room: #37746D; --rule-on-h: #A8BEB4; --rule-on-h-soft: #749D93;
}



html[data-ink="dark"][data-paper="warm"] {
  --ink-soft: #4B5E5E; --ink-45: #8F9690; --ink-30: #B1B3A9; --ink-18: #CCC9BD;
  --on-ink-soft: #BCBCB2; --rule-on-ink: #778684; --rule-on-ink-soft: #475D5F;
}

html[data-ink="dark"][data-paper="light"] {
  --ink-soft: #4B6063; --ink-45: #8F9B9A; --ink-30: #B2B9B6; --ink-18: #CDD1CC;
  --on-ink-soft: #BDC3BF; --rule-on-ink: #788A8C; --rule-on-ink-soft: #485F63;
}

html[data-ink="soft"][data-paper="warm"] {
  --ink-soft: #5A6764; --ink-45: #989C94; --ink-30: #B7B6AC; --ink-18: #D0CBBF;
  --on-ink-soft: #C2BFB4; --rule-on-ink: #838C88; --rule-on-ink-soft: #576665;
}

html[data-ink="soft"][data-paper="light"] {
  --ink-soft: #5B6969; --ink-45: #99A19E; --ink-30: #B8BCB8; --ink-18: #D1D3CD;
  --on-ink-soft: #C2C6C1; --rule-on-ink: #839090; --rule-on-ink-soft: #586869;
}

html[data-room="deep"][data-paper="warm"] {
  --rule-on-h: #9FB2A7; --rule-on-h-soft: #658B83;
}

html[data-room="deep"][data-paper="light"] {
  --rule-on-h: #A0B7B2; --rule-on-h-soft: #658E89;
}

html[data-room="light"][data-paper="warm"] {
  --rule-on-h: #A9BBAF; --rule-on-h-soft: #759B90;
}

html[data-room="light"][data-paper="light"] {
  --rule-on-h: #AAC1BA; --rule-on-h-soft: #759E96;
}


:root { --harbor: var(--room); color-scheme: light; }


html[data-font="bricolage"] { --font: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif; }

html[data-font="overpass"] { --font: "Overpass", ui-sans-serif, system-ui, sans-serif; }

:root,
html[data-font="schibsted"] { --font: "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif; }   


html .iso[data-theme="light"] {
  --anatomy-page: var(--paper); --anatomy-card: var(--paper); --anatomy-text: var(--ink-soft); --anatomy-strong: var(--ink); --anatomy-muted: var(--ink-soft);
  --anatomy-paper: var(--plate-paper); --anatomy-face: var(--plate-paper); --anatomy-top: var(--plate-top);
  --anatomy-shade-0: var(--plate-shade-0); --anatomy-shade-1: var(--plate-shade-1); --anatomy-shade-2: var(--plate-shade-2); --anatomy-shade-3: var(--paper);
  --anatomy-lit-top: var(--plate-top); --anatomy-lit-shade: var(--plate-shade-2);
  --anatomy-hi: var(--ink); --anatomy-mid: var(--ink-45); --anatomy-lo: var(--ink-30); --anatomy-faint: var(--ink-18); --anatomy-lit: var(--ink);
  --anatomy-halo: var(--plate-halo); --anatomy-halo-opacity: .28; --anatomy-dot: var(--ink);
}

html .iso .is-lit {
  --anatomy-paper: var(--marker); --anatomy-face: var(--marker-light); --anatomy-top: var(--marker-light);
  --anatomy-shade-0: var(--marker-deep); --anatomy-shade-1: var(--lit-shade-1); --anatomy-shade-2: var(--lit-shade-2); --anatomy-shade-3: var(--marker);
  --anatomy-lit-top: var(--marker-light); --anatomy-lit-shade: var(--lit-shade-2);
  --anatomy-hi: var(--ink); --anatomy-mid: var(--lit-mid); --anatomy-lo: var(--lit-lo); --anatomy-faint: var(--lit-faint); --anatomy-dot: var(--ink);
}
