/**
 * Main stylesheet for FPM B2B Theme
 * Unified CSS architecture, layout system, and responsive design tokens.
 */

@layer reset, base, layout, components, utilities;

/* 1. Reset Layer */
@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
  }
  
  body {
    background-color: var(--color-slate-950);
    color: var(--color-slate-100);
    font-family: 'Inter', -apple-system, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
  }
  
  img {
    max-width: 100%;
    height: auto;
    display: block;
    content-visibility: auto;
  }
  
  a {
    color: inherit;
    text-decoration: none;
  }
  
  button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
  }
}

/* 2. Base Design Tokens */
@layer base {
  :root {
    --color-slate-50: #020617;
    --color-slate-100: #0f172a;
    --color-slate-200: #cbd5e1;
    --color-slate-300: #334155;
    --color-slate-400: #475569;
    --color-slate-500: #64748b;
    --color-slate-700: #cbd5e1;
    --color-slate-800: #e2e8f0;
    --color-slate-850: #f1f5f9;
    --color-slate-900: #ffffff;
    --color-slate-950: #f8fafc;
    
    --color-orange-400: #fb923c;
    --color-orange-500: #f97316;
    --color-orange-600: #ea580c;
    
    --color-blue-400: #60a5fa;
    --color-blue-500: #3b82f6;
    
    --color-emerald-400: #34d399;
    --color-emerald-500: #10b981;
    
    --color-rose-400: #f87171;
    --color-rose-500: #ef4444;

    --max-width-main: 80rem;   /* 1280px */
    --max-width-form: 56rem;   /* 896px */
    --max-width-narrow: 48rem; /* 768px */
    
    --spacing-xs: 0.5rem;
    --spacing-sm: 0.75rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 6rem;
  }
  
  h1, h2, h3, h4 {
    font-weight: 800;
    color: var(--color-slate-50);
    margin-top: 0;
  }
}

/* 3. Global Layout & Grid System */
@layer layout {
  .max-w-7xl {
    max-width: var(--max-width-main);
    margin-inline: auto;
    width: 100%;
  }
  .max-w-4xl {
    max-width: var(--max-width-form);
    margin-inline: auto;
    width: 100%;
  }
  .max-w-3xl {
    max-width: var(--max-width-narrow);
    margin-inline: auto;
    width: 100%;
  }
  .mx-auto {
    margin-inline: auto;
  }
  
  .px-4 { padding-inline: 1rem; }
  .py-8 { padding-block: 2rem; }
  .py-12 { padding-block: 3rem; }
  .py-16 { padding-block: clamp(3rem, 2rem + 4vw, 4rem); }
  .py-20 { padding-block: clamp(4rem, 3rem + 5vw, 5rem); }
  .py-24 { padding-block: clamp(4rem, 2rem + 8vw, 6rem); }
  .pt-32 { padding-block-start: clamp(6rem, 4rem + 10vw, 8rem); }
  .pb-24 { padding-block-end: clamp(4rem, 2rem + 8vw, 6rem); }
  
  .grid {
    display: grid;
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  
  .gap-4 { gap: var(--spacing-md); }
  .gap-6 { gap: var(--spacing-lg); }
  .gap-8 { gap: var(--spacing-xl); }
  .gap-12 { gap: var(--spacing-2xl); }
  
  .flex { display: flex; }
  .flex-col { flex-direction: column; }
  .flex-wrap { flex-wrap: wrap; }
  .items-center { align-items: center; }
  .justify-between { justify-content: space-between; }
  .justify-center { justify-content: center; }
  
  .space-y-2 > * + * { margin-block-start: 0.5rem; }
  .space-y-3 > * + * { margin-block-start: 0.75rem; }
  .space-y-4 > * + * { margin-block-start: 1rem; }
  .space-y-6 > * + * { margin-block-start: 1.5rem; }
  .space-y-8 > * + * { margin-block-start: 2rem; }
  
  .mb-2 { margin-block-end: 0.5rem; }
  .mb-4 { margin-block-end: 1rem; }
  .mb-6 { margin-block-end: 1.5rem; }
  .mb-8 { margin-block-end: 2rem; }
  .mb-12 { margin-block-end: 3rem; }
  
  .aspect-video { aspect-ratio: 16 / 9; }
  .aspect-square { aspect-ratio: 1 / 1; }
  .aspect-\[4\/3\] { aspect-ratio: 4 / 3; }
  
  .object-cover { object-fit: cover; }
  .w-full { width: 100%; }
  .h-full { height: 100%; }
  .overflow-hidden { overflow: clip; }
  .rounded-lg { border-radius: 0.5rem; }
  .rounded-xl { border-radius: 0.75rem; }
  .rounded-2xl { border-radius: 1rem; }
  .rounded-full { border-radius: 9999px; }
  .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.08); }

  /* Responsive Layout Utilities placed at the bottom to override base rules */
  @media (min-width: 640px) {
    .sm\:px-6 { padding-inline: 1.5rem; }
    .sm\:w-auto { width: auto; }
    .sm\:flex-row { flex-direction: row; }
    .sm\:p-8 { padding: 2rem; }
  }
  
  @media (min-width: 768px) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  
  @media (min-width: 1024px) {
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    
    .lg\:col-span-7 { grid-column: span 7 / span 7; }
    .lg\:col-span-5 { grid-column: span 5 / span 5; }
    .lg\:col-span-2 { grid-column: span 2 / span 2; }
  }
}

