/* Студия W&T · design tokens — THE source for every studio app (ТЗ 1.2, раздел 2.2).
   Edit here only; tools/sync-tokens.sh copies this file into smm-planner/public/css/tokens.css
   (the calendar and clients live in the hub and read it directly). Apps link tokens.css first and keep
   only components in their own app.css. */

/* ---------- font: one for everything — Golos Text 400/500/600, own woff2 in /fonts (latin + cyrillic), no Google ---------- */
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/golos-text-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: "Golos Text"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/golos-text-latin-400-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: 500; font-display: swap; src: url(../fonts/golos-text-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: "Golos Text"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/golos-text-latin-500-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: 600; font-display: swap; src: url(../fonts/golos-text-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: "Golos Text"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/golos-text-latin-600-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; }

:root {
  --bg: #0F0F0E;         --panel: #161615;       --raised: #1C1C1A;     --sunken: #0B0B0A;
  --line: #242422;       --line-strong: #2F2F2C;
  --text: #ECEAE6;       --muted: #A3A09A;       --faint: #8A877F;
  --accent: #D4AF6A;     --accent-hi: #DFC08A;   --accent-ink: #17130B;
  --accent-soft: rgb(212 175 106 / .13);         --accent-line: rgb(212 175 106 / .42);
  --primary: #ECEAE6;    --primary-ink: #0F0F0E;
  --scrim: rgb(6 6 5 / .62);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / .35);
  --shadow: 0 2px 6px rgb(0 0 0 / .28), 0 18px 48px rgb(0 0 0 / .38);
  --st-draft: #928F87;   --st-ready: #7F9BC0;    --st-scheduled: #D4AF6A;
  --st-publishing: #D9A066; --st-published: #8FB08A; --st-error: #D9826F;
  --dir-1: #EE7A52; --dir-2: #9A8EF2; --dir-3: #2FBFA8; --dir-4: #E86DA6; --dir-5: #D9BE45;
  --dir-6: #5DA8E8; --dir-7: #C9A27A; --dir-8: #8FA36B; --dir-9: #B07CC6; --dir-10: #6E7B8B;
  --r-sm: 8px;  --r: 12px;  --r-lg: 16px;
  --ease: cubic-bezier(.22, .8, .24, 1);
  --t: 160ms;
  --sans: "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: var(--sans);  /* no serif in the studio any more: anything still pointing here gets Golos */
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* the drive's timecodes; the studio ships no mono file */
  --bar-h: 56px;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #F7F6F3;         --panel: #FFFFFF;       --raised: #FFFFFF;     --sunken: #EFEEEA;
  --line: #E6E4DF;       --line-strong: #D6D3CC;
  --text: #181715;       --muted: #5F5C56;       --faint: #6E6B64;
  --accent: #8A6A3B;     --accent-hi: #74582F;   --accent-ink: #FFFFFF;
  --accent-soft: rgb(138 106 59 / .10);          --accent-line: rgb(138 106 59 / .38);
  --primary: #181715;    --primary-ink: #FFFFFF;
  --scrim: rgb(24 23 21 / .32);
  --shadow-sm: 0 1px 2px rgb(24 23 21 / .06);
  --shadow: 0 2px 6px rgb(24 23 21 / .05), 0 16px 40px rgb(24 23 21 / .10);
  --st-draft: #65625B;   --st-ready: #35659C;    --st-scheduled: #766031;
  --st-publishing: #8C541F; --st-published: #366D3D; --st-error: #A84129;
  --dir-1: #B84A1D; --dir-2: #5E4FD0; --dir-3: #0B7A68; --dir-4: #B8346F; --dir-5: #7D6A0A;
  --dir-6: #1B63A6; --dir-7: #7F5F36; --dir-8: #546B2F; --dir-9: #823FA0; --dir-10: #4A5666;
  color-scheme: light;
}

/* an app, not a page: no double-tap delay, no text inflation, and no zoom on focus (iOS zooms any field under 16px) */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: manipulation; }
@media (max-width: 760px) { input, textarea, select { font-size: 16px !important; } }

/* ---- page transitions (all apps share one origin): the frame stays, the content slides or fades ---- */
html { background: var(--bg); }
/* under the clock in the installed app (status bar «black-translucent»): one variable, so a test can put 47px in it */
:root { --safe-top: env(safe-area-inset-top, 0px); }
@view-transition { navigation: auto; }
.st-tabbar { view-transition-name: studio-tabbar; }
.st-head, .studio-head { view-transition-name: studio-head; }
::view-transition-group(studio-tabbar), ::view-transition-group(studio-head) { animation-duration: 0s; }
/* only a short fade: a slide of the whole page is a heavy snapshot and stutters on an iPhone 14 */
::view-transition-old(root) { animation: 110ms ease both st-fade-out; }
::view-transition-new(root) { animation: 160ms ease both st-fade-in; }
@keyframes st-fade-in { from { opacity: 0; } }
@keyframes st-fade-out { to { opacity: 0; } }
/* live blur of what scrolls under a bar costs a frame every frame on the phone: the bars are solid enough without it */
@media (max-width: 760px) { *, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 1ms !important; transform: none !important; }
}