:root {
  /* Typography */
  --font-body: "Jost", Helvetica, Arial, sans-serif;
  --font-heading: "Marcellus", Helvetica, Times New Roman, sans-serif;

  /* Brand colors: semantic tokens */
  --color-primary: #7460d6;
  --color-primary-hover: #6450c0;
  --color-primary-soft: #cfc6f2;
  --color-accent: #a78bfa;
  --color-accent-cool: #b9c7ff;

  --color-background: #fbfaff;
  --color-background-soft: #f5f1ff;
  --color-background-dark: #101729;
  --color-background-deep: #080c17;

  --color-surface: #ffffff;
  --color-surface-soft: rgba(255, 255, 255, 0.72);
  --color-surface-dark: rgba(22, 28, 48, 0.68);

  --color-heading: #111827;
  --color-body: #465064;
  --color-muted: #7c8495;
  --color-heading-inverse: #fbfaff;
  --color-body-inverse: #d9d5e7;
  --color-muted-inverse: #a9a3bd;

  --color-border: rgba(124, 92, 255, 0.16);
  --color-border-strong: rgba(124, 92, 255, 0.34);
  --color-border-inverse: rgba(255, 255, 255, 0.16);

  --color-glow-primary: rgba(124, 92, 255, 0.3);
  --color-glow-soft: rgba(167, 139, 250, 0.2);
  --color-studio-light: rgba(255, 255, 255, 0.18);

  /* Tech semantic accents */
  --color-tech-wp: #7e71ff;
  --color-tech-html: #f06529;
  --color-tech-css: #2965f1;
  --color-tech-js: #f7df1e;
  --color-tech-php: #8b8cc7;

  /* Layout */
  --container-max: 128rem;
  --container-padding: clamp(2rem, 5vw, 8rem);
  --header-height: 7.2rem;
  --section-padding-block: clamp(7.2rem, 9vw, 12rem);

  /* Radius */
  --radius-xs: 0.8rem;
  --radius-sm: 1.2rem;
  --radius-md: 1.8rem;
  --radius-lg: 2.8rem;
  --radius-xl: 4rem;
  --radius-pill: 999rem;

  /* Shadows */
  --shadow-soft: 0 2.4rem 7.2rem rgba(15, 23, 42, 0.14);
  --shadow-glow: 0 0 10rem rgba(124, 92, 255, 0.24);
  --shadow-button: 0 1.6rem 3.2rem rgba(91, 61, 210, 0.24);

  /* Motion */
  --duration-fast: 180ms;
  --duration-normal: 320ms;
  --duration-slow: 700ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Z-index */
  --z-header: 50;
  --z-menu: 60;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.6rem;
  line-height: 1.7;
  color: var(--color-body);
  background: var(--color-background);
  min-width: 32rem;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.is-menu-open {
  overflow: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}