/* UI v3: the single stylesheet entry. app_v3.html links this file only (after the v2 sheets the fallback screens need);
   every other v3 sheet is pulled in here, so a screen package adds its rules to ITS OWN file and never edits a template.
   Colours, radii, type and motion are the prototype's (Main.dc.html, Profile.dc.html). Light is the default; the dark block
   follows data-theme="dark" (or "system" with the OS setting). tests/test_ui_contrast_v3.py reads the theme blocks of this
   file, so keep them as plain `--name: value;` lists with hex colours. */
@import url("./shell.css");
@import url("./kit.css");
@import url("./dashboard.css");
@import url("./close.css");
@import url("./journals.css");
@import url("./approvals.css");
@import url("./periods.css");
@import url("./mis.css");
@import url("./fs.css");
@import url("./board.css");
@import url("./budget.css");
@import url("./le.css");
@import url("./accounts.css");
@import url("./people.css");
@import url("./profile.css");
@import url("./help.css");

/* Fonts: Geist (UI), Geist Mono (codes, tags), Instrument Serif (titles that state a conclusion). All SIL OFL 1.1, bundled
   under ../../fonts/ with their licence texts; no CDN. Geist Mono and Instrument Serif are the Latin subset. */
@font-face { font-family: "Geist"; src: url("../../fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../../fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("../../fonts/InstrumentSerif-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("../../fonts/InstrumentSerif-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --v3-page: #efece8; --v3-card: #ffffff; --v3-sunk: #f7f5f2; --v3-sunk-2: #f4f2ef; --v3-hover: #f2ecf8;
  --v3-line: #e6e3de; --v3-line-soft: #ece9e4; --v3-line-row: #f1eee9; --v3-line-input: #ddd0ea;
  --v3-ink: #1b1722; --v3-ink-2: #4b4655; --v3-ink-3: #55505f; --v3-ink-4: #6a6473;
  --v3-brand: #693a94; --v3-brand-deep: #5a2e85; --v3-brand-mid: #8a5cc0; --v3-brand-tint: #f2ecf8; --v3-on-brand: #ffffff;
  --v3-coral: #ea543f; --v3-coral-text: #b23a26; --v3-coral-tint: #fceae6; --v3-on-coral: #1b1722;
  --v3-ok: #0b6a4e; --v3-ok-tint: #e3f3ec; --v3-warn: #7a4500; --v3-warn-tint: #fcf0dc;
  --v3-bad: #b23a26; --v3-bad-tint: #fceae6; --v3-info: #2b4c86; --v3-info-tint: #e6edf8;
  --v3-wait: #55505f; --v3-wait-tint: #efece8;
  --v3-die: #1b1722; --v3-die-2: #2a2236; --v3-die-line: #3a3146; --v3-pin: #b9a6cf; --v3-pin-lit: #ffd27a;
  --v3-scrim: rgba(27, 23, 34, 0.32);
  --v3-sh-pop: 0 18px 40px -16px rgba(27, 23, 34, 0.4);
  --v3-sh-rail: 0 24px 60px -20px rgba(27, 23, 34, 0.35);
  --v3-sh-lift: 0 10px 30px -14px rgba(41, 20, 66, 0.35);
  --v3-r-card: 16px; --v3-r-pane: 14px; --v3-r-ctl: 10px; --v3-r-sm: 8px; --v3-r-chip: 14px; --v3-r-core: 12px;
  --v3-font: "Geist", ui-sans-serif, system-ui, sans-serif;
  --v3-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --v3-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  /* motion: one curve family, a few durations (prototype: .18s hover, .22s lift, .28s rail, .5s rise) */
  --v3-ease: cubic-bezier(0.2, 0.8, 0.2, 1); --v3-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --v3-t-fast: 0.18s; --v3-t-base: 0.22s; --v3-t-slow: 0.28s; --v3-t-slide: 0.32s; --v3-t-rise: 0.5s;
  --v3-rail-w: 68px; --v3-rail-open-w: 256px; --v3-pane-w: 380px; --v3-gap: 14px;
  --v3-focus: 2px solid #693a94;
}

:root[data-theme="dark"] {
  --v3-page: #100e14; --v3-card: #1a1721; --v3-sunk: #211d2a; --v3-sunk-2: #25202e; --v3-hover: #2a2236;
  --v3-line: #332d3f; --v3-line-soft: #2d2837; --v3-line-row: #28232f; --v3-line-input: #4a3e5c;
  --v3-ink: #f2eff6; --v3-ink-2: #d2ccdc; --v3-ink-3: #bdb6c9; --v3-ink-4: #a49cb2;
  --v3-brand: #7b49b0; --v3-brand-deep: #cdb6f0; --v3-brand-mid: #a07ad0; --v3-brand-tint: #2a2236; --v3-on-brand: #ffffff;
  --v3-coral: #ea543f; --v3-coral-text: #ff9c8c; --v3-coral-tint: #3a1e1a; --v3-on-coral: #1b1722;
  --v3-ok: #7fd6b2; --v3-ok-tint: #17302a; --v3-warn: #f3c46b; --v3-warn-tint: #36290f;
  --v3-bad: #ff9c8c; --v3-bad-tint: #3a1e1a; --v3-info: #9bb8ee; --v3-info-tint: #1c2840;
  --v3-wait: #bdb6c9; --v3-wait-tint: #2a2533;
  --v3-scrim: rgba(0, 0, 0, 0.55);
  --v3-sh-pop: 0 18px 40px -16px rgba(0, 0, 0, 0.7);
  --v3-sh-rail: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
  --v3-sh-lift: 0 10px 30px -14px rgba(0, 0, 0, 0.7);
  --v3-focus: 2px solid #cdb6f0;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    --v3-page: #100e14; --v3-card: #1a1721; --v3-sunk: #211d2a; --v3-sunk-2: #25202e; --v3-hover: #2a2236;
    --v3-line: #332d3f; --v3-line-soft: #2d2837; --v3-line-row: #28232f; --v3-line-input: #4a3e5c;
    --v3-ink: #f2eff6; --v3-ink-2: #d2ccdc; --v3-ink-3: #bdb6c9; --v3-ink-4: #a49cb2;
    --v3-brand: #7b49b0; --v3-brand-deep: #cdb6f0; --v3-brand-mid: #a07ad0; --v3-brand-tint: #2a2236; --v3-on-brand: #ffffff;
    --v3-coral: #ea543f; --v3-coral-text: #ff9c8c; --v3-coral-tint: #3a1e1a; --v3-on-coral: #1b1722;
    --v3-ok: #7fd6b2; --v3-ok-tint: #17302a; --v3-warn: #f3c46b; --v3-warn-tint: #36290f;
    --v3-bad: #ff9c8c; --v3-bad-tint: #3a1e1a; --v3-info: #9bb8ee; --v3-info-tint: #1c2840;
    --v3-wait: #bdb6c9; --v3-wait-tint: #2a2533;
    --v3-scrim: rgba(0, 0, 0, 0.55);
    --v3-sh-pop: 0 18px 40px -16px rgba(0, 0, 0, 0.7);
    --v3-sh-rail: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
    --v3-sh-lift: 0 10px 30px -14px rgba(0, 0, 0, 0.7);
    --v3-focus: 2px solid #cdb6f0;
    color-scheme: dark;
  }
}

/* The v2 screens shown inside the v3 frame read the v2 names; map them onto the v3 palette in dark so they follow the theme. */
:root[data-theme="dark"] {
  --canvas: #100e14; --surface: #1a1721; --sunken: #211d2a; --hover: #2a2236; --paper: #1a1721; --sunk: #211d2a; --subtle: #211d2a; --subtle-2: #2a2236;
  --line: #332d3f; --line-2: #4a3e5c; --ink: #f2eff6; --ink-2: #d2ccdc; --ink-3: #bdb6c9; --ink-4: #a49cb2;
  --brand-tint: #2a2236; --tint: #2a2236; --brand-deep: #cdb6f0; --brand-2: #cdb6f0;
  --ok-tint: #17302a; --warn-tint: #36290f; --bad-tint: #3a1e1a; --info-tint: #1c2840; --coral-tint: #3a1e1a;
}

/* ---- base */
html, body { margin: 0; min-height: 100%; }
body { font-family: var(--v3-font); font-size: 14px; line-height: 1.5; color: var(--v3-ink); background: var(--v3-page); -webkit-font-smoothing: antialiased; font-feature-settings: "tnum" 1, "lnum" 1; }
.v3-app *, .v3-app *::before, .v3-app *::after { box-sizing: border-box; }
.v3-app :focus-visible { outline: var(--v3-focus); outline-offset: 2px; }
.v3-mono { font-family: var(--v3-mono); font-weight: 500; }
.v3-serif { font-family: var(--v3-serif); font-weight: 400; letter-spacing: -0.01em; }
.v3-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- motion (names are the prototype's) */
@keyframes v3-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes v3-pop { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes v3-slidein { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes v3-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes v3-spin { to { transform: rotate(360deg); } }
.v3-rise { animation: v3-rise var(--v3-t-rise) var(--v3-ease) both; }
.v3-pop { animation: v3-pop var(--v3-t-base) var(--v3-ease) both; }

@media (prefers-reduced-motion: reduce) {
  .v3-app *, .v3-app *::before, .v3-app *::after {
    animation-duration: 0.01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important;
  }
}