/* Walls on Loop store, «Collection» (T-048; webapp/DESIGN.md v6; D-050 ... D-055): one dark scene «night» with a gold accent. The values are
   the tables of DESIGN.md; their machine copy is webapp/design/collection_tokens_v1.json, and tools/check_webapp.py compares this file with
   it (colours, contrast pairs, fonts) and checks that every variable here is used. Until BRANDBOOK_v2 the design system follows this file
   (DESIGN.md P-26). Only the dark theme, whatever Telegram's theme is (D-052 p.3): html[data-scheme] changes nothing here, and js/tg.js gives
   Telegram our ground and accent. */

/* ---- fonts: our own files (webapp/fonts, SIL OFL 1.1 next to them), never a third-party address (users in the EU) -----------------------
   fontsource cuts (Tektur, Geologica, Nunito): Latin and Cyrillic files load only when their letters are on the screen (unicode-range).
   The clock digits are a subset of Nunito 900 (U+0030-003A, U+002E). "≈" and the star come from the system font (DESIGN.md «Шрифты»). */
@font-face {
  font-family: "Tektur";
  src: url("../fonts/tektur-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  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: "Tektur";
  src: url("../fonts/tektur-cyrillic-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Tektur";
  src: url("../fonts/tektur-latin-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  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: "Tektur";
  src: url("../fonts/tektur-cyrillic-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Geologica";
  src: url("../fonts/geologica-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  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: "Geologica";
  src: url("../fonts/geologica-cyrillic-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Geologica";
  src: url("../fonts/geologica-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  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: "Geologica";
  src: url("../fonts/geologica-cyrillic-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Nunito Clock";
  src: url("../fonts/nunito-clock-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+002E, U+0030-003A;
}

/* ---- the one theme --------------------------------------------------------------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* colour (DESIGN.md «Цвет»): the wallpaper and its rarity glow carry the colour; gold only for the main action and the hall of fame */
  --ground: #0F1522;
  --home-glow: radial-gradient(130% 55% at 50% 0%, #1B2944 0%, rgba(15, 21, 34, 0) 70%);
  --surface: #172033;
  --surface-raised: #212C44;
  --line: rgba(238, 242, 250, 0.1);
  --ink: #EEF2FA;
  --ink-muted: #93A0BA;
  --accent: #F2C14E;
  --on-accent: #1A1405;
  --accent-ink: #F8D684;
  --ok: #6CCB8D;
  --warn: #F2C14E;
  --error: #FF7468;
  --scrim: rgba(8, 12, 20, 0.78);
  --on-scrim: #FFFFFF;
  --frame: #0A0F18;
  --plate: linear-gradient(rgba(8, 12, 20, 0), rgba(8, 12, 20, 0.92) 60%);
  --hall-bg: linear-gradient(135deg, #2C2512, #17130A 70%);
  --hall-ring: inset 0 0 0 1.5px rgba(242, 193, 78, 0.65), 0 12px 32px rgba(242, 193, 78, 0.12);
  --hall-sub: #CDBF98;
  --screen-off: #000;

  /* rarity (DESIGN.md «Свечение редкости»): the word and the label in --rarity-*, the rim in --rim-*, the inner light of the rim in
     --rim-glow-*; common has a quiet rim and no light */
  --rarity-legendary: #F2C14E;
  --rarity-epic: #FF8FA3;
  --rarity-rare: #62C2B0;
  --rarity-common: #A9A5AE;
  --rim-legendary: #F8D684;
  --rim-epic: var(--rarity-epic);
  --rim-rare: var(--rarity-rare);
  --rim-common: rgba(255, 255, 255, 0.13);
  --rim-glow-legendary: rgba(242, 193, 78, 0.62);
  --rim-glow-epic: rgba(255, 143, 163, 0.5);
  --rim-glow-rare: rgba(98, 194, 176, 0.45);

  /* the lock screen of a phone over a wallpaper (DESIGN.md v6 «Экран блокировки и часы»): the round buttons, the home bar, the two layers of
     the glass clock (the glass: a light gradient over the blurred wallpaper, cut by the digits; the edge: a thin fill and stroke under a mask) */
  --lock-btn: rgba(255, 255, 255, 0.16);
  --lock-btn-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 4px 14px rgba(0, 0, 0, 0.25);
  --lock-home: rgba(255, 255, 255, 0.92);
  --glass-light: linear-gradient(180deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.1) 55%, rgba(255, 255, 255, 0.22));
  --glass-shadow: rgba(0, 0, 24, 0.3);
  --edge-fill: rgba(255, 255, 255, 0.1);
  --edge-stroke: rgba(255, 255, 255, 0.62);
  --edge-mask: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0.7));

  /* the light of a raised tile and of a legendary wallpaper (DESIGN.md v6 «Главная», «Свечение»): the foil glint, the sweep over the
     picture, the glint running round the rim */
  --foil: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.5) 47%, rgba(160, 225, 255, 0.35) 50%, rgba(255, 190, 235, 0.35) 53%,
    transparent 60%);
  --sheen: linear-gradient(105deg, transparent 42%, rgba(255, 244, 214, 0.26) 50%, transparent 58%);
  --shine: conic-gradient(from 0deg, transparent 0 58%, rgba(255, 246, 214, 0.95) 70%, #F2C14E 76%, transparent 88% 100%);

  /* shadows: the language sheet floats; the posters of the hall-of-fame fan; text on a picture (the clock, the score on a tile) */
  --shadow-lift: 0 20px 60px rgba(0, 0, 0, 0.55);
  --shadow-fan: 0 0 0 1.5px #F2C14E, 0 6px 14px rgba(0, 0, 0, 0.55);
  --shadow-pic: 0 6px 14px rgba(0, 0, 0, 0.55); /* the picture on top of a pack's fan */
  --shadow-num: 0 1px 3px rgba(0, 0, 0, 0.85);

  /* type (DESIGN.md «Шрифты», «Шкала текста»): display - names, headings and numbers; text - the interface; clock - the lock-screen digits.
     Each style is a `font` shorthand; its tracking is a token of its own where the style has one. */
  --font-display: "Tektur", system-ui, sans-serif;
  --font-text: "Geologica", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-clock: "Nunito Clock", system-ui, sans-serif;
  --t-app: 800 23px/23px var(--font-display);
  --t-app-tracking: 0.01em;
  --t-count: 600 13px/13px var(--font-display);
  --t-hall: 800 23px/23px var(--font-display);
  --t-shelf: 800 19px/21px var(--font-display);
  --t-name: 800 19px/22px var(--font-display);
  --t-hero: 800 28px/32px var(--font-display);
  --t-bar: 800 18px/21px var(--font-display);
  --t-tight: -0.01em; /* the tracking of --t-name, --t-hero and --t-bar */
  --t-num: 800 14px/14px var(--font-display);
  --t-price: 600 13px/18px var(--font-display);
  --t-code: 600 12px/16px var(--font-display);
  --t-input: 600 16px/19px var(--font-text);
  --t-lead: 400 17px/24px var(--font-text);
  --t-body: 400 15px/22px var(--font-text);
  --t-label: 600 15px/20px var(--font-text);
  --t-chip: 600 13px/18px var(--font-text);
  --t-sugg: 600 14px/18px var(--font-text);
  --t-meta: 400 13px/18px var(--font-text);
  --t-plate: 600 11px/12px var(--font-text);
  --t-hint: 400 12.5px/16px var(--font-text);
  --t-hall-sub: 400 13px/17.5px var(--font-text);
  --t-clock: 900 100px/1 var(--font-clock); /* on a 300 px screen: a third of its width (the hero scales it with --lock-w) */
  --t-clock-tracking: -0.035em;

  /* spacing: a 4 px step; siblings are laid out with gap, not margins */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --gutter: 18px; /* the page gutter (DESIGN.md P-31) */

  /* radii; --radius-phone is a share of the screen's width (34 px on a 300 px screen): calc(width * var(--radius-phone)) */
  --radius-cover: 4px;
  --radius-fan: 6px;
  --radius-inner: 9px;
  --radius-chip: 10px;
  --radius-tile: 12px;
  --radius-ui: 14px;
  --radius-hall: 18px;
  --radius-panel: 28px;
  --radius-phone: 0.1133;
  --radius-pill: 999px;

  /* motion: the screen wakes up - fade up from the dark, ease out. js/motion.js ms() reads these. */
  --duration-press-in: 80ms;
  --duration-press-out: 220ms;
  --duration-micro: 120ms;
  --duration-small: 180ms;
  --duration-medium: 280ms;
  --duration-large: 380ms;
  --duration-wake: 600ms;
  --duration-hold: 400ms;
  --duration-sleep: 200ms;
  --duration-mark-rendering: 1600ms;
  --ease-wake: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-exit: cubic-bezier(0.3, 0, 1, 1);
  --ease-sleep: cubic-bezier(0.4, 0, 1, 1);

  /* roles of the store (DESIGN.md «Цвет», the line under the table) */
  --press-dim: color-mix(in srgb, var(--screen-off) 12%, transparent); /* a poster under the finger */
  --press-fill: color-mix(in srgb, var(--ink) 8%, transparent); /* one fill step under the finger */
  --hover-fill: color-mix(in srgb, var(--ink) 4%, transparent);
  --backdrop: color-mix(in srgb, var(--scrim) 60%, transparent); /* under the language sheet */

  /* safe areas: Telegram 8.0+ variables, then the browser's own */
  --safe-top: max(var(--tg-content-safe-area-inset-top, 0px), env(safe-area-inset-top, 0px));
  --safe-bottom: max(var(--tg-safe-area-inset-bottom, 0px), env(safe-area-inset-bottom, 0px));
  --safe-left: max(var(--tg-safe-area-inset-left, 0px), env(safe-area-inset-left, 0px));
  --safe-right: max(var(--tg-safe-area-inset-right, 0px), env(safe-area-inset-right, 0px));
}