/* Utsho V2 — tokens and components, from the Utsho V2 design system (tokens.json + components/bundle.css).
   Paper theme is the default for app screens; .theme-poster switches a region to the red Poster theme. */
@import url("../vendor/fonts/fonts.css");
@import url("../vendor/phosphor/style.css");

:root {
  /* palette */
  --red-500: #ed1c24; --red-600: #d71920; --red-800: #8f0a10; --red-300: #f26a6f; --red-050: #fff1f1;
  --ink-900: #000000; --white: #ffffff; --grey-600: #5c5c5c; --sun-300: #fffe71;
  /* paper theme (default) */
  --ground: var(--white); --ground-raised: var(--white); --ground-deep: var(--red-050); --brand-field: var(--red-500);
  --ink: var(--ink-900); --ink-muted: var(--grey-600); --highlight: var(--red-600);
  --marker: var(--sun-300); --on-marker: var(--ink-900);
  --action: var(--red-600); --on-action: var(--white); --outline: var(--ink-900);
  --line: #d9d9d9; --border-strong: #6b6b6b; --focus: var(--red-600);
  --alert: var(--sun-300); --on-alert: var(--ink-900);
  /* type */
  --font-display: "Hind Siliguri", "Noto Sans Bengali", system-ui, sans-serif;
  --font-text: "Anek Bangla", "Noto Sans Bengali", system-ui, sans-serif;
  /* spacing, radius, shadow, stroke */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
  --radius-sm: 6px; --radius-md: 14px; --radius-lg: 28px; --radius-pill: 999px;
  --shadow-sticker: 4px 4px 0 0 #000000; --shadow-sticker-sm: 2px 2px 0 0 #000000;
  --stroke-ink: 2.5px; --stroke-icon: 2px;
}
.theme-poster {
  --ground: var(--red-600); --ground-raised: #c4141b; --ground-deep: var(--red-800); --brand-field: var(--red-800);
  --ink: var(--white); --ink-muted: #fff0f0; --highlight: var(--sun-300);
  --action: var(--white); --on-action: var(--ink-900); --line: var(--red-300); --border-strong: var(--white); --focus: var(--white);
  background: var(--ground); color: var(--ink);
}

/* Button */
.ut-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font: 600 15px/1.3 var(--font-text);
  padding: 9px var(--space-4); border-radius: var(--radius-md); border: var(--stroke-ink) solid var(--outline);
  cursor: pointer; transition: transform .08s, box-shadow .08s; white-space: nowrap; text-decoration: none; color: inherit; background: none; }
.ut-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ut-btn i { font-size: 18px; }
.ut-btn-primary { background: var(--action); color: var(--on-action); box-shadow: var(--shadow-sticker); }
.ut-btn-black { background: var(--ink-900); color: var(--white); box-shadow: var(--shadow-sticker); }
.ut-btn-primary:active, .ut-btn-black:active { transform: translate(2px, 2px); box-shadow: var(--shadow-sticker-sm); }
.ut-btn-ghost { background: transparent; color: var(--ink); border-color: var(--border-strong); border-width: 1.5px; }
.ut-btn-ghost:hover { background: var(--ground-deep); }
.ut-btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }
.ut-btn-sm { padding: 5px var(--space-3); font-size: 14px; border-radius: 10px; }
.ut-btn-sm i { font-size: 16px; }

/* Marker */
.ut-hl { color: var(--highlight); font-weight: 700; }
.ut-mark { background: var(--marker); color: var(--on-marker); font-weight: 700; padding: 0 var(--space-1); border-radius: var(--radius-sm);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Badge */
.ut-badge { display: inline-flex; align-items: center; gap: var(--space-1); font: 600 13px/1.3 var(--font-text); white-space: nowrap;
  padding: 2px var(--space-2); border-radius: var(--radius-sm); border: 2px solid var(--outline); box-shadow: var(--shadow-sticker-sm); }
.ut-badge i { font-size: 14px; }
.ut-badge-white { background: var(--white); color: var(--ink-900); }
.ut-badge-black { background: var(--ink-900); color: var(--white); }
.ut-badge-red { background: var(--red-600); color: var(--white); }
.ut-badge-alert { background: var(--alert); color: var(--on-alert); } /* app extension: "needs attention" */
.ut-badge-quiet { background: var(--white); color: var(--grey-600); border-color: var(--line); box-shadow: none; } /* app extension */

/* Card (HookCard frame) */
.ut-card { position: relative; background: var(--white); color: var(--ink-900); border: var(--stroke-ink) solid var(--outline);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sticker); padding: var(--space-6); }
.ut-card-tab { position: absolute; top: calc(-1 * var(--space-4)); left: var(--space-4); min-width: 40px; height: 36px; padding: 0 var(--space-2);
  display: flex; align-items: center; justify-content: center; background: var(--red-600); color: var(--white);
  border: var(--stroke-ink) solid var(--outline); border-radius: var(--radius-pill); font: 700 18px/1 var(--font-display); }
.ut-card-title { margin: 0 0 var(--space-3); font: 700 22px/1.35 var(--font-display); }

/* Callout (speech bubble) */
.ut-callout { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border: var(--stroke-ink) solid var(--outline);
  border-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-sm); color: var(--ink-900); }
.ut-callout-tip { background: var(--white); }
.ut-callout-alert { background: var(--alert); color: var(--on-alert); }
.ut-callout-bang { flex: none; width: 30px; height: 30px; border-radius: var(--radius-pill); display: flex; align-items: center; justify-content: center;
  background: var(--red-600); border: var(--stroke-ink) solid var(--outline); font: 700 18px/1 var(--font-display); color: var(--white); }
.ut-callout-alert .ut-callout-bang { background: var(--ink-900); color: var(--sun-300); }
.ut-callout-label { display: block; font: 700 15px/1.3 var(--font-text); margin-bottom: 2px; }
.ut-callout-body { font: 400 15px/1.55 var(--font-text); }

/* ChapterOpener */
.ut-opener { position: relative; overflow: hidden; background: var(--red-600); color: var(--white); padding: var(--space-12) var(--space-8); border-radius: var(--radius-md); }
.ut-opener-rays { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ut-opener-rays path { fill: var(--red-800); }
.ut-opener > *:not(.ut-opener-rays) { position: relative; }
.ut-opener-kicker { font: 500 15px/1.4 var(--font-text); margin: 0 0 var(--space-2); }
.ut-opener-title { margin: 0; font: 700 48px/1 var(--font-display); }
.ut-opener-sub { margin: var(--space-3) 0 0; font: 500 18px/1.5 var(--font-text); }
.ut-opener-sub .ut-hl { color: var(--sun-300); }

@media print { * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .ut-btn { transition: none; } }