/* ============================================
   Cyberk Design System
   ============================================ */

@font-face {
  font-family: 'Satoshi';
  src: url('../assets/fonts/Satoshi-Variable.ttf') format('truetype');
  font-weight: 200 700;
  font-display: swap;
}

:root {
  --red-1: #D84040;
  --red-2: #EC2B39;
  --color-text: #212121;
  --color-text-secondary: #292929;
  --color-text-muted: #828282;
  --color-text-light: #717070;
  --color-text-dark: #161616;
  --color-bg: #ffffff;
  --color-bg-pink: #FFF7F8;
  --color-bg-pink-2: #FFF5F6;
  --color-bg-gray: #FAFAFA;
  --color-bg-blue: #F6FAFF;
  --color-bg-blue-gray: #F6F7FA;
  --color-border: rgba(0, 0, 0, 0.1);
  --color-star: #F5BF03;
  --color-blue: #2172E6;

  --font-sans: 'Satoshi', system-ui, -apple-system, sans-serif;
  --fw-extralight: 200;
  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  --max-width: 1200px;
  --max-width-narrow: 1164px;
  --max-width-wide: 1312px;
  --radius: 0.625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-2xl: 1.5rem;

  --shadow-card: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  --shadow-soft: 0px 4px 4px 0px rgba(53, 53, 53, 0.1);
  --shadow-blue: 0px 10px 40px 0px rgba(33, 114, 230, 0.1);
}

/* ============================================
   Reset
   ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-weight: var(--fw-normal);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, textarea { font: inherit; }
button { cursor: pointer; border: none; background: none; }

/* ============================================
   Typography
   ============================================ */
h1 { font-size: clamp(2rem, 5vw, 4.5rem); font-weight: var(--fw-medium); line-height: 1.1; }
h2 { font-size: clamp(1.5rem, 3.5vw, 3rem); font-weight: var(--fw-normal); line-height: 1.15; }
h3 { font-size: clamp(1.125rem, 2vw, 1.5rem); font-weight: var(--fw-normal); line-height: 1.3; }

.text-extralight { font-weight: var(--fw-extralight); }
.text-light { font-weight: var(--fw-light); }
.text-medium { font-weight: var(--fw-medium); }
.text-semibold { font-weight: var(--fw-semibold); }
.text-red { color: var(--red-2); }
.text-muted { color: var(--color-text-muted); }
.text-center { text-align: center; }