/* Copyright © 2026 MELDIX. TrioSoft. All rights reserved. */
/* ==========================================================================
   TrioSoft OS — design tokens & typefaces (v17)
   The site is a desktop operating system: wallpaper, menu bar, windows, dock.
   Brand triad (from the T-mark): coral · violet · mint.
   ========================================================================== */

@font-face { font-family: 'Geologica'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/os/fonts/geologica-cyrillic-full-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Geologica'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/os/fonts/geologica-latin-full-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('/os/fonts/golos-text-cyrillic-wght-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('/os/fonts/golos-text-latin-wght-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/os/fonts/ibm-plex-mono-cyrillic-400-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/os/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/os/fonts/ibm-plex-mono-cyrillic-500-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/os/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/os/fonts/ibm-plex-mono-cyrillic-600-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/os/fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }

:root {
  --os-ui: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --os-display: 'Geologica', 'Golos Text', system-ui, sans-serif;
  --os-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;

  /* brand triad */
  --os-coral: #ff5a36;
  --os-coral-rgb: 255, 90, 54;
  --os-violet: #6c4cff;
  --os-violet-rgb: 108, 76, 255;
  --os-mint: #10c59a;
  --os-mint-rgb: 16, 197, 154;
  --os-amber: #ffb23f;

  --os-accent: var(--os-violet);
  --os-accent-rgb: var(--os-violet-rgb);
  --os-success: #0fb489;
  --os-warning: #e7930c;
  --os-danger: #f0432a;

  --os-r-xs: 6px;
  --os-r-sm: 9px;
  --os-r-md: 12px;
  --os-r-win: 16px;
  --os-r-lg: 22px;
  --os-pill: 999px;

  --os-ease: cubic-bezier(.2, .8, .2, 1);
  --os-out: cubic-bezier(.16, 1, .3, 1);
  --os-spring: cubic-bezier(.34, 1.56, .64, 1);

  --os-bar-h: 38px;
  --os-dock-h: 74px;
  --os-content: 1240px;
  --os-gutter: clamp(12px, 3vw, 32px);

  /* DAY — warm paper desk */
  color-scheme: light;
  --os-wall: #ece6dc;
  --os-wall-a: rgba(255, 140, 100, .30);
  --os-wall-b: rgba(124, 96, 255, .26);
  --os-wall-c: rgba(30, 210, 160, .24);
  --os-window: #fffdf9;
  --os-pane: #f6f2ec;
  --os-pane-2: #efe9e1;
  --os-chrome: rgba(255, 252, 247, .72);
  --os-chrome-solid: #f9f6f1;
  --os-field: #ffffff;
  --os-hover: rgba(40, 26, 14, .055);
  --os-hover-2: rgba(40, 26, 14, .09);
  --os-line: rgba(44, 30, 18, .11);
  --os-line-2: rgba(44, 30, 18, .19);
  --os-ink: #1c1712;
  --os-ink-2: #594f45;
  --os-ink-3: #978b7f;
  --os-sel: rgba(108, 76, 255, .14);
  --os-win-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 0 0 1px rgba(44, 30, 18, .12), 0 24px 60px -24px rgba(60, 36, 10, .38), 0 6px 16px -8px rgba(60, 36, 10, .18);
  --os-pop-shadow: 0 0 0 1px rgba(44, 30, 18, .12), 0 30px 70px -20px rgba(60, 36, 10, .42);
  --os-soft-shadow: 0 1px 2px rgba(60, 36, 10, .06), 0 8px 22px -12px rgba(60, 36, 10, .22);
}

html[data-theme="dark"] {
  /* NIGHT — plum dusk desk */
  color-scheme: dark;
  --os-wall: #141118;
  --os-wall-a: rgba(255, 90, 54, .20);
  --os-wall-b: rgba(108, 76, 255, .26);
  --os-wall-c: rgba(16, 197, 154, .14);
  --os-window: #1d1a22;
  --os-pane: #18161d;
  --os-pane-2: #221f28;
  --os-chrome: rgba(30, 27, 36, .72);
  --os-chrome-solid: #1f1c25;
  --os-field: #151318;
  --os-hover: rgba(255, 240, 225, .06);
  --os-hover-2: rgba(255, 240, 225, .1);
  --os-line: rgba(255, 238, 220, .09);
  --os-line-2: rgba(255, 238, 220, .17);
  --os-ink: #f5efe8;
  --os-ink-2: #bdb2a7;
  --os-ink-3: #82786f;
  --os-sel: rgba(140, 116, 255, .22);
  --os-accent: #8b72ff;
  --os-accent-rgb: 139, 114, 255;
  --os-win-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 0 0 1px rgba(0, 0, 0, .55), 0 0 0 2px rgba(255, 238, 220, .06), 0 30px 70px -24px rgba(0, 0, 0, .8);
  --os-pop-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 0 0 2px rgba(255, 238, 220, .07), 0 30px 80px -20px rgba(0, 0, 0, .85);
  --os-soft-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 26px -14px rgba(0, 0, 0, .7);
}

/* Legacy vocabulary → TrioSoft OS. !important beats palette values older
   scripts still write inline on <html>, so every page speaks one language. */
html, html[data-theme="light"], html[data-theme="dark"] {
  --paper: var(--os-wall) !important;
  --paper-2: var(--os-pane) !important;
  --background-solid: var(--os-wall) !important;
  --solid: var(--os-window) !important;
  --surface: var(--os-window) !important;
  --surface-solid: var(--os-window) !important;
  --surface-2: var(--os-pane) !important;
  --panel: var(--os-window) !important;
  --panel-soft: var(--os-pane) !important;
  --mat: var(--os-window) !important;
  --mat-thick: var(--os-window) !important;
  --ink: var(--os-ink) !important;
  --ink-1: var(--os-ink) !important;
  --ink-2: var(--os-ink-2) !important;
  --ink-3: var(--os-ink-3) !important;
  --muted: var(--os-ink-3) !important;
  --text-muted: var(--os-ink-3) !important;
  --text-secondary: var(--os-ink-2) !important;
  --fill: var(--os-hover) !important;
  --fill-2: var(--os-hover-2) !important;
  --edge: var(--os-line) !important;
  --edge-2: var(--os-line-2) !important;
  --edge-strong: var(--os-line-2) !important;
  --line: var(--os-line) !important;
  --line-strong: var(--os-line-2) !important;
  --accent: var(--os-accent) !important;
  --accent-rgb: var(--os-accent-rgb) !important;
  --accent-2: var(--os-coral) !important;
  --s1: var(--os-accent) !important;
  --s1-rgb: var(--os-accent-rgb) !important;
  --s2: var(--os-coral) !important;
  --tint: var(--os-accent) !important;
  --tint-soft: var(--os-sel) !important;
  --spec: none !important;
  --sh-1: var(--os-soft-shadow) !important;
  --sh-2: var(--os-win-shadow) !important;
  --sh-3: var(--os-pop-shadow) !important;
  --green: var(--os-success) !important;
  --red: var(--os-danger) !important;
  --orange: var(--os-warning) !important;
  --success: var(--os-success) !important;
  --warning: var(--os-warning) !important;
  --danger: var(--os-danger) !important;
  --sf: var(--os-ui) !important;
  --sf-mono: var(--os-mono) !important;
  --ts-font: var(--os-ui) !important;
  --gentle: var(--os-ease) !important;
  --smooth: var(--os-ease) !important;
  --spring: var(--os-out) !important;
  --r-pill: var(--os-pill) !important;
  --r-sm: var(--os-r-sm) !important;
  --r-md: var(--os-r-md) !important;
  --r-lg: var(--os-r-win) !important;
  --r-xl: var(--os-r-win) !important;
  --blur: saturate(180%) blur(24px) !important;
  --ui-text: var(--os-ink) !important;
  --ui-muted: var(--os-ink-3) !important;
  --ui-soft: var(--os-ink-2) !important;
  --ui-line: var(--os-line) !important;
  --ui-line-strong: var(--os-line-2) !important;
  --ui-panel: var(--os-window) !important;
  --ui-bg: var(--os-wall) !important;
  --id-line: var(--os-line) !important;
  --id-line-strong: var(--os-line-2) !important;
  --id-focus: rgba(var(--os-accent-rgb), .45) !important;
  --id-panel-raised: var(--os-pane) !important;
  --studio-line: var(--os-line) !important;
  --studio-raised: var(--os-pane) !important;
  --gutter: var(--os-gutter) !important;
  --max: var(--os-content) !important;
  --gold: #e9a92b;
  --gold-rgb: 233, 169, 43;
}