/* ongly design tokens, redesign v3 "Bulut glass" (2026-11-09), in three layers.
   1. Primitives: raw values, never used by components directly.
   2. Semantic roles: what a value is for. ongly has its own palette now: cloud grey, jet black and
      one violet accent, on a dot grid with frosted-glass surfaces. Light or dark follows Telegram,
      or the user's choice in Profile.
   3. Component values: the few numbers a component owns.
   Event colours were checked with a Machado 2009 colour-blind simulation (CIE76 dE): deleted red vs
   edited ocean blue stays apart for protan, deutan and tritan readers (worst dE 46 light, 39 dark),
   and edited stays apart from the violet accent (worst dE 25 light, 37 dark). */

:root {
  /* 1. Primitives */
  --grey-100: #e9ecef;
  --grey-300: #cdd2d8;
  --ink-900: #111316;
  --violet-500: #7b4dff;
  --violet-600: #6436e8;
  --violet-300-dark: #b39dff;
  --red-500: #e5484d;
  --red-700: #b3263a;
  --red-400-dark: #ff6b76;
  --red-200-dark: #ff9aa2;
  --ocean-600: #0b6e99;
  --ocean-300-dark: #5cc8e8;
  --ocean-200-dark: #9adcf2;
  --gold-500: #e8a800;
  --white: #ffffff;

  /* Categorical order for "what gets deleted", from the dataviz reference palette */
  --cat-1: #2a78d6; --cat-2: #eb6834; --cat-3: #1baf7a; --cat-4: #eda100; --cat-5: #e87ba4; --cat-6: #8a8a8a;

  /* 2. Semantic roles: light */
  --bg: var(--grey-100);
  --dot: var(--grey-300);
  --surface-solid: #ffffff;
  --surface: rgba(255, 255, 255, 0.62);
  --surface-strong: rgba(255, 255, 255, 0.88);
  --glass-edge: rgba(255, 255, 255, 0.92);
  --ink: var(--ink-900);
  --ink-2: #33373d;
  --muted: #5e646b;
  --line: rgba(17, 19, 22, 0.08);
  --fill: rgba(17, 19, 22, 0.05);
  --fill-strong: rgba(17, 19, 22, 0.09);
  --solid: var(--ink-900);
  --on-solid: #ffffff;
  --accent: var(--violet-500);
  --accent-ink: #ffffff;
  --accent-strong: var(--violet-600);
  --link: var(--violet-600);
  --accent-soft: rgba(123, 77, 255, 0.14);
  --danger: #c42b36;
  --on-danger: #ffffff;

  --deleted: var(--red-500);
  --deleted-ink: var(--red-700);
  --deleted-soft: rgba(229, 72, 77, 0.13);
  --edited: var(--ocean-600);
  --edited-ink: var(--ocean-600);
  --edited-soft: rgba(11, 110, 153, 0.13);
  --star: var(--gold-500);
  --scrim: rgba(17, 19, 22, 0.32);
  --material: rgba(233, 236, 239, 0.74);
  --material-edge: rgba(17, 19, 22, 0.08);
  --bar: rgba(17, 19, 22, 0.9);
  --bar-on: #ffffff;
  --bar-off: #9aa0a8;
  --shadow: rgba(17, 19, 22, 0.35);
  --glow-alpha: 0.26;
  --knob: #ffffff; /* the selected option in a segmented control */
  --header-hex: #e9ecef; /* Telegram's header and background colour, which needs a plain hex */

  /* Type. Self-hosted in fonts/fonts.css. The serif means one thing only: words someone took back. */
  --font-ui: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-said: "Lora", ui-serif, "New York", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --t-large: 2.125rem;   /* 34, large titles */
  --t-title: 1.375rem;   /* 22, sheet and section titles */
  --t-said-hero: 1.5625rem; /* 25, the latest catch */
  --t-said: 1rem;        /* 16, recovered words in rows */
  --t-body: 1rem;        /* 16 */
  --t-sub: 0.9375rem;    /* 15 */
  --t-foot: 0.8125rem;   /* 13 */
  --t-mono: 0.75rem;     /* 12, mono labels and times; nothing smaller */

  /* Space: a 4px rhythm */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --gutter: var(--s-4);

  /* Radius by hierarchy */
  --r-hero: 28px;   /* the latest catch, plan cards */
  --r-group: 22px;  /* grouped lists and cards */
  --r-control: 16px;
  --r-sheet: 30px;
  --r-pill: 999px;

  /* Motion: strong custom curves */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.45, 0.64, 1);
  --d-press: 120ms;
  --d-fast: 160ms;
  --d-push: 420ms;
  --d-rise: 560ms;

  /* 3. Component values */
  --tap: 44px;
  --tabbar-h: 58px;
  --tabbar-gap: 18px;
  --nav-h: 48px;
  --blur: 22px;
  --safe-top: calc(max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px)) + var(--tg-content-safe-area-inset-top, 0px));
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px));
  color-scheme: light;
}

