/* Design tokens — LUMA theme */
:root {
  /* borderRadius */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 24px;
  --radius-circle: 50%;

  /* font */
  --font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-semibold: 500;
  --font-weight-bold: 600;

  /* sizes — desktop (default) */
  --font-size-h1: 3rem;
  --font-size-h2: 2.25rem;
  --font-size-h3: 1.875rem;
  --font-size-h4: 1.125rem;
  --font-size-h5: 1.125rem;
  --font-size-h6: 1.125rem;
  --font-size-quote: 1rem;
  --font-size-small: 0.875rem;
  --font-size-paragraph: 1rem;
  --font-size-large-paragraph: 1.5rem;

  /* layers */
  --layer-base: 10;
  --layer-menu: 20;
  --layer-overlay: 30;
  --layer-modal: 40;
  --layer-always-on-top: 50;

  /* transition */
  --transition-default: 0.3s ease-in-out;
  --transition-fast: 0.1s ease-in-out;

  /* colors — primary */
  --color-primary-50: rgba(120, 89, 233, 0.3);
  --color-primary-100: #7859e9;
  --color-primary-200: #ebebeb;
  --color-primary-300: #d9d9d9;
  --color-primary-400: #737373;
  --color-primary-500: #333333;

  /* colors — secondary */
  --color-secondary-100: #fbbb37;
  --color-secondary-200: #1a6fc5;
  --color-secondary-300: #27800e;
  --color-secondary-400: #c34400;
  --color-secondary-500: #f67e00;

  --color-white: #ffffff;
  --color-black: #000000;
  --color-error: #dc1637;
  --color-success: #27800e;
  --color-warning: #fbbb37;

  /* brand aliases (shell: topbar / sidebar) */
  --brand-base: var(--color-primary-100);
  --brand-dark: color-mix(in srgb, var(--color-primary-100) 72%, var(--color-primary-500) 28%);
  --brand-on: var(--color-white);
  --brand-muted-on: color-mix(in srgb, var(--color-white) 88%, var(--color-primary-200) 12%);
  --brand-accent-on: var(--color-secondary-100);
}

@media (max-width: 960px) {
  :root {
    --font-size-h1: 1.875rem;
    --font-size-h2: 1.5rem;
    --font-size-h3: 1.313rem;
    --font-size-h4: 1rem;
    --font-size-h5: 1rem;
    --font-size-h6: 1rem;
  }
}