@font-face {
  font-family: "Clash Display";
  src: url("https://grom.gr/assets/fonts/ClashDisplay-Variable.woff2") format("woff2-variations"),
       url("https://grom.gr/assets/fonts/ClashDisplay-Variable.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Clash Display Logo";
  src: url("https://grom.gr/assets/fonts/ClashDisplayLogo-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "General Sans";
  src: url("https://grom.gr/assets/fonts/GeneralSans-Variable.woff2") format("woff2-variations"),
       url("https://grom.gr/assets/fonts/GeneralSans-Variable.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-bg:      oklch(14% 0.02 270);
  --color-bg-2:    oklch(18% 0.025 270);
  --color-surface: oklch(22% 0.02 270);
  --color-text:    oklch(96% 0.005 270);
  --color-muted:   oklch(70% 0.015 270);
  --color-line:    oklch(35% 0.02 270 / 0.55);

  --color-accent:  #DF4B31;

  --accent-illustration:    #f3c14a;
  --accent-animation:       #c768ff;
  --accent-video:           #ff4f2c;
  --accent-photography:     #5fc6e3;
  --accent-web-development: #7af2a3;
  --accent-app-development: #8b8bff;
  --accent-3d-design:       #ffb14d;

  --font-display: "Clash Display", "Inter", system-ui, sans-serif;
  --font-body:    "General Sans", "Inter", system-ui, sans-serif;
  --font-logo:    "Clash Display Logo", var(--font-display);

  --text-xs:   0.78rem;
  --text-sm:   0.92rem;
  --text-base: 1.05rem;
  --text-lg:   clamp(1.15rem, 1rem + 0.4vw, 1.35rem);
  --text-xl:   clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  --text-2xl:  clamp(2.25rem, 1.4rem + 3vw, 4rem);
  --text-3xl:  clamp(3rem, 1.6rem + 5vw, 6rem);
  --text-hero: clamp(3.75rem, 1rem + 9vw, 10rem);

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: 5rem;
  --space-section: clamp(5rem, 4rem + 6vw, 11rem);

  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.7, 0, 0.3, 1);
  --duration-fast: 180ms;
  --duration-base: 360ms;
  --duration-slow: 700ms;

  --container: 1320px;
  --container-narrow: 920px;
  --gutter: clamp(1.25rem, 1rem + 1.5vw, 2.5rem);

  --shadow-pop: 0 30px 80px -30px oklch(0% 0 0 / 0.6);
  --shadow-card: 0 18px 40px -18px oklch(0% 0 0 / 0.55);

  --grain-img:           url("https://grom.gr/media/grom/assets/img/grain.svg?v=1785496547");
  --grain-tile:          200px;
  --grain-opacity:       0.25;
  --film-grain-opacity:  0.5;
}

@media (max-width: 640px) {
  :root {
    --space-section: clamp(3.5rem, 2.75rem + 5vw, 5rem);
    --text-3xl: clamp(2.35rem, 1.6rem + 4vw, 3rem);
    --text-2xl: clamp(1.75rem, 1.3rem + 2.5vw, 2.25rem);
    --gutter: 1.25rem;
  }
}