/*
 * Design tokens: the V6 language (home page V6, approved 07.09.2026, PR #1621), carried onto
 * /app, auth, admin and the public pages (spec 060, slice S01). One accent (oxblood), porcelain
 * paper, inset rings instead of borders, quiet shadows, Onest as the only UI family, emphasis
 * at weight 500. The dark theme is derived from V6's always-dark band palette (decision D5).
 *
 * Contract: single canonical token layer, linked FIRST (after fonts.css) so every component
 * consumes one source of truth. Component CSS must NOT re-define base tokens. [data-theme="dark"]
 * overrides colour/surface/elevation only; type/space/radius/motion scales are shared.
 * No @import, no inline styles — strict-CSP safe. Fonts self-hosted (fonts.css, font-src 'self').
 *
 * Owner edits land here: brand = --accent*, surfaces = --paper/--panel/--panel-sunken, edges =
 * --ring*, shape = --radius-*, hover feel = --lift/--dur-fast/--shadow-lift*, font = --font-sans,
 * components = the knobs block. The dark theme lives only in the [data-theme="dark"] block,
 * which is screen-only: print always resolves the light tokens (D22, S18).
 *
 * Canonical breakpoints (media queries cannot read custom properties, so the list lives here):
 * 1000/999 for the shell (coupled to JS, user-app-shell-controls.js), 900 for layout, 560 for
 * compact. Existing breakpoints stay until their slice touches them; add none outside this set.
 */

