@import "tailwindcss";
@config "/var/www/Portfolio/static/tailwind.config.js";  /* path is relative to THIS css file */

/* --- Design tokens (light/dark) --- */
@layer base {
  :root {
    --bg: 10 10 10;
    --fg: 245 245 245;
    --muted: 165 165 165;
    --accent: 249 115 22; /* orange-500 */
    --border: 38 38 38;
    --card: 18 18 18;
  }
  :root[data-theme="light"] {
    --bg: 255 255 255;
    --fg: 17 17 17;
    --muted: 115 115 115;
    --accent: 234 88 12; /* orange-600 */
    --border: 229 231 235;
    --card: 250 250 250;
  }

  html, body { height: 100%; }
  body { background: rgb(var(--bg)); color: rgb(var(--fg)); }
}

/* --- Component classes --- */
@layer components {
  /* container-page (no variants in @apply) */
  .container-page { @apply max-w-7xl mx-auto px-4; }
}
@layer components {
  @screen sm { .container-page { @apply px-6; } }
  @screen lg { .container-page { @apply px-8; } }
}

@layer components {
  .btn { @apply inline-flex items-center gap-2 rounded-xl px-4 py-2 font-medium border transition; }

  .btn-primary { @apply border-transparent bg-[rgb(var(--accent))] text-white; }
  .btn-primary:hover { @apply opacity-90; }

  .btn-ghost { @apply border-[rgb(var(--border))] bg-transparent text-[rgb(var(--fg))]; }
  .btn-ghost:hover { @apply bg-[rgb(var(--card))]; }

  .card { @apply rounded-2xl border border-[rgb(var(--border))] bg-[rgb(var(--card))] p-6 shadow; }

  .heading-hero { @apply font-archivo font-extrabold tracking-tight text-4xl; }
}
@layer components {
  @screen sm { .heading-hero { @apply text-6xl; } }
}

@layer components {
  .subtle { color: rgb(var(--muted)); }
  .nav-link { @apply text-sm text-[rgb(var(--muted))] transition; }
  .nav-link:hover { @apply text-[rgb(var(--fg))]; }
}

/* --- Utilities --- */
@layer utilities {
  .shadow-glass { box-shadow: 0 8px 30px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.06); }
}

