/* Tone website tokens — the only token file the site loads.
   Colours: palette «Малина», values identical to design/tokens/colors.css (light :root and dark blocks, semantic
   aliases). Non-colour tokens: design/tokens/typography.css, spacing.css, keyboard.css and motion.css.
   Site adaptations: the brand/store type scale is in rem (px noted) so it follows the reader's text size, and
   --font-brand is a system stack (no remote or bundled webfonts).
   Theme: light on :root; dark follows prefers-color-scheme without JavaScript, and [data-theme] (set only by the
   optional toggle in src/app.mjs) overrides the system preference in either direction. */
:root{
  color-scheme:light;
  /* base palette */
  --raspberry-500:#C52C60;
  --raspberry-600:#7A0F37;
  --raspberry-700:#7A0F37;
  --raspberry-400:#FA618C;
  --raspberry-300:#FA9FB3;
  --raspberry-100:#FEE8EC;
  --cherry-700:#701033;
  --cherry-900:#69072E;
  --paper-100:#F9F4F6;
  --paper-200:#F0E9EC;
  --ink-900:#24111B;
  --ink-600:#604C55;
  --ink-400:#76676D;
  --ice-600:#1E3F97;
  --honey-600:#A0480A;
  --mint-600:#00745F;
  --danger-600:#A21C10;
  --danger-100:#FFEBE5;

  /* surfaces + text */
  --paper:#F9F4F6;
  --paper-2:#F0E9EC;
  --panel:#FFFFFF;
  --ink:#24111B;
  --ink-2:#604C55;
  --ink-3:#76676D;
  --line:#DED4D8;
  --line-2:#ECE6E8;

  /* brand */
  --brand:#C52C60;
  --brand-deep:#7A0F37;
  --brand-tint:#FEE8EC;
  --brand-lift:#FA9FB3;
  --on-brand:#FFFFFF;
  --on-dark:#FDF4F6;
  --on-hero:#7A0F37;
  --hero-bg:#C52C60;
  --hero-ink:#FFF8F9;
  --hero-ink-2:#FEEAEE;
  --hero-line:rgba(255,255,255,.28);

  /* tone triad — used ONLY for the three suggestion registers */
  --tone-cool:#1E3F97;
  --tone-warm:#A0480A;
  --tone-fun:#00745F;
  --tone-cool-bg:#E3ECFD;
  --tone-warm-bg:#FDE6D2;
  --tone-fun-bg:#D5F5EC;

  /* status */
  --danger:#A21C10;
  --danger-bg:#FFEBE5;
  --success:#1E6B37;
  --success-bg:#DFF3E3;

  /* overlays: modal scrim; inverse surface for snackbars (text on it: --text-on-inverse) */
  --scrim:rgba(36,17,27,.50);

  /* device / messaging surfaces */
  --scr:#FFFFFF;
  --scr-chat:#F5EEF1;
  --scr-line:#E7DFE2;
  --bub-in:#FFFFFF;
  --bub-out:#FCD9DF;
  --bub-out-ink:#24111B;

  /* keyboard */
  --kb-bg:#D7CED3;
  --kb-key:#FFFFFF;
  --kb-key-fn:#EFE9EC;
  --kb-key-pressed:#E4DBE0;
  --kb-key-fn-pressed:#FFFFFF;
  --kb-key-primary:#C52C60;
  --kb-key-ink:#24111B;
  --kb-key-shadow:0 1px 0 #7E7077;
  --kb-panel:#FFFFFF;
  --kb-divider:rgba(42,20,30,.12);
  --kb-popup:#FFFFFF;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#130C0F;
    --paper-2:#1E1418;
    --panel:#23181D;
    --ink:#F7EDF1;
    --ink-2:#C8B4BD;
    --ink-3:#A4939A;
    --line:#403037;
    --line-2:#2D2127;
    --brand:#FA618C;
    --brand-deep:#FFCDD7;
    --brand-tint:#451C26;
    --brand-lift:#FFACBD;
    --on-brand:#2B0712;
    --on-hero:#69072E;
    --hero-bg:#701033;
    --hero-ink:#FFF1F3;
    --hero-ink-2:#F8C5CE;
    --hero-line:rgba(255,255,255,.22);
    --tone-cool:#81AAF7;
    --tone-warm:#FCA864;
    --tone-fun:#5FE6C1;
    --tone-cool-bg:#18253F;
    --tone-warm-bg:#422812;
    --tone-fun-bg:#0D3A2E;
    --danger:#FF9E98;
    --danger-bg:#421D13;
    --success:#79D597;
    --success-bg:#12301C;
    --scrim:rgba(0,0,0,.60);
    --scr:#191115;
    --scr-chat:#0F090C;
    --scr-line:#2C2025;
    --bub-in:#291E23;
    --bub-out:#662135;
    --bub-out-ink:#FFF1F3;
    --kb-bg:#241B20;
    --kb-key:#665960;
    --kb-key-fn:#766970;
    --kb-key-pressed:#84767D;
    --kb-key-fn-pressed:#64565D;
    --kb-key-primary:#FA618C;
    --kb-key-ink:#FAF3F7;
    --kb-key-shadow:0 1px 0 #000000;
    --kb-panel:#2E2329;
    --kb-divider:rgba(255,255,255,.10);
    --kb-popup:#84767D;
    /* elevation */
    --shadow-s:0 1px 2px rgba(0,0,0,.5), 0 8px 20px -12px rgba(0,0,0,.8);
    --shadow-l:0 2px 4px rgba(0,0,0,.4), 0 34px 70px -34px rgba(0,0,0,.95);
    --shadow-popup:0 6px 18px -4px rgba(0,0,0,.8), 0 0 0 .5px rgba(255,255,255,.06);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#130C0F;
  --paper-2:#1E1418;
  --panel:#23181D;
  --ink:#F7EDF1;
  --ink-2:#C8B4BD;
  --ink-3:#A4939A;
  --line:#403037;
  --line-2:#2D2127;
  --brand:#FA618C;
  --brand-deep:#FFCDD7;
  --brand-tint:#451C26;
  --brand-lift:#FFACBD;
  --on-brand:#2B0712;
  --on-hero:#69072E;
  --hero-bg:#701033;
  --hero-ink:#FFF1F3;
  --hero-ink-2:#F8C5CE;
  --hero-line:rgba(255,255,255,.22);
  --tone-cool:#81AAF7;
  --tone-warm:#FCA864;
  --tone-fun:#5FE6C1;
  --tone-cool-bg:#18253F;
  --tone-warm-bg:#422812;
  --tone-fun-bg:#0D3A2E;
  --danger:#FF9E98;
  --danger-bg:#421D13;
  --success:#79D597;
  --success-bg:#12301C;
  --scrim:rgba(0,0,0,.60);
  --scr:#191115;
  --scr-chat:#0F090C;
  --scr-line:#2C2025;
  --bub-in:#291E23;
  --bub-out:#662135;
  --bub-out-ink:#FFF1F3;
  --kb-bg:#241B20;
  --kb-key:#665960;
  --kb-key-fn:#766970;
  --kb-key-pressed:#84767D;
  --kb-key-fn-pressed:#64565D;
  --kb-key-primary:#FA618C;
  --kb-key-ink:#FAF3F7;
  --kb-key-shadow:0 1px 0 #000000;
  --kb-panel:#2E2329;
  --kb-divider:rgba(255,255,255,.10);
  --kb-popup:#84767D;
  /* elevation */
  --shadow-s:0 1px 2px rgba(0,0,0,.5), 0 8px 20px -12px rgba(0,0,0,.8);
  --shadow-l:0 2px 4px rgba(0,0,0,.4), 0 34px 70px -34px rgba(0,0,0,.95);
  --shadow-popup:0 6px 18px -4px rgba(0,0,0,.8), 0 0 0 .5px rgba(255,255,255,.06);
}