:root {
  color-scheme: light;

  /* ---- Type: one family (D2); mono only for hashes, ids and code (D3) ---- */
  --font-sans: "Onest", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: var(--font-sans);  /* D2 one-line revert: "Source Serif 4", Georgia, serif */
  --font-mono: "Cascadia Code", "SF Mono", Consolas, "Liberation Mono", monospace;
  /* Back-compat aliases (older component CSS still reads these names). */
  --font-body: var(--font-sans);
  --font-ui: var(--font-sans);
  --font: var(--font-sans);        /* V6 short name */

  /* ---- Ink + surface neutrals (V6) ---- */
  --ink: #15130f;                 /* headings, titles, labels, emphasised values (D1) */
  --ink-strong: #15130f;          /* display headings / highest contrast */
  --text: #45423d;                /* body copy (D1) */
  --ink-soft: var(--text);        /* long-form legal prose */
  --muted: #6a6862;               /* metadata; V6 #706e68 darkened to hold 4.5:1 on a hover-washed sunken row */
  --faint: #b5b2ab;               /* icon strokes and decoration only, never text */
  --ring: rgba(21, 19, 15, 0.1);  /* V6 inset ring: the default edge */
  --ring-2: rgba(21, 19, 15, 0.16);
  --ring-3: rgba(21, 19, 15, 0.28);
  --line: var(--ring);            /* default hairline border */
  --line-soft: #f2f0ec;           /* faintest hairline */
  --line-strong: var(--ring-2);   /* emphasised divider, table frame */
  --edge: inset 0 0 0 1px var(--ring);
  --edge-2: inset 0 0 0 1px var(--ring-2);
  --field-border: #d3cec5;        /* interactive control boundary */
  --field-ring: rgba(21, 19, 15, 0.48); /* field edge at the 3:1 non-text floor */
  --hover-wash: rgba(21, 19, 15, 0.05); /* nav / menu hover */
  --press-wash: rgba(21, 19, 15, 0.04); /* outline-button hover fill */
  --meta-dot: #c7c2b9;            /* meta separator dot */
  --atom-dot: rgba(21, 19, 15, 0.13);            /* «атоми»: крапка полотна кожні 24px */
  --atom-dot-strong: rgba(21, 19, 15, 0.24);     /* «атоми»: акцентна крапка кожні 96px */
  --atom-dot-inverse: rgba(255, 255, 255, 0.17); /* крапка на секціях, темних в обох темах */
  --paper: #fdfdfc;               /* page background — porcelain white */
  --paper-raised: #fefefe;        /* slightly lifted surface */
  --panel: #ffffff;               /* answer/card surface (kept white, pinned) */
  --panel-alt: #f5f4f1;           /* table header, row hover */
  --panel-sunken: #f5f4f1;        /* inset wells, quote blocks (V6 --sunken) */
  --panel-deep: #eeece8;          /* V6 --sunken-2 */
  --surface: var(--panel);        /* generic surface alias */
  --sunken: var(--panel-sunken);
  --sunken-2: var(--panel-deep);
  --overlay: rgba(24, 20, 14, 0.46); /* drawer / modal backdrop */

  /* ---- Brand accent: one oxblood (D11: brass retired) ---- */
  --accent: #7a2e2a;              /* identity oxblood — links, focus, active nav, primary */
  --accent-strong: #632421;       /* hover / pressed */
  --accent-hover: var(--accent-strong);
  --accent-bright: #a24a44;       /* on dark surfaces */
  --accent-soft: #f4ebe9;         /* tinted background */
  --accent-ink: #5c2320;          /* text on --accent-soft (10.43:1) */
  --accent-line: #e3cfc9;         /* tinted border */
  --accent-contrast: #ffffff;     /* text on a solid accent fill */

  /* ---- Primary CTA: the V6 oxblood pill, no ring, no inset highlight ---- */
  --cta: var(--accent);
  --cta-hover: var(--accent-strong);
  --cta-line: var(--accent);
  --cta-line-hover: var(--accent-strong);
  --cta-icon: currentColor;
  --cta-contrast: #ffffff;
  --shadow-cta: 0 0 #0000;
  --link: var(--accent);
  --link-strong: var(--accent-strong); /* hover / pressed */
  --link-visited: #6e4436;        /* opened statutes/rulings */

  /* ---- Semantic status tones: meaning-first, distinct from oxblood accent ---- */
  --ok: #2c6e49;
  --ok-strong: #235839;
  --ok-soft: #e6f0ea;
  --ok-line: #d3e2d8;
  --warn: #6b521a;
  --warn-strong: #554112;
  --warn-soft: #f9f3e2;
  --warn-line: #e8dab3;
  --danger: #b42318;              /* a clear red, never read as the oxblood primary (6.46:1 on paper) */
  --danger-strong: #912018;       /* hover / pressed */
  --danger-soft: #f9efec;
  --danger-line: #e8cec7;
  --info: #5c4a33;
  --info-strong: #483a27;
  --info-soft: #f3f0e9;
  --info-line: #e2d8c6;
  --meta: #5c5953;               /* warm slate — deliberately un-trustworthy */
  --meta-strong: #46433d;
  --meta-soft: #f2f0ec;
  --meta-line: #d8d4cb;
  --on-status: #ffffff;          /* text on a solid status fill */

  /* ---- Legacy hues kept for back-compat; --teal pinned for the contract test ---- */
  --green: #2c6e49;
  --red: #8b3a30;
  --amber: #6b521a;
  --blue: #5c4a33;
  --teal: #0d6966;
  --shadow: 0 1px 3px rgba(28, 27, 24, 0.08);

  /* ---- Always-dark band: identical in both themes, never redefined in dark (but the surface) ---- */
  --dark: #161412;
  --dark-2: #1d1a17;
  --dark-heading: #ffffff;
  --dark-text: #f0efec;
  --dark-muted: #9a9791;
  --dark-ring: rgba(255, 255, 255, 0.1);
  --dark-surface: rgba(255, 255, 255, 0.05);
  --dark-focus: #f0efec;          /* focus on bands (oxblood is 1.97:1 there) */
  --dark-band: var(--dark);       /* a band's surface; the dark block lifts it off the page (C11) */

  /* ---- Light islands (D13): document paper and pictogram plates, same in both themes ---- */
  --doc-paper: #ffffff;
  --doc-ink: #15130f;
  --doc-muted: #706e68;
  --doc-sunken: #f5f4f1;
  --doc-line: rgba(21, 19, 15, 0.28);
  --doc-focus: #7a2e2a;
  --doc-warn: #6b521a;
  --doc-warn-soft: #f9f3e2;
  --pic-plate: #f5f4f1;
  --pic-plate-accent: #f4ebe9;

  /* ================= Type scale (V6), in rem so text follows the browser's font size (D26) ================= */
  --text-2xs: 0.75rem;            /* 12 px; V6 has nothing below 12 */
  --text-xs: 0.75rem;             /* 12 px */
  --text-sm: 0.8125rem;           /* 13 px: meta, tags, chips, legal */
  --text-ui: 0.875rem;            /* 14 px: nav, small buttons, eyebrow, footer */
  --text-base: 0.9375rem;         /* 15 px: card and body UI copy */
  --text-md: 1rem;                /* 16 px: page body, answer text */
  --text-lead: 1.0625rem;         /* 17 px: section lead, FAQ question */
  --text-lg: 1.125rem;            /* 18 px */
  --text-xl: 1.375rem;            /* 22 px */
  --text-2xl: 1.5rem;             /* 24 px */
  --text-3xl: clamp(1.75rem, 3vw, 2.375rem);     /* 28-38 px */
  --text-h1: clamp(2rem, 3.6vw, 2.875rem);       /* 32-46 px */
  --text-display: clamp(2.125rem, 3.7vw, 3.125rem); /* 34-50 px */

  --leading-display: 1.1;
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-body: 1.55;           /* the V6 default */
  --leading-relaxed: 1.6;         /* long legal answer body */

  /* D4: V6 uses 400 and 500 only; emphasis is 500. The old names stay for back-compat. */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-strong: 500;
  --weight-semibold: var(--weight-strong);
  --weight-bold: var(--weight-strong);

  --tracking-display: -0.02em;
  --tracking-tight: -0.015em;     /* large headings only */
  --tracking-heading: -0.01em;    /* h1-h4 */
  --tracking-kicker: 0.08em;      /* uppercase eyebrows / labels */

  /* ================= Spacing (4px base) ================= */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;

  /* ================= Radii (V6 8/10/16/24/32) ================= */
  --radius-xs: 6px;              /* badges, focus */
  --radius-sm: 8px;              /* tags, chips, menu items */
  --radius-md: 10px;             /* wells, source rows, inputs */
  --radius-icon: 12px;           /* 44/52px icon boxes */
  --radius-lg: 16px;             /* cards, composer, menus */
  --radius-xl: 24px;             /* tiers, doc/answer card */
  --radius-2xl: 32px;            /* auth/start card */
  --radius-pill: 999px;          /* buttons, header bar, nav links */
  --r-sm: var(--radius-sm);
  --r-btn: var(--radius-md);
  --r-card: var(--radius-lg);
  --r-lg: var(--radius-xl);

  /* ================= Elevation (V6 ladder; plain cards take --edge and no shadow) ======= */
  --emboss: 0 0 #0000;           /* retired; stays valid inside shadow lists */
  --shadow-1: 0 1px 2px rgba(11, 11, 11, 0.06), 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-2: 0 2px 4px rgba(11, 11, 11, 0.07), 0 6px 16px rgba(0, 0, 0, 0.08);
  --shadow-3: 0 4px 8px rgba(11, 11, 11, 0.08), 0 12px 28px -2px rgba(0, 0, 0, 0.14);
  --shadow-card: var(--shadow-3); /* documents only */
  --shadow-pill: 0 10px 40px -12px rgba(21, 19, 15, 0.16), 0 2px 8px -2px rgba(21, 19, 15, 0.08);
  --shadow-pill-stuck: 0 14px 44px -12px rgba(21, 19, 15, 0.22), 0 2px 8px -2px rgba(21, 19, 15, 0.08);
  --shadow-lift: 0 12px 28px rgba(21, 19, 15, 0.14);         /* button hover */
  --shadow-lift-accent: 0 12px 28px rgba(122, 46, 42, 0.35); /* primary hover */
  --sh-md: var(--shadow-2);
  --sh-lg: var(--shadow-3);
  --glass: rgba(255, 255, 255, 0.88);
  --glass-stuck: rgba(255, 255, 255, 0.96);
  /* Focus: one outline recipe (width/offset/colour), the vy-base :focus-visible rule. */
  --focus-color: var(--accent);
  --focus-width: 2px;
  --focus-offset: 2px;

  /* ================= Motion (V6, D6) ================= */
  --ease: cubic-bezier(0.165, 0.84, 0.44, 1);
  --dur-fast: 200ms;             /* hover colour and transform */
  --dur: 250ms;                  /* card lift, ui */
  --dur-slow: 300ms;             /* accordion */
  --dur-reveal: 600ms;           /* scroll reveal (public pages only) */
  --ease-out: var(--ease);
  --ease-standard: var(--ease);
  --lift: -2px;                  /* hover translateY for buttons and card links */

  /* Semantic motion layer (Правки №7, 2026-07-11) — универсальная система
     анімацій: name the INTENT, alias the primitive. New surfaces consume
     these; the raw --dur-* and --ease-* primitives above stay pinned. */
  --motion-dur-ui: var(--dur);            /* open/close, toggles, underlines */
  --motion-dur-reveal: var(--dur-slow);   /* entrances, section reveals */
  --motion-dur-hero: 650ms;               /* one-time page-load hero entrance */
  --motion-ease-enter: cubic-bezier(0.22, 0.7, 0.25, 1); /* entrance curve */
  --motion-rise: 14px;                    /* standard entrance translateY */

  /* ================= Z-index ladder ================= */
  --z-base: 1;
  --z-popover: 40;               /* menus and popovers: the value in effect before S01 */
  --z-sticky: 50;
  --z-topbar: 100;
  --z-backdrop: 200;
  --z-drawer: 210;
  --z-toast: 300;

  /* ================= Layout frame + controls ================= */
  --container: 1120px;
  --content-max: var(--container);
  --pad: clamp(20px, 4vw, 32px);
  --header-h: 60px;
  --header-offset: 88px;         /* public pages: scroll-padding-top under the header pill */
  --section-y: 64px;
  --grid-gap: 12px;
  --measure: 70ch;               /* comfortable legal prose measure */
  --composer-focus-line: var(--accent);
  --meter-track: #edebe5;         /* relevance track */
  --meter-fill-start: #8c857a;    /* relevance fill gradient start (→ ink) */

  /* Project category dots — warm-shifted ladder (the old saturated hues fought the paper). */
  --cat-sapphire: #56688a;
  --cat-emerald: #2c6e49;
  --cat-amber: #9a7b45;
  --cat-violet: #6e5a7e;
  --cat-rose: #8b3a30;
  --cat-teal: #0d6966;
  --rail-w: 300px;
  --control-h: 40px;
  --control-h-sm: 34px;
  --letterhead-rule: var(--accent); /* oxblood issued-document top-rule */

  /* Atmosphere: V6 has no paper grain; the names stay so their consumers resolve. */
  --paper-noise: none;
  --paper-grid-line: transparent;
  --paper-wash: transparent;
  --grid-cell: 32px;

  /* ================= Component knobs: one knob, one recipe (spec 060 §1.2) ================= */
  --btn-h: 40px;
  --btn-h-sm: 34px;
  --btn-h-lg: 50px;
  --btn-pad-x: 22px;
  --btn-pad-x-sm: 16px;
  --btn-pad-x-lg: 34px;
  --btn-font: var(--text-ui);
  --btn-weight: var(--weight-regular);
  --btn-radius: var(--radius-pill);
  --btn-outline-line: var(--ink);
  --field-h: 44px;
  --field-h-dense: 36px;
  --field-radius: var(--radius-md);
  --card-radius: var(--radius-lg);
  --card-pad: 20px;
  --card-pad-dense: 16px;
  --doc-radius: var(--radius-xl);
  --doc-shadow: var(--shadow-card);
  --chip-h: 28px;
  --chip-radius: var(--radius-sm);
  --nav-row-h: 36px;
  --nav-row-h-dense: 32px;
  --tap-min: 0px;                 /* the smallest box of a small icon control; 44 px on touch */
  --nav-row-radius: var(--radius-pill);
  --modal-radius: var(--radius-xl);
  --modal-pad: 24px;
  --tip-bg: var(--dark);           /* the rail tooltip: a small dark pill (workspace-sidebar.css) */
  --tip-text: var(--dark-heading);
}

