/* ===================================================================
   PACS27 — The Proxmox & Ceph Summit 2027
   Design Tokens (CSS custom properties)
   Organizer: croit GmbH · v1.0.0
   Fonts: Urbanist + JetBrains Mono (Google Fonts, open source)
   Default theme: DARK. Light theme via [data-theme="light"].
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  /* --- Brand cores (equal tri-color) --- */
  --pacs-proxmox: #E57000;   /* Proxmox Orange */
  --pacs-ceph:    #F1726C;   /* Ceph Coral */
  --pacs-croit:   #8E54E9;   /* croit Purple */

  /* --- Support --- */
  --pacs-proxmox-dark: #B85A00;
  --pacs-ceph-dark:    #D8554F;
  --pacs-croit-dark:   #6C3EB5;
  --pacs-peach:        #FCA68C;
  --pacs-teal:         #0A889A;

  /* --- Neutrals --- */
  --pacs-anthracite: #1D1D1B;
  --pacs-ink:        #191A1A;
  --pacs-graphite:   #2A2A28;
  --pacs-slate-700:  #333333;
  --pacs-slate-500:  #4A4A4A;
  --pacs-slate-400:  #6B6B69;
  --pacs-slate-300:  #9A9A98;
  --pacs-mist:       #F6F6F6;
  --pacs-white:      #FFFFFF;

  /* --- Semantic --- */
  --pacs-success: #2BB673;
  --pacs-warning: #E5A100;
  --pacs-error:   #E5484D;
  --pacs-info:    #0A889A;

  /* --- Signature gradients --- */
  --pacs-gradient-tri:  linear-gradient(135deg, #E57000 0%, #F1726C 50%, #8E54E9 100%);
  --pacs-gradient-warm: linear-gradient(135deg, #E57000 0%, #F1726C 100%);
  --pacs-gradient-cool: linear-gradient(135deg, #F1726C 0%, #8E54E9 100%);

  /* --- Typography --- */
  --pacs-font-heading: 'Urbanist', 'Segoe UI', system-ui, sans-serif;
  --pacs-font-body:    'Urbanist', 'Segoe UI', system-ui, sans-serif;
  --pacs-font-mono:    'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

  --pacs-fs-display: 3.5rem;
  --pacs-fs-h1: 2.5rem;
  --pacs-fs-h2: 1.875rem;
  --pacs-fs-h3: 1.375rem;
  --pacs-fs-lead: 1.25rem;
  --pacs-fs-body: 1rem;
  --pacs-fs-small: 0.875rem;
  --pacs-fs-label: 0.75rem;

  /* --- Spacing (8px base) --- */
  --pacs-space-1: 4px;  --pacs-space-2: 8px;  --pacs-space-3: 12px;
  --pacs-space-4: 16px; --pacs-space-5: 24px; --pacs-space-6: 32px;
  --pacs-space-7: 48px; --pacs-space-8: 64px; --pacs-space-9: 96px;

  /* --- Radius --- */
  --pacs-radius-sm: 8px;
  --pacs-radius-md: 12px;
  --pacs-radius-lg: 18px;
  --pacs-radius-xl: 24px;
  --pacs-radius-pill: 999px;

  /* --- Shadow & effects --- */
  --pacs-shadow-sm: 0 1px 3px rgba(0,0,0,0.18);
  --pacs-shadow-md: 0 6px 20px rgba(0,0,0,0.22);
  --pacs-shadow-lg: 0 16px 48px rgba(0,0,0,0.30);
  --pacs-glow: 0 8px 32px rgba(142,84,233,0.28);
  --pacs-glass-blur: blur(14px);
  --pacs-focus-ring: 0 0 0 3px rgba(142,84,233,0.45);

  /* --- Themed surface tokens (DARK default) --- */
  --pacs-bg:           #1D1D1B;
  --pacs-surface:      #2A2A28;
  --pacs-glass-fill:   rgba(255,255,255,0.06);
  --pacs-glass-border: rgba(255,255,255,0.14);
  --pacs-text:         #FFFFFF;
  --pacs-text-muted:   #B8B8B6;
  --pacs-line:         #3A3A38;
  --pacs-primary:      var(--pacs-croit); /* practical UI accent */
}

[data-theme="light"] {
  --pacs-bg:           #FFFFFF;
  --pacs-surface:      #F6F6F6;
  --pacs-glass-fill:   rgba(29,29,27,0.04);
  --pacs-glass-border: rgba(29,29,27,0.10);
  --pacs-text:         #1D1D1B;
  --pacs-text-muted:   #4A4A4A;
  --pacs-line:         #E3E3E1;
  --pacs-primary:      var(--pacs-croit-dark);
}

/* --- Reusable primitives --- */
.pacs-glass {
  background: var(--pacs-glass-fill);
  border: 1px solid var(--pacs-glass-border);
  backdrop-filter: var(--pacs-glass-blur);
  -webkit-backdrop-filter: var(--pacs-glass-blur);
  border-radius: var(--pacs-radius-lg);
}
.pacs-gradient-border {
  position: relative;
  border-radius: var(--pacs-radius-lg);
  background:
    linear-gradient(var(--pacs-bg), var(--pacs-bg)) padding-box,
    var(--pacs-gradient-tri) border-box;
  border: 1px solid transparent;
}
.pacs-label {
  font-family: var(--pacs-font-heading);
  font-weight: 600;
  font-size: var(--pacs-fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pacs-btn-primary {
  font-family: var(--pacs-font-heading);
  font-weight: 600;
  color: #fff;
  background: var(--pacs-gradient-tri);
  border: none;
  border-radius: var(--pacs-radius-pill);
  padding: 12px 28px;
  cursor: pointer;
  box-shadow: var(--pacs-glow);
}
.pacs-btn-secondary {
  font-family: var(--pacs-font-heading);
  font-weight: 600;
  color: var(--pacs-text);
  background: transparent;
  border: 1px solid var(--pacs-glass-border);
  border-radius: var(--pacs-radius-pill);
  padding: 12px 28px;
  cursor: pointer;
}
:focus-visible { outline: none; box-shadow: var(--pacs-focus-ring); }