/*
Theme Name: SYST Headless 2026
Theme URI: https://syst.com.gt
Author: Arquitecto 2026
Author URI: https://juliochicas.com
Description: Tema Headless / Ligero para SYST - Diseñado con Arquitectura 2026 (Tailwind, Vanilla JS, Dark & Glassmorphism)
Version: 1.0.0
Text Domain: syst
*/

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom CSS moved from index.html -> We let Tailwind handle most, but keep custom properties if needed */
@layer base {
  :root {
    --mint: #7BC8BA;
    --mint-hover: #5FB8A8;
    --mint-glow: rgba(123, 200, 186, 0.25);
    --mint-subtle: rgba(123, 200, 186, 0.08);
    --mint-light: #EDF8F6;
    
    --dark-900: #000000;
    --dark-800: #0A0F0E;
    --dark-700: #111917;
    --dark-600: #1A2420;
    --dark-500: #243330;
    --gray-100: #F1F4F3;
    --gray-200: #E2E6E5;
    --gray-300: #C5CCCA;
    --gray-400: #8E9896;
    --gray-500: #5E6664;
    --white: #FFFFFF;

    --text-primary: #0A0F0E;
    --text-secondary: #3D4442;
    --text-muted: #5E6664;
    --text-on-dark: #F1F4F3;
    --text-on-dark-muted: #8E9896;
    --border: rgba(0, 0, 0, 0.08);
    --border-dark: rgba(255, 255, 255, 0.08);
    --error: #EF4444;

    --shadow-soft: 0 2px 8px rgba(0,0,0,0.04), 0 0 1px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.06), 0 0 1px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.08), 0 0 1px rgba(0,0,0,0.1);
    --shadow-glow: 0 0 20px var(--mint-glow);
    
    --glass-bg: rgba(255, 255, 255, 0.72);
    --glass-border: rgba(255, 255, 255, 0.6);
    --glass-dark: rgba(0, 0, 0, 0.4);
    --glass-dark-border: rgba(255, 255, 255, 0.06);
  }
}

@layer components {
    .container {
        width: 100%;
        max-width: 1120px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}