/* SPDX-FileCopyrightText: 2026 Veydan Project */
/* SPDX-License-Identifier: LicenseRef-PolyForm-Perimeter-1.0.1 */

/* ============================================================================
 * Veydan Space — design tokens (single source of truth)
 * Imported by each shell (DesktopShell, MobileShell) and by StartErrorScreen.
 *
 * Layers:
 *   :root              — theme-independent scales (spacing, type, radius, z, size, motion)
 *   palettes/*.css     — the colour tokens: <html data-theme="dark|light"> picks the
 *                        theme, data-palette the palette (none = quiet, the default)
 *   [data-theme] {aliases} — compatibility aliases mapping legacy/leaked names
 *                        onto canonical tokens, so stray var() refs stop
 *                        silently collapsing to transparent / inherited.
 *
 * Naming canon: --bg / --bg-2 / --chrome / --surface / --surface-2 / --surface-3 / --border / --border-2
 *               --text / --text-2 / --text-3 / --accent / --success / --danger / --warn-*
 * Do NOT introduce new ad-hoc names in components — extend this file instead.
 * ========================================================================== */

@import './palettes/quiet.css';

:root {
  /* ── Fonts ── (bundled via @fontsource-variable and core/fonts/cjk.css, imported by the shells)
   * --font-cjk draws Chinese, Japanese and Korean where the system has no such
   * font; its order picks the glyphs of the UI's language for the ideographs
   * the three share (:lang below). */
  --font-cjk:  'Veydan SC', 'Veydan JP', 'Veydan KR';
  --font-ui:   'Manrope Variable', var(--font-cjk), -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono Variable', 'Fira Code', 'Consolas', var(--font-cjk), monospace;

  /* ── Spacing scale — 4px grid ── */
  --sp-0:   0;
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;

  /* ── Type scale ── (snap raw sizes to the nearest step; see STYLEGUIDE)
     «Quiet Glass»: micro and caption 12, secondary 13, control 14, body 15,
     section 16, dialog 18, title 20, H1 28. */
  --fs-3xs:  0.5rem;    /* 8px the time under a message: as tall as its ticks */
  --fs-2xs:  0.75rem;   /* 12px micro: counts, tiny labels, dot text */
  --fs-xs:   0.75rem;   /* 12px captions, chips, table meta */
  --fs-sm:   0.8125rem; /* 13px secondary text, hints */
  --fs-base: 0.875rem;  /* 14px — controls (matches global input/button) */
  --fs-body: 0.9375rem; /* 15px — long text: messages, descriptions, note body */
  --fs-md:   1rem;      /* 16px emphasis / section and card titles */
  --fs-lg:   1.125rem;  /* 18px dialog titles, phone app bar */
  --fs-xl:   1.25rem;   /* 20px page / list / column titles */
  --fs-2xl:  1.75rem;   /* 28px H1, hero / page headers */
  --fs-3xl:  2rem;      /* 32px note reader title */

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --lh-tight: 1.2;
  --lh-base:  1.5;
  --lh-body:  1.4667;  /* 22px on 15px body text */

  /* ── Radius ── (theme-independent; «Quiet Glass» scale) */
  --radius-xs:    4px;   /* small kind tiles, checkboxes */
  --radius-badge: 6px;   /* counters, kind chips */
  --radius-sm:    8px;   /* status pills, icon tiles, menu items, 32px buttons */
  --radius:       10px;  /* buttons / inputs / icon buttons / toasts */
  --radius-field: 10px;  /* tall form fields (same as --radius) */
  --radius-md:    12px;  /* nested cards, menus, popovers */
  --radius-lg:    16px;  /* list rows, tables, small tiles */
  --radius-head:  18px;  /* floating header plates */
  --radius-pane:  20px;  /* floating panes: module columns, panels */
  --radius-card:  24px;  /* cards, home tiles, dialogs, call windows, sheets */
  --radius-bar:   26px;  /* phone floating bars: tab bar, composer */
  --radius-pill:  999px; /* chips, search fields, toggles, pills */

  /* ── Layout heights ── */
  --topbar-h: 64px;
  /* Where a full-window overlay (dialog, drawer, palette) may be. The desktop
     window frame sets both at run time (core/desktop/WindowFrame.svelte):
     inside the rounded panel and below its title bar. */
  --overlay-inset: 0px;
  --overlay-radius: 0px;
  --dock-h:   36px;
  --bar-h:    36px;   /* ssh session bar / inspector bar / inspector rulers offset */
  --control-h: 40px;  /* высота контролов: кнопки, поиск, select в панелях фильтров */
  --control-h-sm: 32px; /* маленькие кнопки */
  --control-h-lg: 44px; /* поля форм в drawer'ах, сегмент-кнопки, касание */

  /* ── Content rail (app width — shared by all routes + topbar) ── */
  --page-max:        1680px;  /* content rail of a page: the window's width up to this */
  --page-max-narrow: 820px;   /* reading/forms column (settings) */
  --rail-pad-x:      var(--sp-6); /* the page's inset from the window's sides */

  /* ── Panel / dialog widths ── */
  --drawer-w:    440px;  /* profile detail */
  --drawer-w-md: 480px;  /* create / edit profile forms */
  --drawer-w-lg: 520px;  /* content-heavy drawers (notes / ssh / raw data) */
  --dialog-w:    440px;

  /* ── Z-index scale (was 20 → 9999 ad-hoc) ── */
  --z-base:      0;
  --z-sticky:    10;   /* topbar */
  --z-dock:      20;
  --z-panel:     50;   /* slot / floating panels */
  --z-drawer:    100;  /* right-side drawers */
  --z-modal:     200;  /* centered dialogs */
  --z-popover:   500;  /* dropdowns / menus */
  --z-toast:     900;
  --z-tooltip:   950;
  --z-inspector: 8000; /* inspector overlay family */
  --z-max:       9999;

  /* ── Motion ── */
  --dur-press: 0.1s;
  --dur-fast: 0.15s;
  --dur-base: 0.2s;
  --dur-drawer: 0.28s;
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-drawer: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ── Glass ── (the colours are the palette's) */
  --pane-filter:  blur(24px) saturate(130%);
  --glass-filter: blur(20px) saturate(160%);
}

/* The ideographs Chinese, Japanese and Korean share take the glyphs of the UI's language. */
:root:lang(ja) { --font-cjk: 'Veydan JP', 'Veydan SC', 'Veydan KR'; }
:root:lang(ko) { --font-cjk: 'Veydan KR', 'Veydan SC', 'Veydan JP'; }

/* Resolved where a theme is set, so they follow its palette. */
[data-theme] {
  /* The window: four soft spots of glow over the base colour; the panes take
     their colour from it. Painted as `background: var(--bg-image), var(--bg)`. */
  --bg-image:
    radial-gradient(circle 520px at 200px 160px, var(--glow-1), transparent),
    radial-gradient(circle 460px at calc(100% - 150px) 190px, var(--glow-2), transparent),
    radial-gradient(circle 500px at calc(100% - 470px) calc(100% - 90px), var(--glow-3), transparent),
    radial-gradient(circle 460px at 66% 60%, var(--glow-1), transparent);

  /* ── Compatibility aliases → canonical tokens ──
     These names leaked in from a second naming scheme and were referenced
     WITHOUT fallbacks, so they rendered as transparent/inherited. Mapping
     them here fixes the current render; components should migrate to the
     canonical names over time (Phase 1). */
  --text-1:            var(--text);
  --text-4:            var(--text-3);
  --text-muted:        var(--text-2);
  --border-strong:     var(--border-2);
  --warn:              var(--warn-text);
  --color-warning:     var(--warn-text);
  --color-bg-soft:     var(--surface);
  --color-border-soft: var(--border);
  --color-brand-500:   var(--accent);
  --color-text-main:   var(--text);
  --color-text-muted:  var(--text-2);
}

/* No glass where the system asks for less transparency, nor where the
   engine draws no backdrop filter: the panes and layers are opaque. */
@media (prefers-reduced-transparency: reduce) {
  [data-theme] {
    --pane: var(--surface);
    --pane-head: var(--surface);
    --pane-strong: var(--surface);
    --glass-bg: var(--surface);
    --glass-bg-raised: var(--surface-2);
    --glass-bar: var(--bg-2);
    --pane-filter: none;
    --glass-filter: none;
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-theme] {
    --glass-bg: var(--surface);
    --glass-bg-raised: var(--surface-2);
    --glass-bar: var(--bg-2);
  }
}