/* ==========================================================================
   Tokens
   ========================================================================== */

:root {
  --color-bg: #ffffff;
  --color-text: #000000;
  --color-muted: rgba(0, 0, 0, 0.66);
  --color-soft: rgba(0, 0, 0, 0.52);
  --color-input: #F4F4F4;
  --color-border: rgba(0, 0, 0, 0.08);
  --color-primary: #0063f2;
  --color-primary-hover: #0053cc;
  --color-fadedred: #fff5ef;

  --font-base: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --page-width: 750px;
  --page-padding: 20px;

  --radius-sm: 4px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --control-height: 56px;
  --control-padding: 18px;

  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 36px;
  --space-2xl: 52px;
  --space-3xl: 72px;

  --text-label: 20px;
  --text-control: 20px;
  --text-body: 20px;
  --text-note: 18px;
  --text-h1: clamp(38px, 7vw, 58px);

  --letter-tight: -0.04em;
  --shadow-dialog: 0 24px 80px rgba(0, 0, 0, 0.24);
  --shadow-dropdown: 0 18px 50px rgba(0, 0, 0, 0.14);
}

@media (max-width: 520px) {
  :root {
    --page-padding: 32px;

    --control-height: 47px;
    --control-padding: 18px;

    --space-2xl: 44px;
    --space-3xl: 64px;

    --text-label: 14px;
    --text-control: 16px;
    --text-body: 16px;
    --text-note: 12px;
    --text-h1: clamp(26px, 9vw, 56px);
  }
}

@media (max-width: 380px) {
  :root {
    --page-padding: 20px;

    --control-height: 43px;
    --control-padding: 18px;

    --space-2xl: 44px;
    --space-3xl: 64px;

    --text-label: 14px;
    --text-control: 14px;
    --text-body: 16px;
    --text-note: 12px;
    --text-h1: clamp(29px, 10.5vw, 56px);
  }
}