@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ===== GFMP Design Tokens — Premium Light ===== */

:root {
  /* Core palette */
  --background: #ffffff;
  --foreground: hsl(222 47% 11%);

  --card: #ffffff;
  --card-foreground: hsl(222 47% 11%);

  --muted: hsl(220 33% 97%);
  --muted-foreground: hsl(215 16% 47%);

  --border: hsl(220 20% 92%);
  --input: hsl(220 20% 92%);

  --primary: hsl(222 47% 11%);
  --primary-foreground: hsl(210 40% 98%);

  --accent: hsl(221 83% 53%);
  --accent-foreground: #ffffff;

  --positive: hsl(152 69% 31%);
  --negative: hsl(346 87% 43%);
  --warning: hsl(38 92% 50%);

  /* Section backgrounds */
  --bg-dark: hsl(222 47% 11%);
  --bg-dark-card: hsl(222 40% 16%);
  --bg-dark-border: hsl(222 30% 24%);
  --bg-tinted: hsl(220 50% 97.5%);
  --bg-warm: hsl(30 30% 97%);

  /* Premium shadows */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 2px 4px -1px rgba(15, 23, 42, 0.06), 0 4px 6px -2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 8px -2px rgba(15, 23, 42, 0.06), 0 12px 28px -6px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 8px 16px -4px rgba(15, 23, 42, 0.06), 0 24px 48px -12px rgba(15, 23, 42, 0.12);
  --shadow-xl: 0 16px 32px -8px rgba(15, 23, 42, 0.1), 0 40px 64px -16px rgba(15, 23, 42, 0.15);
  --shadow-accent: 0 8px 24px -4px rgba(37, 99, 235, 0.25);

  /* Radius */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* Spacing scale */
  --space-section: clamp(100px, 12vw, 160px);
  --space-section-sm: clamp(64px, 8vw, 100px);

  /* Easing */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ===== Reset ===== */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html, body {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.7;
}

/* ===== Typography ===== */

h1, h2, h3, h4 {
  margin: 0 0 16px;
  font-family: "Outfit", sans-serif;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--foreground);
  font-weight: 700;
}

h1 { font-weight: 800; }

p {
  margin: 0 0 20px;
}

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

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

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

code, .mono, .metric, .number {
  font-family: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

strong {
  font-weight: 700;
}

/* ===== Accessibility ===== */

.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
}

.skip-link:focus {
  left: 20px;
  top: 20px;
  background: var(--primary);
  color: var(--primary-foreground);
  padding: 12px 20px;
  border-radius: 8px;
  z-index: 1000;
  font-weight: 600;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ===== Selection ===== */
::selection {
  background: hsl(221 83% 53% / 0.15);
  color: var(--foreground);
}

/* ===== Subtle Grain Texture ===== */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.018;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px;
  mix-blend-mode: overlay;
}