@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=DM+Mono:wght@400;500&family=DM+Sans:wght@300;400;500&display=swap');

:root {
  /* Vivid orange + cyan on deep space black */
  --cyan:   #17aed4;
  --amber:  #fe990f;
  --bg:     #03040a;
  --ink:    #ffffff;
  --ink2:   rgba(255,255,255,0.78);
  --ink3:   rgba(255,255,255,0.38);
  --ink4:   rgba(255,255,255,0.14);
  --rule:   rgba(255,255,255,0.08);
  --glass:  rgba(3,6,18,0.86);
  --glass2: rgba(3,6,18,0.96);

  /* Tinted backgrounds */
  --cd:     rgba(23,174,212,0.12);
  --ad:     rgba(254,153,15,0.12);
  --cdn:    rgba(23,174,212,0.06);
  --adn:    rgba(254,153,15,0.06);

  /* Borders */
  --cyan-border:  rgba(23,174,212,0.4);
  --amber-border: rgba(254,153,15,0.4);

  /* Type */
  --ff-serif: 'Playfair Display', Georgia, serif;
  --ff-mono:  'DM Mono', 'Courier New', monospace;
  --ff-sans:  'DM Sans', system-ui, sans-serif;

  /* Layout */
  --hdr-h:     52px;
  --orb-size:  130px;
  --orb-size-sm: 44px;

  /* Easing */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

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

html, body {
  width: 100%; height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ff-sans);
  font-size: 16px;
  line-height: 1.6;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Orange/cyan accent on selection */
::selection {
  background: rgba(254,153,15,0.28);
  color: var(--ink);
}

/* Scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(23,174,212,0.25); border-radius: 2px; }