/* Glo Little Luxury — design tokens (self-hosted fonts + CSS variables) */

@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/baloo2-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/baloo2-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/baloo2-800.woff2') format('woff2');
}
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/quicksand-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/quicksand-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/quicksand-700.woff2') format('woff2');
}

:root {
  /* Brand ground / neutrals */
  --glo-bg: #F1EFE7;
  --glo-surface: #FFFFFF;
  --glo-ink: #1B1B1B;
  --glo-ink-soft: #5B5A50;
  --glo-border: #E7E3D6;

  /* Brand color-block colors */
  --glo-teal-deep: #0F778A;
  --glo-teal-bright: #089BB5;
  --glo-violet: #5E17EB;
  --glo-coral: #E72442;

  /* Roles */
  --glo-accent: var(--glo-violet);
  --glo-cta: var(--glo-violet);
  --glo-cta-urgent: var(--glo-coral);

  /* Type */
  --glo-font-display: 'Baloo 2', sans-serif;
  --glo-font-body: 'Quicksand', sans-serif;

  /* Shape */
  --glo-radius-sm: 10px;
  --glo-radius-md: 16px;
  --glo-radius-pill: 999px;

  /* Space */
  --glo-space-sm: 8px;
  --glo-space-md: 16px;
  --glo-space-lg: 32px;
  --glo-space-xl: 64px;

  /* Layout */
  --glo-container: 1240px;
}