@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@300;500;600;800;900&display=swap');

@font-face { font-family: 'CMG Sans'; src: url('fonts/CMGSans-ExtraLight.ttf') format('truetype'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'CMG Sans'; src: url('fonts/CMGSans-Light.ttf')      format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'CMG Sans'; src: url('fonts/CMGSans-Medium.ttf')     format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'CMG Sans'; src: url('fonts/CMGSans-SemiBold.ttf')   format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'CMG Sans'; src: url('fonts/CMGSans-ExtraBold.ttf')  format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'CMG Sans'; src: url('fonts/CMGSans-Black.ttf')      format('truetype'); font-weight: 900; font-style: normal; font-display: swap; }

@font-face { font-family: 'Host Grotesk'; src: url('fonts/HostGrotesk-VariableFont_wght.ttf') format('truetype'); font-weight: 300 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Host Grotesk'; src: url('fonts/HostGrotesk-Italic-VariableFont_wght.ttf') format('truetype'); font-weight: 300 800; font-style: italic; font-display: swap; }

@font-face { font-family: 'Instrument Serif'; src: url('fonts/InstrumentSerif-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }

@font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-VariableFont_wght.ttf') format('truetype'); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  --ink:        #0a0a0d;
  --ink-elev:   #15151a;
  --graphite:   #2a2d33;
  --slate:      #58595b;
  --mist:       #c6cdd4;
  --stone:      #f4f5f7;
  --paper:      #ffffff;

  --blue:        #00a5e5;
  --blue-bright: #4ec3f0;
  --blue-deep:   #0066a3;
  --navy:        #001b2e;

  --grad-1: #6cb4f0;
  --grad-2: #6a4cff;
  --grad-3: #b53de8;
  --grad-4: #ff3d8a;
  --grad-5: #ff2935;

  --signature: linear-gradient(135deg,
    var(--grad-1) 0%,
    var(--grad-2) 25%,
    var(--grad-3) 50%,
    var(--grad-4) 75%,
    var(--grad-5) 100%);

  --grad-cool:  linear-gradient(135deg, var(--grad-1) 0%, var(--grad-2) 60%, var(--grad-3) 100%);
  --grad-warm:  linear-gradient(135deg, var(--grad-3) 0%, var(--grad-4) 50%, var(--grad-5) 100%);
  --grad-blue:  linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 100%);

  --f-display: 'CMG Sans', 'Archivo', system-ui, sans-serif;
  --f-body:    'Host Grotesk', system-ui, -apple-system, sans-serif;
  --f-serif:   'Instrument Serif', 'Times New Roman', serif;
  --f-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  --gutter: clamp(20px, 4vw, 72px);

  --rule:           1px solid rgba(255, 255, 255, 0.12);
  --rule-soft:      1px solid rgba(255, 255, 255, 0.06);

  --glow-mark: drop-shadow(0 30px 80px rgba(107, 76, 255, 0.35)) drop-shadow(0 0 60px rgba(255, 61, 138, 0.25));
}

.serif { font-family: var(--f-serif); font-weight: 400; font-style: italic; letter-spacing: -0.01em; }

.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

::selection { background: var(--grad-3); color: var(--paper); }