:root {
  /* Brand */
  --color-bg: #eceffa;
  --color-text: #000;
  --color-text-muted: #333;
  --color-text-subtle: #6f7897;

  --color-purple-darkest: #1f0b44;
  --color-purple-dark: #2a1468;
  --color-purple: #6245d9;
  --color-purple-light: #9243e4;
  --color-purple-rank-from: #a450fb;
  --color-purple-rank-to: #4e138a;

  --color-yellow-from: #fccf59;
  --color-yellow-mid: #ffe489;
  --color-yellow-to: #ffb25b;

  --color-green-from: #20be2d;
  --color-green-to: #108b16;
  --color-green-shadow: #65fa71;
  --color-green-accent: #6ab04c;

  --color-red: #f00;
  --color-star: #ff8a00;
  --color-comment-icon: #5277e7;

  --color-border: #d6ddf7;
  --color-border-soft: #ececf0;

  /* Layout */
  --header-height: 95px;
  --container-max: 1110px;
  --container-content-max: 1142px;
  --container-header-max: 1240px;
  --container-footer-max: 970px;
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Type */
  --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Gradients */
  --grad-hero: linear-gradient(90deg, #280d4c 0%, #451b70 60%, #32135b 100%);
  --grad-yellow: linear-gradient(180deg, #fccf59 0%, #ffe489 50%, #ffb25b 100%);
  --grad-yellow-hover: linear-gradient(180deg, #ffb25b 0%, #ffe489 50%, #fccf59 100%);
  --grad-green: linear-gradient(93.84deg, #20be2d 14.57%, #108b16 100%);
  --grad-rank-1: linear-gradient(92.15deg, #a450fb 3.78%, #4e138a 102.2%);
}