/* 4. Custom Components & Glassmorphism styles */
@layer components {
  /* Design Tokens for Typography */
  .text-xs { font-size: 0.75rem; }
  .text-sm { font-size: 0.875rem; }
  .text-lg { font-size: 1.125rem; }
  .text-xl { font-size: 1.25rem; }
  .text-2xl { font-size: 1.5rem; }
  .text-3xl { font-size: 1.875rem; }
  .text-4xl { font-size: 1.75rem; }
  .text-5xl { font-size: 2.25rem; }
  .text-6xl { font-size: 2.75rem; }
  
  @media (min-width: 640px) {
    .sm\:text-4xl { font-size: clamp(2rem, 1.8rem + 1vw, 2.5rem); }
    .sm\:text-5xl { font-size: clamp(2.25rem, 1.8rem + 2vw, 3rem); }
  }
  
  .font-mono { font-family: 'Roboto Mono', monospace; }
  .font-bold { font-weight: 700; }
  .font-extrabold { font-weight: 800; }
  .text-center { text-align: center; }
  
  /* Buttons */
  .btn {
    display: inline-block;
    padding-inline: 1.5rem;
    padding-block: 0.75rem;
    border-radius: 0.5rem;
    font-weight: 700;
    text-align: center;
    transition: background-color 0.2s, border-color 0.2s;
    cursor: pointer;
  }
  .btn-primary {
    background-color: var(--color-orange-500);
    border: 1px solid var(--color-orange-500);
    color: #ffffff;
  }
  .btn-primary:hover {
    background-color: var(--color-orange-600);
    border-color: var(--color-orange-600);
  }
  .btn-secondary {
    background-color: var(--color-slate-900);
    border: 1px solid var(--color-slate-800);
    color: var(--color-slate-300);
  }
  .btn-secondary:hover {
    background-color: var(--color-slate-850);
    border-color: var(--color-slate-700);
  }
  
  /* Cards using subgrid */
  .card-grid-subgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
  }
  
  .card-subgrid {
    grid-row: span 4;
    display: grid;
    grid-template-rows: subgrid;
    background-color: var(--color-slate-900);
    border: 1px solid var(--color-slate-800);
    border-radius: 1rem;
    padding: 1.5rem;
    transition: border-color 0.2s;
  }
  .card-subgrid:hover {
    border-color: var(--color-slate-700);
  }
  
  /* Glassmorphism panels */
  .panel-glass {
    background-color: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--color-slate-800);
    border-radius: 1rem;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  /* Checkbox / Radio checked state parent container highlights */
  label:has(input[type="radio"]:checked),
  label:has(input[type="checkbox"]:checked) {
    border-color: var(--color-orange-500) !important;
    background-color: var(--color-slate-850) !important;
    box-shadow: 0 0 0 1px var(--color-orange-500);
  }

  /* Override text-white within configurator form for light mode readability */
  #fpm-configurator-form h3,
  #fpm-configurator-form h4,
  #fpm-configurator-form span.text-white,
  #fpm-configurator-form select,
  #fpm-configurator-form input {
    color: var(--color-slate-100) !important;
  }
  #fpm-configurator-form label span.text-white {
    color: var(--color-slate-100) !important;
  }
}

@layer utilities {
  .bg-slate-900 { background-color: var(--color-slate-900); }
  .bg-slate-950 { background-color: var(--color-slate-950); }
  .bg-slate-900\/60 { background-color: rgba(255, 255, 255, 0.6); }
  .bg-slate-900\/80 { background-color: rgba(255, 255, 255, 0.8); }
  .bg-slate-800 { background-color: var(--color-slate-800); }
  .bg-slate-850 { background-color: var(--color-slate-850); }
  .bg-orange-500 { background-color: var(--color-orange-500); }
  .bg-orange-600 { background-color: var(--color-orange-600); }
  .bg-orange-500\/10 { background-color: rgba(249, 115, 22, 0.1); }
  .bg-orange-500\/20 { background-color: rgba(249, 115, 22, 0.2); }
  
  .border-slate-800 { border-color: var(--color-slate-800); }
  .border-slate-850 { border-color: var(--color-slate-850); }
  .border-slate-900 { border-color: var(--color-slate-900); }
  .border-orange-500 { border-color: var(--color-orange-500); }
  .border-orange-500\/30 { border-color: rgba(249, 115, 22, 0.3); }
  
  .text-slate-300 { color: var(--color-slate-300); }
  .text-slate-400 { color: var(--color-slate-400); }
  .text-slate-500 { color: var(--color-slate-500); }
  .text-orange-400 { color: var(--color-orange-400); }
  .text-orange-500 { color: var(--color-orange-500); }
  
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: clip;
  }
  
  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-clamp: 3;
    overflow: clip;
  }
  
  .overscroll-contain { overscroll-behavior: contain; }
  .scrollbar-gutter-stable { scrollbar-gutter: stable; }
  .hidden { display: none !important; }
}