/* ==========================================================================
   მელანი (INK) — design tokens, v6 "Printed in ink"
   A manga magazine printed on paper: black ink, one red, the art inked onto
   the page with dry-brush edges, a colour volume as the one object in colour.
   Dark theme = the same page at night: ink ground, the art as lit paper.
   See DESIGN.md.
   ========================================================================== */

/* Brush captions: Geo Phunji Mtavr (typeface.ge), remapped to Georgian. Its Latin
   slots still hold Georgian shapes, so it is limited to the Georgian blocks. */
@font-face {
  font-family: "Phunji"; src: url(/assets/fonts/phunji.woff2) format("woff2"), url(/assets/fonts/phunji.ttf) format("truetype");
  font-display: swap; unicode-range: U+10A0-10FF, U+1C90-1CBF, U+2D00-2D2F;
}
/* Every word that is not a heading: TF Mecomicse (typeface.ge): Georgian, Latin, digits and
   punctuation, light / regular / bold. It is drawn small on its em (x-height .4), so it is
   scaled up here once and the sizes in the stylesheets mean what they say. */
@font-face { font-family: "Mecomicse"; src: url(/assets/fonts/mecomicse-300.woff2) format("woff2"); font-weight: 300; font-display: swap; size-adjust: 114%; }
@font-face { font-family: "Mecomicse"; src: url(/assets/fonts/mecomicse-400.woff2) format("woff2"); font-weight: 400; font-display: swap; size-adjust: 114%; }
@font-face { font-family: "Mecomicse"; src: url(/assets/fonts/mecomicse-400i.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; size-adjust: 114%; }
@font-face { font-family: "Mecomicse"; src: url(/assets/fonts/mecomicse-700.woff2) format("woff2"); font-weight: 700; font-display: swap; size-adjust: 114%; }
@font-face { font-family: "Mecomicse"; src: url(/assets/fonts/mecomicse-700i.woff2) format("woff2"); font-weight: 700; font-style: italic; font-display: swap; size-adjust: 114%; }

:root {
  /* two voices: the brush (Phunji) for headings, Mecomicse for everything else */
  --f-brush: "Phunji", "Noto Sans Georgian", sans-serif;
  --f-body: "Mecomicse", "Noto Sans Georgian", system-ui, sans-serif;
  --f-ui: var(--f-body);
  --f-sans: var(--f-body);
  --f-mono: var(--f-body);
  --f-jp: "Dela Gothic One", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --f-kana: "Yuji Syuku", "Noto Serif JP", serif;

  --fs-xs: .75rem;      /* 12 */
  --fs-sm: .8125rem;    /* 13 */
  --fs-base: .9375rem;  /* 15 */
  --fs-md: 1.0625rem;   /* 17 */
  --fs-lg: 1.25rem;     /* 20 */
  --fs-xl: clamp(1.35rem, 1.1rem + .8vw, 1.75rem);
  --fs-2xl: clamp(1.6rem, 1.2rem + 1.3vw, 2.35rem);
  --fs-3xl: clamp(2.8rem, 1.4rem + 4.2vw, 6rem);
  --fs-hero: clamp(3rem, 1rem + 5.4vw, 7.4rem);
  /* the brush face is light: a stroke of its own colour thickens it into a loaded brush */
  --brush-weight: .034em;

  /* layout */
  --gutter: clamp(16px, 3vw, 44px);
  --maxw: 1560px;
  --nav-h: 72px;
  --tabbar-h: 0px;

  /* shape: printed, nearly square */
  --r-sm: 2px;
  --r: 3px;
  --r-lg: 6px;
  --r-pill: 999px;

  /* motion: weighted, never bouncy */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-in: cubic-bezier(.55, 0, .9, .35);
  --t-fast: 180ms;
  --t: 320ms;
  --t-paint: 560ms;
  --t-slow: 700ms;

  /* brush marks (assets/brush: gen_brush.py + gen_ink.py) */
  --brush-swash: url(/assets/brush/swash.svg);
  --brush-stroke: url(/assets/brush/stroke.svg);
  --brush-under: url(/assets/brush/underline.svg);
  --brush-rule: url(/assets/brush/rule.svg);
  --brush-enso: url(/assets/brush/enso.svg);
  --brush-splat: url(/assets/brush/splat.svg);
  --brush-edge: url(/assets/brush/edge.svg);
  --brush-wipe: url(/assets/brush/wipe.svg);
  --brush-art: url(/assets/brush/art.svg);
  --brush-spray: url(/assets/brush/spray.svg);
  --brush-drip: url(/assets/brush/drip.svg);
  --brush-shore: url(/assets/brush/shore.svg);
  --brush-vstroke: url(/assets/brush/vstroke.svg);
  --brush-ring: url(/assets/brush/ring.svg);
  /* hand-ruled lines (gen_icons.py): stretched along a box's sides, or under a row */
  --edge-h1: url(/assets/brush/edge-h1.svg);
  --edge-h2: url(/assets/brush/edge-h2.svg);
  --edge-v1: url(/assets/brush/edge-v1.svg);
  --edge-v2: url(/assets/brush/edge-v2.svg);
  --frame: var(--edge-h1) 0 0 / 100% 8px no-repeat, var(--edge-h2) 0 100% / 100% 8px no-repeat,
           var(--edge-v1) 0 0 / 8px 100% no-repeat, var(--edge-v2) 100% 0 / 8px 100% no-repeat;
  --frame-alt: var(--edge-h2) 0 0 / 100% 8px no-repeat, var(--edge-h1) 0 100% / 100% 8px no-repeat,
               var(--edge-v2) 0 0 / 8px 100% no-repeat, var(--edge-v1) 100% 0 / 8px 100% no-repeat;

  /* fixed ink, paper and red: the same in both themes (bands, the reader, the footer) */
  --ink: #121110;
  --paper: #ECE5D6;
  --red: #C8352A;
}

/* ---- light (default): paper ---- */
:root {
  --bg: #E8E0D0;
  --bg-tex: url(/assets/brand/paper.webp);
  --surface: #EEE8DB;
  --surface-2: #E0D8C6;
  --text: #141312;
  --text-2: #3A3630;
  --muted: #736C60;
  --accent: #C8352A;
  --on-accent: #F7F1E5;
  --on-text: #EEE8DB;
  --line: rgba(20, 19, 18, .13);
  --line-2: rgba(20, 19, 18, .3);
  --rule: rgba(20, 19, 18, .86);
  --hover: rgba(20, 19, 18, .05);
  --bar: #E8E0D0;
  color-scheme: light;

  /* the art is inked onto the paper: grey to ink, white to paper */
  --art-filter: grayscale(1) contrast(1.8) brightness(1.1);
  --art-blend: multiply;
  --splat: #141312;
  --splat-o: 1;
  --shadow-card: 0 1px 2px rgba(48, 36, 18, .1), 0 12px 26px -16px rgba(48, 36, 18, .45);
  --shadow-lift: 0 2px 5px rgba(48, 36, 18, .14), 0 26px 44px -22px rgba(48, 36, 18, .6);
  --shadow-panel: 0 30px 80px -30px rgba(48, 36, 18, .55), 0 0 0 1px rgba(20, 19, 18, .1);
  --shadow-book: 0 1px 1px rgba(30, 20, 8, .2), 0 16px 30px -12px rgba(30, 20, 8, .55), 0 42px 70px -30px rgba(30, 20, 8, .6);
  --mark-filter: none;
  --wash: grayscale(1) contrast(1.1);
}

/* ---- dark: the same page at night. Ink ground; the art stays paper, lit. ---- */
:root[data-theme="dark"], .ink-dark {
  --bg: #151412;
  --bg-tex: url(/assets/brand/paper-dark.webp);
  --surface: #1D1C19;
  --surface-2: #272521;
  --text: #EDE6D7;
  --text-2: #C0B8A9;
  --muted: #8C8578;
  --accent: #DC4533;
  --on-accent: #FFF6EA;
  --on-text: #151412;
  --line: rgba(237, 230, 215, .11);
  --line-2: rgba(237, 230, 215, .26);
  --rule: rgba(237, 230, 215, .8);
  --hover: rgba(237, 230, 215, .06);
  --bar: #151412;
  color-scheme: dark;

  --art-filter: grayscale(1) contrast(1.75) brightness(.88) sepia(.22);
  --art-blend: normal;
  --splat: #EDE6D7;
  --splat-o: .1;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .5), 0 14px 28px -16px rgba(0, 0, 0, .9);
  --shadow-lift: 0 2px 6px rgba(0, 0, 0, .55), 0 28px 48px -22px rgba(0, 0, 0, .95);
  --shadow-panel: 0 40px 90px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(237, 230, 215, .1);
  --shadow-book: 0 1px 1px rgba(0, 0, 0, .5), 0 18px 30px -12px rgba(0, 0, 0, .8), 0 44px 70px -30px rgba(0, 0, 0, .9);
  --mark-filter: invert(1) sepia(.1) brightness(.95);
  --wash: grayscale(1) contrast(1.1) brightness(.7);
}

@media (max-width: 760px) {
  :root { --nav-h: 58px; --tabbar-h: 62px; }
}