@layer base, layout, components, utilities;

@layer base {
  :root {
    /* Modern Social Palette */
    --kong-primary: oklch(60% 0.25 330); /* Electric Magenta */
    --kong-secondary: oklch(55% 0.2 260); /* Azure Blue */
    --kong-bg: oklch(98% 0.01 250);
    --kong-surface: oklch(100% 0 0);
    --kong-border: oklch(90% 0.02 250);
    --kong-text: oklch(20% 0.02 250);
    --kong-text-dim: oklch(50% 0.02 250);
    
    /* Effects */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.08);
    --radius-lg: 1.2rem;
    --radius-md: 0.75rem;
    
    --font-main: 'Inter', system-ui, -apple-system, sans-serif;
  }

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

  body {
    font-family: var(--font-main);
    background-color: var(--kong-bg);
    color: var(--kong-text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
}

@layer layout {
  .app-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
    padding: 1rem;
  }

  @media (min-width: 900px) {
    .app-container {
      grid-template-columns: 1fr 300px;
      padding-top: 2rem;
    }
  }

  main { min-width: 0; }
  aside { display: none; }
  @media (min-width: 900px) { aside { display: block; } }
}

@layer components {
  kong-header, kong-feed, kong-sidebar, kong-post {
    display: block;
  }
}