/*
 * Design tokens shared by the Vue SPA and Django-rendered pages.
 *
 * Served by Django at /static/css/tokens.css and linked from:
 *   - client-web/index.html (dev: through the Vite proxy; prod: WhiteNoise)
 *   - Django templates such as server/templates/allauth/layouts/base.html
 *
 * Values come from animato's original stylesheet (animato/static/styles/
 * _variables.sass). Components style against the semantic tokens (--color-*,
 * --font-*, --radius-*, layout sizes); change a value here and both worlds
 * follow. Dark theme only, like the original site.
 */

:root {
  color-scheme: dark;

  /* Raw hues (HSL components), so derived shades stay in the same family. */
  --hue-body: 216;
  --sat-body: 14%;
  --hue-accent: 223;
  --hue-accent-alt: 59;

  /* Surfaces */
  --color-background: hsl(216 14% 9%);
  --color-background-light: hsl(216 14% 11%);
  --color-background-dark: hsl(216 14% 5%);
  --color-background-soft: hsl(216 14% 14%); /* component */
  --color-background-mute: hsl(216 14% 18%); /* component-light */
  --color-component-dark: hsl(216 14% 10%);
  --color-component-darker: hsl(216 14% 8%);
  --color-post-view-info-bg: hsl(216 14% 12%);

  /* Text */
  --color-text: hsl(216 16% 85%);
  --color-heading: hsl(216 8% 95%);
  --color-text-soft: hsl(216 8% 50%);
  --color-text-hint: hsl(216 13% 35%);

  /* Accent (primary) and alternative accent */
  --color-accent: hsl(223 100% 49%);
  --color-accent-text: hsl(223 100% 62%);
  --color-accent-light: hsl(223 100% 70%);
  --color-accent-dark: hsl(223 100% 37%);
  --color-accent-soft: hsl(223 100% 50% / 0.25);
  --color-accent-alt: hsl(59 100% 66%);
  --color-accent-alt-light: hsl(59 100% 77%);
  --color-accent-alt-dark: hsl(59 100% 37%);
  --color-accent-alt-soft: hsl(59 100% 56% / 0.15);

  /* Borders */
  --color-border: hsl(216 14% 14%);
  --color-border-hover: hsl(216 14% 18%);
  --border-width: 2px;

  /* Status */
  --color-danger: #f5455c;
  --color-liked: #f5455c;
  --color-success: hsl(134 61% 61%);
  --color-warning: hsl(42 89% 58%);
  --color-info: hsl(207 95% 65%);
  --color-admin: #b994ff;
  --color-notification: #ff3d5e;

  /* Typography */
  --font-family-base:
    Nunito,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    sans-serif;
  --font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
  --font-size-base: 16px;
  --font-size-xl: calc(var(--font-size-base) * 2);
  --font-size-lg: calc(var(--font-size-base) * 1.25);
  --font-size-sm: calc(var(--font-size-base) * 0.875);
  --font-size-xs: calc(var(--font-size-base) * 0.75);
  --font-size-xxs: calc(var(--font-size-base) * 0.65);
  --line-height-base: 1.5;

  /* Shape */
  --radius-sm: 0.166rem;
  --radius-md: 0.33rem;
  --radius-lg: 0.825rem;

  /* Layout */
  --navbar-top-height: 56px;
  --gap-size: 1rem;
  --gap-size-sm: 0.5rem;
  --grid-min-thumbnail-size: 300px;
  --post-grid-gutter: 3%;
  --stream-list-view-max-width: 800px;
  --post-view-media-width: 100%;
  --post-view-info-width: 100%;
  --avatar-size-sm: 26px;
  --avatar-size: 36px;
  --avatar-size-md: 64px;
  --avatar-size-lg: 128px;
  --card-thumbnail-scale-on-hover: 1.07;
  --scrollbar-width: 10px;

  /* Motion */
  --transition-speed-fast: 90ms;
  --transition-speed: 125ms;
  --transition-speed-slow: 240ms;
}

/* Post view: media on the left, info sidebar on the right (md and up).
 * Percentages of the flex row, not vw: 100vw includes the always-visible body
 * scrollbar and would overflow the page horizontally. */
@media (min-width: 768px) {
  :root {
    --post-view-media-width: 55%;
    --post-view-info-width: 45%;
  }
}

@media (min-width: 1200px) {
  :root {
    --post-view-media-width: 70%;
    --post-view-info-width: 30%;
  }
}