/* Dark: jet black with the same violet; event colours step up for the dark surface */
:root[data-scheme="dark"] {
  --bg: #0e1013;
  --dot: #23272d;
  --surface-solid: #1a1d22;
  --surface: rgba(32, 35, 40, 0.62);
  --surface-strong: rgba(38, 41, 47, 0.92);
  --glass-edge: rgba(255, 255, 255, 0.08);
  --ink: #f1f3f5;
  --ink-2: #d0d4da;
  --muted: #9aa0a8;
  --line: rgba(255, 255, 255, 0.09);
  --fill: rgba(255, 255, 255, 0.06);
  --fill-strong: rgba(255, 255, 255, 0.11);
  --solid: #f1f3f5;
  --on-solid: #111316;
  --link: var(--violet-300-dark);
  --accent-soft: rgba(155, 123, 255, 0.18);
  --danger: #ff7a84;
  --on-danger: #111316;
  --deleted: var(--red-400-dark);
  --deleted-ink: var(--red-200-dark);
  --deleted-soft: rgba(255, 107, 118, 0.16);
  --edited: var(--ocean-300-dark);
  --edited-ink: var(--ocean-200-dark);
  --edited-soft: rgba(92, 200, 232, 0.16);
  --scrim: rgba(0, 0, 0, 0.55);
  --material: rgba(14, 16, 19, 0.74);
  --material-edge: rgba(255, 255, 255, 0.08);
  --bar: rgba(38, 41, 47, 0.94);
  --bar-off: #8a9099;
  --shadow: rgba(0, 0, 0, 0.6);
  --glow-alpha: 0.3;
  --knob: #3a3f47;
  --header-hex: #0e1013;
  --cat-1: #3987e5; --cat-2: #d95926; --cat-3: #199e70; --cat-4: #c98500; --cat-5: #d55181; --cat-6: #7a7a7a;
  color-scheme: dark;
}

/* Outside Telegram, for the preview: follow the system until the app sets a scheme */
@media (prefers-color-scheme: dark) {
  :root:not([data-scheme]) {
    --bg: #0e1013; --dot: #23272d; --surface-solid: #1a1d22; --surface: rgba(32, 35, 40, 0.62);
    --surface-strong: rgba(38, 41, 47, 0.92); --glass-edge: rgba(255, 255, 255, 0.08);
    --ink: #f1f3f5; --ink-2: #d0d4da; --muted: #9aa0a8; --line: rgba(255, 255, 255, 0.09);
    --fill: rgba(255, 255, 255, 0.06); --fill-strong: rgba(255, 255, 255, 0.11);
    --solid: #f1f3f5; --on-solid: #111316; --link: var(--violet-300-dark);
    color-scheme: dark;
  }
}

/* Glass falls back to solid surfaces when the device asks for less transparency, can't blur,
   or is a low-memory phone (the app sets data-lite) */
@media (prefers-reduced-transparency: reduce) {
  :root, :root[data-scheme] { --surface: var(--surface-solid); --surface-strong: var(--surface-solid); --material: var(--bg); --blur: 0px; }
}
:root[data-lite], :root[data-lite][data-scheme] { --surface: var(--surface-solid); --surface-strong: var(--surface-solid); --material: var(--bg); --blur: 0px; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root, :root[data-scheme] { --surface: var(--surface-solid); --surface-strong: var(--surface-solid); --material: var(--bg); }
}

@media (prefers-contrast: more) {
  :root, :root[data-scheme] { --line: color-mix(in srgb, var(--ink) 30%, transparent); --muted: var(--ink-2); --surface: var(--surface-solid); }
}