/* Semantic aliases */
:root,[data-theme]{
  --surface-page:var(--paper);
  --surface-sunken:var(--paper-2);
  --surface-card:var(--panel);
  --text-body:var(--ink);
  --text-muted:var(--ink-2);
  --text-subtle:var(--ink-3);
  --border-default:var(--line);
  --border-subtle:var(--line-2);
  --accent:var(--brand);
  --accent-hover:var(--brand-deep);
  --accent-soft:var(--brand-tint);
  --focus-ring:var(--brand);
  --surface-inverse:var(--ink);
  --text-on-inverse:var(--paper);
}

/* Type roles */
:root{
  --font-ios:-apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-ios-display:-apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-android:"Roboto", system-ui, sans-serif;
  --font-text:var(--font-ios);
  --font-key:var(--font-text);
  --font-brand:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* site: system faces only */
  --font-display:var(--font-brand);
  --font-mono:ui-monospace, SFMono-Regular, Menlo, monospace;

  /* brand / store scale (rem on the site; source px noted) */
  --text-hero:5.5rem; /* 88px */
  --text-h1:3.5rem; /* 56px */
  --text-h2:2.5rem; /* 40px */
  --text-h3:1.3125rem; /* 21px */
  --text-lead:1.25rem; /* 20px */
  --text-body-size:1.0625rem; /* 17px */
  --text-small:0.9375rem; /* 15px */
  --text-caption:0.8125rem; /* 13px */
  --text-label:0.6875rem; /* 11px */

  /* in-product scale (px = pt/dp) */
  --kb-text-key:22px;
  --kb-text-key-fn:16px;
  --kb-text-strip:16px;
  --kb-text-suggestion:15px;
  --kb-text-label:9.5px;
  --app-title:32px;
  --app-headline:17px;
  --app-body:15px;
  --app-footnote:13px;

  --leading-tight:.95;
  --leading-heading:1.05;
  --leading-body:1.5;
  --leading-ui:1.3;
  --tracking-display:-.03em;
  --tracking-heading:-.022em;
  --tracking-body:-.01em;
  --tracking-label:.13em;
}