/* ====================================================================== */
/* Dark theme — derived from the V6 band palette (D5). Colour/surface/    */
/* elevation only. Aliases (--line*, --cta-icon, --ink-soft) are not      */
/* repeated: they follow their dark targets. Screen                       */
/* only: paper always prints light (D22, S18); drop @media to print dark. */
/* ====================================================================== */
@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;

    --ink: #ffffff;
    --ink-strong: #ffffff;
    --text: #f0efec;
    --muted: #9a9791;
    --faint: var(--muted);
    --ring: rgba(255, 255, 255, 0.1);
    --ring-2: rgba(255, 255, 255, 0.16);
    --ring-3: rgba(255, 255, 255, 0.28);
    --line-soft: #262319;
    --field-border: #57503f;
    --field-ring: rgba(255, 255, 255, 0.4);
    --hover-wash: rgba(255, 255, 255, 0.05);
    --press-wash: rgba(255, 255, 255, 0.04);
    --meta-dot: #57503f;
    --atom-dot: rgba(236, 231, 220, 0.12);
    --atom-dot-strong: rgba(236, 231, 220, 0.22);
    --paper: #161412;
    --paper-raised: #1c1a15;
    --panel: #1d1a17;
    --panel-alt: #22201e;
    --panel-sunken: #22201e;
    --panel-deep: #292725;
    --dark-band: var(--panel-deep); /* D12 amended: a --dark band would vanish on the dark page */
    --tip-bg: var(--panel-deep);    /* the dark pill would vanish on the dark page too */
    --surface: var(--panel);
    --overlay: rgba(0, 0, 0, 0.6);

    --accent: #c97f72;
    --accent-strong: #d89a8f;
    --accent-bright: #e2afa5;
    --accent-soft: #33211e;
    --accent-ink: #d89a8f;
    --accent-line: #543730;
    --accent-contrast: #1b120f;

    /* Primary action inverts to cream so it stays the brightest object (V6 .btn-white on a band). */
    --cta: #ece7dc;
    --cta-hover: #f7f4ec;
    --cta-line: #f7f4ec;
    --cta-line-hover: #ffffff;
    --cta-contrast: #1b1814;
    --link: #d89a8f;
    --link-strong: #e2afa5;
    --link-visited: #c9a88f;

    --ok: #66b08a;
    --ok-strong: #83c2a1;
    --ok-soft: #17281e;
    --ok-line: #2e4a3a;
    --warn: #d3b678;
    --warn-strong: #e0c791;
    --warn-soft: #2a2414;
    --warn-line: #4d4124;
    --danger: #dc8f82;
    --danger-strong: #e6a599;
    --danger-soft: #2c1815;
    --danger-line: #4d2c26;
    --info: #c0ab8a;
    --info-strong: #d1bfa2;
    --info-soft: #262015;
    --info-line: #453a26;
    --meta: #a29b8c;
    --meta-strong: #bcb5a6;
    --meta-soft: #23201a;
    --meta-line: #3d382e;
    --on-status: #14120e;

    --green: #66b08a;
    --red: #dc8f82;
    --amber: #d3b678;
    --blue: #c0ab8a;

    --shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45);
    --shadow-2: 0 1px 3px rgba(0, 0, 0, 0.5), 0 4px 12px -4px rgba(0, 0, 0, 0.5);
    --shadow-3: 0 2px 6px rgba(0, 0, 0, 0.5), 0 18px 40px -16px rgba(0, 0, 0, 0.7);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 24px -10px rgba(0, 0, 0, 0.55);
    --shadow-pill: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 22px -10px rgba(0, 0, 0, 0.55);
    --shadow-pill-stuck: 0 1px 2px rgba(0, 0, 0, 0.55), 0 10px 26px -10px rgba(0, 0, 0, 0.65);
    --shadow-lift: 0 12px 28px rgba(0, 0, 0, 0.5);
    --shadow-lift-accent: var(--shadow-lift);
    --glass: rgba(29, 26, 23, 0.88);
    --glass-stuck: rgba(29, 26, 23, 0.96);

    --meter-track: #353128;
    --meter-fill-start: #7f7a6e;

    --cat-sapphire: #8fa3c9;
    --cat-emerald: #66b08a;
    --cat-amber: #c2a05e;
    --cat-violet: #a08cb3;
    --cat-rose: #dc8f82;
    --cat-teal: #4fa3a0;
  }
}

