/* --------------------------------------------------
   PALETTE
-------------------------------------------------- */
:root {
  --palette-neutral-0900: #151B21FF;
  --palette-neutral-0850: #282D33FF;
  --palette-neutral-0800: #343C44FF;
  --palette-neutral-0700: #454B54FF;
  --palette-neutral-0600: #5D6268FF;
  --palette-neutral-0500: #686D74FF;
  --palette-neutral-0450: #82858AFF;
  --palette-neutral-0400: #919497FF;
  --palette-neutral-0300: #C0C1C3FF;
  --palette-neutral-0200: #D9DADCFF;
  --palette-neutral-0150: #E6E6E9FF;
  --palette-neutral-0100: #F4F4F6FF;
  --palette-neutral-0050: #F9F9FBFF;
  --palette-neutral-0000: #FFFFFFFF;
}

/* --------------------------------------------------
   TYPOGRAPHY
-------------------------------------------------- */
:root {
  --font-family: Onest;

  --font-size: 15px;
  --line-height: 22px;

  --font-weight-body: 400;
  --font-weight-body-accent: 475;
  --font-weight-display: 550;

  --font-size-caption: 14px;
  --line-height-caption: 16px;
}

/* --------------------------------------------------
   COLORS — LIGHT THEME (актуальная)
-------------------------------------------------- */
:root {
  --color-background: var(--palette-neutral-0050);

  --color-surface-heavy: var(--palette-neutral-0150);
  --color-surface-medium: var(--palette-neutral-0100);
  --color-surface-soft: var(--palette-neutral-0050);

  --color-content-display: var(--palette-neutral-0900);
  --color-content-body: var(--palette-neutral-0600);
  --color-content-accent-heavy: var(--palette-neutral-0900);
  --color-content-accent-medium: var(--palette-neutral-0800);
  --color-content-accent-soft: var(--palette-neutral-0700);

  --color-content-caption: var(--palette-neutral-0500);
  --color-content-faint: var(--palette-neutral-0450);

  --color-border-heavy: var(--palette-neutral-0200);
  --color-border-medium: var(--palette-neutral-0150);
  --color-border-soft: var(--palette-neutral-0100);
}

/* --------------------------------------------------
   COLORS — DARK THEME (auto via system settings)
-------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --color-background: var(--palette-neutral-0900);

    --color-surface-heavy: var(--palette-neutral-0700);
    --color-surface-medium: var(--palette-neutral-0800);
    --color-surface-soft: var(--palette-neutral-0850);

    --color-content-display: var(--palette-neutral-0000);
    --color-content-body: var(--palette-neutral-0150);
    --color-content-accent-heavy: var(--palette-neutral-0000);
    --color-content-accent-medium: var(--palette-neutral-0100);
    --color-content-accent-soft: var(--palette-neutral-0200);

    --color-content-caption: var(--palette-neutral-0300);
    --color-content-faint: var(--palette-neutral-0400);

    --color-border-heavy: var(--palette-neutral-0700);
    --color-border-medium: var(--palette-neutral-0800);
    --color-border-soft: var(--palette-neutral-0850);
  }
}