@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Space+Grotesk:wght@400;500;700&display=swap');

// dkdc theme: violet/cyan dark-default with animations

// ========================================
// CSS Variables
// ========================================
:root {
  --accent: rgb(167, 139, 250);
  --accent-alpha-70: rgba(167, 139, 250, .7);
  --accent-alpha-20: rgba(167, 139, 250, .2);

  --accent-secondary: rgb(34, 211, 238);
  --accent-secondary-alpha-20: rgba(34, 211, 238, .2);

  --background: #0f0d1a;
  --background-raised: #16132a;
  --color: #e2e8f0;
  --color-muted: rgba(226, 232, 240, .5);
  --border-color: rgba(167, 139, 250, .15);

  --code-bg: rgba(0, 0, 0, 0.3);
  --max-width: 1200px;
}

[data-theme="light"] {
  --background: #faf9ff;
  --background-raised: #ffffff;
  --color: #1e1b3a;
  --color-muted: rgba(30, 27, 58, .55);
  --border-color: rgba(167, 139, 250, .12);
  --code-bg: #f5f3ff;
}

// Breakpoints (must be before structure import)
$phone-max-width: 683px;
$tablet-max-width: 899px;
$nav-collapse-width: 600px;

// Shared structural CSS + components
@import 'structure';
@import 'components';
