/* Bible Loom look: every colour, font, corner size and motion lives in this one file.
   Four styles; Space, Bloom and Silo match Sabo OS (frontend/src/home/themes/ascii.ts, bloom.ts and silo.ts):
   - Space: Sabo OS's ASCII Art look with the Starfield background; one quiet face, lowercase labels, thin
     hairline frames, ink on a dark page under drifting stars (no coding marks: no brackets, "#" or block cursors).
   - Bloom: five seasons of soft colour, rounded panels.
   - Silo: the gold-lit archive tablet from Silo S2; near-square edges, gold hairlines, mono caps labels.
   - Papyrus (default): an ancient manuscript; reed-fibre sheet, carbon ink, red-ochre rubrics, Garamond headings, inscription capitals.
   <html data-style="space|bloom|silo|papyrus" data-mode="light|dark"> picks the look (set in Settings); colours come from js/look.js.
   Silo's, Papyrus's and Space's extra shape rules are at the end of style.css. */

/* Paper Mono: Sabo OS's ASCII Art face (OFL, fonts/paper-mono-OFL.txt) */
@font-face { font-family: "Paper Mono"; src: url("fonts/paper-mono.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }

@font-face { font-family: "Nunito"; src: url("fonts/nunito-latin-wght-normal.woff2") format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("fonts/nunito-latin-wght-italic.woff2") format("woff2"); font-weight: 200 1000; font-style: italic; font-display: swap; }
@font-face { font-family: "Literata"; src: url("fonts/literata-latin-wght-normal.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Literata"; src: url("fonts/literata-latin-wght-italic.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("fonts/ibm-plex-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 100 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-garamond-latin-wght-normal.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Cinzel"; src: url("fonts/cinzel-latin-wght-normal.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
/* reading serifs */
@font-face { font-family: "EB Garamond"; src: url("fonts/eb-garamond-latin-wght-normal.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("fonts/eb-garamond-latin-wght-italic.woff2") format("woff2"); font-weight: 400 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("fonts/source-serif-4-latin-wght-normal.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("fonts/source-serif-4-latin-wght-italic.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Lora"; src: url("fonts/lora-latin-wght-normal.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Lora"; src: url("fonts/lora-latin-wght-italic.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Serif"; src: url("fonts/ibm-plex-serif-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Serif"; src: url("fonts/ibm-plex-serif-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Serif"; src: url("fonts/ibm-plex-serif-latin-600-normal.woff2") format("woff2"); font-weight: 500 700; font-style: normal; font-display: swap; }

:root {
  /* shape */
  --r-card: 22px;
  --r-item: 14px;
  --r-pill: 8px;    /* pills, chips, buttons: semi-rounded, never fully round */
  --r-tag: 5px;     /* small tags and badges */
  /* type */
  --font-ui: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-label: var(--font-ui);   /* small labels; Silo makes these mono, Papyrus inscription capitals */
  --font-display: var(--font-ui); /* headings; Papyrus uses a Garamond */
  --font-hebrew: "SBL Hebrew", "Ezra SIL", "Times New Roman", serif;
  --font-greek: "Gentium Plus", "Times New Roman", serif;
  --weight-heading: 800;
  --track-heading: -0.01em;
  /* motion */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --t-screen: .5s;
  --t-pop: .22s;
  --lift: 8px;
  --t-1: .1s;       /* press feedback */
  --t-2: .18s;      /* colour changes */
  --t-page: .27s;   /* a page coming in (Sabo OS motion tokens) */
  --ease-in: cubic-bezier(.05, .7, .1, 1);
  --particle: var(--accent);   /* Bloom's seasons set their own */
  /* cards and lists in the hub: as see-through as the hub itself (Settings > Transparency) */
  --panel: color-mix(in srgb, var(--surface) var(--pane, 100%), transparent);
}

/* reading font choices (set in Settings). "style" is each style's own reading face (--font-own, set per style below):
   Bloom Nunito (as Sabo OS Bloom), Silo IBM Plex Serif (one family with its Plex Sans and Mono), Papyrus EB Garamond (the
   face of many printed Bibles), Space Lora (its interface stays Paper Mono, which is also a reading choice). EB Garamond's small x-height is evened out with font-size-adjust so text size stays true. */
:root {
  --font-own: "Nunito", system-ui, sans-serif;
  --f-style: var(--font-own); --f-nunito: "Nunito", sans-serif; --f-literata: "Literata", serif; --f-source: "Source Serif 4", serif;
  --f-lora: "Lora", serif; --f-garamond: "EB Garamond", serif; --f-plex: "IBM Plex Serif", serif;
  --f-atkinson: "Atkinson Hyperlegible Next", sans-serif; --f-mono: "Paper Mono", monospace; --f-system: system-ui, sans-serif;
  --read-adjust: none;
}
[data-font="style"]    { --font-read: var(--font-own); }
[data-font="nunito"]   { --font-read: "Nunito", system-ui, sans-serif; }
[data-font="literata"] { --font-read: "Literata", Georgia, serif; }
[data-font="source"]   { --font-read: "Source Serif 4", Georgia, serif; }
[data-font="lora"]     { --font-read: "Lora", Georgia, serif; }
[data-font="garamond"] { --font-read: "EB Garamond", Garamond, Georgia, serif; --read-adjust: ex-height .45; }
[data-font="plex"]     { --font-read: "IBM Plex Serif", Georgia, serif; }
[data-font="atkinson"] { --font-read: "Atkinson Hyperlegible Next", system-ui, sans-serif; }
[data-font="mono"]     { --font-read: "Paper Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; }
[data-font="system"]   { --font-read: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
[data-style="silo"]    { --font-own: "IBM Plex Serif", Georgia, serif; }
[data-style="papyrus"] { --font-own: "EB Garamond", Garamond, Georgia, serif; }
[data-style="space"]   { --font-own: "Lora", Georgia, serif; }
[data-style="papyrus"][data-font="style"] { --read-adjust: ex-height .45; }

/* ---------- colours ----------
   Set by js/look.js colours(): each style's base palette (Bloom = Sabo OS Bloom spring, Silo = Sabo OS Silo archive),
   turned round the colour wheel by Settings > Hue. These are the starting values before the script runs. */
:root { --bg:#eee7d6; --surface:#f8f4ea; --surface2:#e7dfcb; --text:#29231b; --muted:#625849; --border:#d5cab2; --accent:#86392b; --accent2:#86392b; --fx1:#c9a27a; --fx2:#bfae8c; --fx3:#dcc39b; }
[data-style="bloom"][data-mode="light"] { --shadow: 0 6px 24px -8px rgb(40 60 40 / .18); }
[data-style="bloom"][data-mode="dark"]  { --shadow: 0 8px 28px -8px rgb(0 0 0 / .5); }

/* derived colours (Bloom: accent mixed 30% into the border; faint accent-tinted fills) */
:root {
  --edge: color-mix(in srgb, var(--accent) 30%, var(--border));
  --sep: var(--surface2);    /* lines between list rows */
  --accent-soft: color-mix(in srgb, var(--accent) 14%, var(--surface));
  --accent-ink: var(--surface);
  --hl: color-mix(in srgb, var(--accent2) 22%, transparent);
  --sel-bg: var(--accent);   /* a selected control; Silo turns it into a gold highlight bar */
}
[data-mode="dark"] { --accent-ink: var(--bg); color-scheme: dark; }
[data-mode="light"] { color-scheme: light; }

/* ---------- Silo shape and type (Sabo OS silo.ts look(): 4px/2px corners, gold hairlines, depth from darkness, mono caps) ---------- */
[data-style="silo"] {
  --r-card: 4px;
  --r-item: 2px;
  --r-pill: 3px;
  --r-tag: 2px;
  --font-ui: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-label: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --weight-heading: 500;
  --track-heading: 0.02em;
}
[data-style="silo"][data-mode="dark"] {
  --edge: color-mix(in srgb, var(--accent) 30%, transparent);
  --sep: color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-soft: color-mix(in srgb, var(--accent) 12%, var(--surface));
  --shadow: 0 0 0 1px rgb(0 0 0 / .35), 0 26px 50px -26px rgb(0 0 0 / .9);
  --halo: 0 0 12px 2px color-mix(in srgb, var(--accent) 45%, transparent);
  --tick: color-mix(in srgb, var(--accent) 75%, transparent);
  /* highlight bar: cream into gold, dark label */
  --sel-bg: linear-gradient(90deg, color-mix(in srgb, var(--text) 80%, var(--accent)) 0%, var(--accent) 62%, color-mix(in srgb, var(--accent) 82%, var(--bg)) 100%);
}
[data-style="silo"][data-mode="light"] {
  --edge: color-mix(in srgb, var(--accent) 40%, transparent);
  --sep: color-mix(in srgb, var(--accent) 24%, transparent);
  --accent-soft: color-mix(in srgb, var(--accent) 12%, var(--surface));
  --shadow: inset 0 1px 0 rgb(255 255 255 / .45), 0 1px 2px rgb(80 50 10 / .08);
  --halo: 0 0 6px color-mix(in srgb, var(--accent) 40%, transparent);
  --tick: color-mix(in srgb, var(--accent) 75%, transparent);
  /* on parchment the bar carries a light label, so it deepens toward ink at both ends */
  --sel-bg: linear-gradient(90deg, color-mix(in srgb, var(--text) 45%, var(--accent)) 0%, var(--accent) 62%, color-mix(in srgb, var(--accent) 85%, #000) 100%);
}

/* ---------- Papyrus shape and type: a finely made old book. Warm ivory and soft ink, single hairlines and no drop shadows,
   Garamond titles, small inscription capitals for labels, ink-dark controls; the muted red-ochre is kept for a few rubrics. ---------- */
[data-style="papyrus"] {
  --r-card: 2px;
  --r-item: 2px;
  --r-pill: 2px;
  --r-tag: 1px;
  --font-ui: "Literata", Georgia, "Times New Roman", serif;
  --font-label: "Cinzel", "Trajan Pro", Georgia, serif;
  --font-display: "Cormorant Garamond", Garamond, "EB Garamond", Georgia, serif;
  --weight-heading: 500;
  --track-heading: 0.005em;
  --ease: cubic-bezier(.25, .1, .25, 1);
  --ease-in: cubic-bezier(.22, .61, .36, 1);
  --t-page: .42s;
  --edge: color-mix(in srgb, var(--text) 16%, transparent);   /* a fine ink hairline */
  --sep: color-mix(in srgb, var(--text) 9%, transparent);
  --rule: color-mix(in srgb, var(--accent) 40%, transparent);
  --accent-soft: color-mix(in srgb, var(--accent) 7%, var(--surface));
  --sel-bg: var(--text);     /* a chosen control is set in ink, not colour */
  --shadow: none;
}
[data-style="papyrus"][data-mode="dark"] {
  --edge: color-mix(in srgb, var(--text) 15%, transparent);
  --sep: color-mix(in srgb, var(--text) 8%, transparent);
}

/* ---------- Space shape and type (Sabo OS ascii.ts look(): 6px/3px corners, 1px ink hairlines, no shadows, one mono face,
   lowercase labels at weight 500, no letter-spacing; a chosen control is set in ink) ---------- */
[data-style="space"] {
  --r-card: 6px;
  --r-item: 3px;
  --r-pill: 3px;
  --r-tag: 2px;
  --font-ui: "Paper Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --font-label: var(--font-ui);
  --font-display: var(--font-ui);
  --weight-heading: 500;
  --track-heading: 0;
  --edge: color-mix(in srgb, var(--text) 26%, transparent);
  --strong: color-mix(in srgb, var(--text) 62%, transparent);
  --sep: color-mix(in srgb, var(--text) 14%, transparent);
  --well: var(--surface2);
  --accent-soft: color-mix(in srgb, var(--text) 8%, var(--surface));
  --sel-bg: var(--text);
  --shadow: none;
}
[data-style="space"][data-mode="dark"] {
  --edge: color-mix(in srgb, var(--text) 24%, transparent);
  --strong: color-mix(in srgb, var(--text) 58%, transparent);
  --sep: color-mix(in srgb, var(--text) 12%, transparent);
}

/* Motion (Settings): Full or Reduced. Reduced makes every change instant and holds the background still. */
[data-motion="reduced"] { --t-screen: 0s; --t-pop: 0s; --t-1: 0s; --t-2: 0s; --t-page: 0s; --lift: 0px; }
[data-motion="reduced"] *, [data-motion="reduced"] *::before, [data-motion="reduced"] *::after { animation: none !important; transition: none !important; }
[data-motion="reduced"]::view-transition-group(*), [data-motion="reduced"]::view-transition-old(*), [data-motion="reduced"]::view-transition-new(*) { animation: none !important; }