/* ==========================================================================
   Design tokens — GrandVer
   ========================================================================== */

/* Regular */
@font-face {
  font-family: 'Gilroy';
  src: url('/assets/fonts/gilroy/Gilroy-Regular_0.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Medium */
@font-face {
  font-family: 'Gilroy';
  src: url('/assets/fonts/gilroy/Gilroy-Medium_0.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Semibold */
@font-face {
  font-family: 'Gilroy';
  src: url('/assets/fonts/gilroy/Gilroy-Semibold_0.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Bold / Heavy */
@font-face {
  font-family: 'Gilroy';
  src: url('/assets/fonts/gilroy/Gilroy-Heavy_0.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
:root {
  /* Colors */
  --color-purple: #4F467C;
  --color-purple-dark: #423A65;
  --color-purple-light: #E9E5F6;

  --color-text: #100F27;
  --color-text-80: rgba(16, 15, 39, 0.8);
  --color-text-60: rgba(16, 15, 39, 0.6);
  --color-text-40: rgba(16, 15, 39, 0.4);

  --color-pink-bg: #FAF0F2;
  --color-header-bg: #F9EBED;
  --color-header-border: #F5E5E8;
  --color-grey-bg: #F4F4F7;
  --color-grey-input: #F5F5F9;
  --color-grey-btn: #DEDEE5;
  --color-divider: #F2F2F6;

  --color-white: #FFFFFF;
  --color-star: #F6B23B;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 100px;

  /* Shadow */
  --shadow-card: 0 4px 8px rgba(23, 19, 38, 0.05);
  --shadow-toolbar: 0 4px 4px rgba(23, 19, 38, 0.03);

  /* Layout */
  --container-max: 1280px;
  /* Responsive gutter that grows with the viewport up to 80px, then — once
     the viewport is wide enough that content would exceed --container-max —
     keeps growing so the content column itself caps at --container-max and
     stays centered instead of stretching to the screen edges. */
  --side-padding: max(clamp(16px, 5.5vw, 80px), calc((100% - var(--container-max)) / 2));

  /* Typography */
  --font-main: 'Gilroy', 'Manrope', system-ui, -apple-system, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
}