/*
 * Design tokens shared by the Vue SPA and Django-rendered pages.
 *
 * This file is 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
 *
 * Rules of the road: pages and components style against the semantic tokens
 * (--color-*, --font-*, --radius-*); the raw palette below exists only to
 * feed them. Change the palette here and every surface follows.
 */

:root {
  /* Raw palette (from the Vue theme, https://github.com/vuejs/theme) */
  --palette-white: #ffffff;
  --palette-white-soft: #f8f8f8;
  --palette-white-mute: #f2f2f2;

  --palette-black: #181818;
  --palette-black-soft: #222222;
  --palette-black-mute: #282828;

  --palette-indigo: #2c3e50;
  --palette-orange: hsl(27, 100%, 50%);
  --palette-red: #cc0000;

  --palette-divider-light-1: rgba(60, 60, 60, 0.29);
  --palette-divider-light-2: rgba(60, 60, 60, 0.12);
  --palette-divider-dark-1: rgba(84, 84, 84, 0.65);
  --palette-divider-dark-2: rgba(84, 84, 84, 0.48);

  --palette-text-light-1: var(--palette-indigo);
  --palette-text-light-2: rgba(60, 60, 60, 0.66);
  --palette-text-dark-1: var(--palette-white);
  --palette-text-dark-2: rgba(235, 235, 235, 0.64);

  /* Semantic colors (light) */
  --color-background: var(--palette-white);
  --color-background-soft: var(--palette-white-soft);
  --color-background-mute: var(--palette-white-mute);

  --color-border: var(--palette-divider-light-2);
  --color-border-hover: var(--palette-divider-light-1);

  --color-heading: var(--palette-text-light-1);
  --color-text: var(--palette-text-light-1);
  --color-text-soft: var(--palette-text-light-2);

  --color-accent: var(--palette-orange);
  --color-accent-soft: hsla(27, 100%, 50%, 0.2);
  --color-danger: var(--palette-red);

  /* Status accents (ideas app) */
  --color-success: hsl(153, 46%, 43%);
  --color-warning: hsl(38, 92%, 45%);
  --color-hot: hsl(352, 80%, 55%);
  --color-vote-up: var(--color-accent);
  --color-vote-down: var(--color-danger);

  /* Typography */
  --font-family-base:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    'Fira Sans',
    'Droid Sans',
    'Helvetica Neue',
    sans-serif;
  --font-size-base: 15px;
  --line-height-base: 1.6;

  /* Shape & layout */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --section-gap: 160px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: var(--palette-black);
    --color-background-soft: var(--palette-black-soft);
    --color-background-mute: var(--palette-black-mute);

    --color-border: var(--palette-divider-dark-2);
    --color-border-hover: var(--palette-divider-dark-1);

    --color-heading: var(--palette-text-dark-1);
    --color-text: var(--palette-text-dark-2);
    --color-text-soft: var(--palette-text-dark-2);
  }
}