/* Spacing, radii, elevation (light; dark elevation is in the theme blocks above) */
:root{
  --space-1:4px;
  --space-2:6px;
  --space-3:8px;
  --space-4:12px;
  --space-5:14px;
  --space-6:20px;
  --space-7:26px;
  --space-8:34px;
  --space-9:44px;
  --space-10:64px;
  --space-11:96px;

  --radius-xs:4px;
  --radius-key:8.5px;
  --radius-sm:9px;
  --radius-md:14px;
  --radius-lg:18px;
  --radius-xl:22px;
  --radius-device:48px;
  --radius-pill:99px;

  --shadow-s:0 1px 2px rgba(35,16,26,.06), 0 6px 16px -10px rgba(35,16,26,.30);
  --shadow-l:0 2px 4px rgba(35,16,26,.06), 0 30px 60px -30px rgba(35,16,26,.45);
  --shadow-popup:0 4px 14px -4px rgba(35,16,26,.35), 0 0 0 .5px rgba(35,16,26,.08);
  --ring-edge:inset 0 0 0 1px var(--line);
}

/* Keyboard geometry */
:root{
  /* iOS */
  --kb-ios-strip-h:45px;
  --kb-ios-key-h:42px;
  --kb-ios-key-gap:6px;
  --kb-ios-row-gap:13px;
  --kb-ios-side-pad:6.5px;
  --kb-ios-key-radius:8.5px;
  --kb-ios-bottom-bar:56px;
  /* Android */
  --kb-and-strip-h:48px;
  --kb-and-key-h:46px;
  --kb-and-key-gap:6px;
  --kb-and-row-gap:10px;
  --kb-and-side-pad:6px;
  --kb-and-key-radius:6px;
  --kb-and-nav-h:24px;
  /* shared */
  --kb-tone-key-flex:1.35; /* @kind other */
  --kb-panel-radius:12px;
  --kb-suggestion-radius:11px;
}

/* Motion */
:root{
  --ease:cubic-bezier(.16,1,.3,1); /* @kind other */
  --ease-soft:cubic-bezier(.33,1,.68,1); /* @kind other */
  --e-drawer:cubic-bezier(.32,.72,0,1); /* @kind other */
  --e-swift:cubic-bezier(.175,.885,.32,1.1); /* @kind other */
  --e-pop:cubic-bezier(.2,1.5,.4,1); /* @kind other */
  --dur-key:80ms; /* @kind other */
  --dur-fast:160ms; /* @kind other */
  --dur-base:280ms; /* @kind other */
  --dur-panel:420ms; /* @kind other */
  --stagger-suggestion:70ms; /* @kind other */
}
@keyframes tone-blink{50%{opacity:0}}
@keyframes tone-shimmer{0%{background-position:-160px 0}100%{background-position:160px 0}}
@keyframes tone-rise{from{opacity:0;transform:translateY(.7em) scale(.98)}to{opacity:1;transform:none}}
@keyframes tone-ladder{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){
  :root{--dur-key:0ms; /* @kind other */--dur-fast:0ms; /* @kind other */--dur-base:0ms; /* @kind other */--dur-panel:0ms; /* @kind other */--stagger-suggestion:0ms; /* @kind other */}
}