@import "tailwindcss";

@theme {
  --color-surface: #131313;
  --color-surface-container-lowest: #0e0e0e;
  --color-surface-container: #201f1f;
  --color-surface-container-highest: #353534;
  --color-surface-bright: rgba(255, 255, 255, 0.6);
  --color-surface-low: #1c1c1c;

  --color-primary: #ffb694;
  --color-primary-container: #c2571a;
  --color-on-primary-container: #ffffff;

  --color-on-surface: #e5e2e1;
  --color-on-surface-variant: #dec0b4;
  --color-outline-variant: #574239;

  --font-inter: "Inter", sans-serif;
  --font-jetbrains: "JetBrains Mono", monospace;
  
  /* Defaults */
  --font-sans: "Inter", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
}

@layer base {
  body {
    background-color: var(--color-surface);
    color: var(--color-on-surface);
    font-family: var(--font-inter);
    margin: 0;
    padding: 0;
    min-height: 100vh;
  }
}

@layer components {
  /* The "Ghost Border" rule */
  .ghost-border {
    border: 1px solid color-mix(in srgb, var(--color-outline-variant) 15%, transparent);
  }
  .ghost-border-t {
    border-top: 1px solid color-mix(in srgb, var(--color-outline-variant) 15%, transparent);
  }
  .ghost-border-b {
    border-bottom: 1px solid color-mix(in srgb, var(--color-outline-variant) 15%, transparent);
  }
  
  /* Glassmorphism */
  .glass-panel {
    background-color: color-mix(in srgb, var(--color-surface-bright) 60%, transparent);
    backdrop-filter: blur(16px);
  }
}