/* Honour an explicit light choice even if the OS is dark (set by theme-init). */
:root[data-theme="light"] {
  color-scheme: light;
}

/* Light islands (D13, critic C10): paper stays white in both themes and its content reads the invariant
   --doc-* values. Paint only (each paper keeps its own layout); a focus ring sits inside the paper. */
.vy-doc-paper,
.working-copy-paper,
.answer-draft-document {
  --paper: var(--doc-paper);
  --paper-raised: var(--doc-paper);
  --panel: var(--doc-paper);
  --surface: var(--doc-paper);
  --panel-alt: var(--doc-sunken);
  --panel-sunken: var(--doc-sunken);
  --ink: var(--doc-ink);
  --ink-strong: var(--doc-ink);
  --text: var(--doc-ink);
  --ink-soft: var(--doc-ink);
  --muted: var(--doc-muted);
  --line: var(--doc-line);
  --line-strong: var(--doc-line);
  --ring: var(--doc-line);
  --ring-2: var(--doc-line);
  --warn: var(--doc-warn);
  --warn-strong: var(--doc-warn);
  --amber: var(--doc-warn);
  --warn-soft: var(--doc-warn-soft);
  --warn-line: var(--doc-warn-soft);
  --btn-outline-line: var(--doc-ink);
  --accent: var(--doc-focus);
  --link: var(--doc-focus);
  --link-strong: var(--doc-focus);
  --focus-color: var(--doc-focus);
  color: var(--doc-ink);
  background: var(--doc-paper);
  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
    --dur-slow: 0ms;
    --dur-reveal: 0ms;
  }
}

/* Touch screens: every control is at least 44 px (D26). Buttons, nav rows and dense fields follow
   their knobs; the small ghost icons keep their glyph and grow to --tap-min. */
@media (pointer: coarse) {
  :root {
    --btn-h: 44px;
    --btn-h-sm: 44px;
    --nav-row-h: 44px;
    --nav-row-h-dense: 44px;
    --field-h-dense: 44px;
    --tap-min: 44px;
  }
}