/* PanelKit Design System — style.css */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,400&display=swap');

/* ─── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* ─── Variables ──────────────────────────────────────────── */
:root {
  /* Colors */
  --color-bg:            #0F0F0F;
  --color-surface:       #1A1A1A;
  --color-surface-2:     #242424;
  --color-surface-3:     #2C2C2C;
  --color-border:        #2E2E2E;
  --color-border-light:  #3A3A3A;
  --color-text:          #F0EDE8;
  --color-text-muted:    #8A8680;
  --color-text-subtle:   #5A5754;
  --color-accent:        #FF6B35;
  --color-accent-hover:  #FF8555;
  --color-accent-muted:  rgba(255,107,53,0.12);
  --color-accent-glow:   rgba(255,107,53,0.25);
  --color-success:       #4ADE80;
  --color-success-muted: rgba(74,222,128,0.12);
  --color-warning:       #FBBF24;
  --color-warning-muted: rgba(251,191,36,0.12);
  --color-danger:        #F87171;
  --color-danger-muted:  rgba(248,113,113,0.12);
  --color-info:          #60A5FA;
  --color-info-muted:    rgba(96,165,250,0.12);

  /* Typography */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  /* Spacing */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;

  /* Borders */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.3);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.4);
  --shadow-glow: 0 0 24px rgba(255,107,53,0.3);

  /* Transitions */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 350ms ease;
}

/* ─── Base ───────────────────────────────────────────────── */
body {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  line-height: 1.15;
  color: var(--color-text);
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 700; }
h2 { font-size: clamp(1.8rem, 3vw, 2.75rem); font-weight: 600; }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.75rem); font-weight: 600; }
h4 { font-size: 1.25rem; font-weight: 500; font-family: var(--font-body); }
h5 { font-size: 1.05rem; font-weight: 500; font-family: var(--font-body); }
h6 { font-size: 0.9rem; font-weight: 600; font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); }

p { line-height: 1.7; }
small { font-size: 0.85rem; }
strong { font-weight: 600; }

/* ─── Containers ─────────────────────────────────────────── */
.container    { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--space-5); }
.container-sm { width: 100%; max-width: 800px;  margin-inline: auto; padding-inline: var(--space-5); }
.container-xs { width: 100%; max-width: 560px;  margin-inline: auto; padding-inline: var(--space-5); }

/* ─── Text Utilities ─────────────────────────────────────── */
.text-muted   { color: var(--color-text-muted) !important; }
.text-subtle  { color: var(--color-text-subtle) !important; }
.text-accent  { color: var(--color-accent) !important; }
.text-success { color: var(--color-success) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-danger  { color: var(--color-danger) !important; }
.text-center  { text-align: center; }
.text-sm      { font-size: 0.875rem; }
.text-xs      { font-size: 0.75rem; }
.text-lg      { font-size: 1.125rem; }

/* ─── Spacing ────────────────────────────────────────────── */
.mt-1 { margin-top: var(--space-1); }    .mb-1 { margin-bottom: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }    .mb-2 { margin-bottom: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }    .mb-3 { margin-bottom: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }    .mb-4 { margin-bottom: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }    .mb-5 { margin-bottom: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }    .mb-6 { margin-bottom: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }    .mb-7 { margin-bottom: var(--space-7); }
.mt-8 { margin-top: var(--space-8); }    .mb-8 { margin-bottom: var(--space-8); }
.pt-1 { padding-top: var(--space-1); }   .pb-1 { padding-bottom: var(--space-1); }
.pt-2 { padding-top: var(--space-2); }   .pb-2 { padding-bottom: var(--space-2); }
.pt-3 { padding-top: var(--space-3); }   .pb-3 { padding-bottom: var(--space-3); }
.pt-4 { padding-top: var(--space-4); }   .pb-4 { padding-bottom: var(--space-4); }
.pt-5 { padding-top: var(--space-5); }   .pb-5 { padding-bottom: var(--space-5); }
.pt-6 { padding-top: var(--space-6); }   .pb-6 { padding-bottom: var(--space-6); }
.pt-7 { padding-top: var(--space-7); }   .pb-7 { padding-bottom: var(--space-7); }
.pt-8 { padding-top: var(--space-8); }   .pb-8 { padding-bottom: var(--space-8); }

/* ─── Flex Utilities ─────────────────────────────────────── */
.flex          { display: flex; }
.flex-col      { display: flex; flex-direction: column; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.flex-wrap       { flex-wrap: wrap; }
.flex-1          { flex: 1; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }

/* ─── Grid Utilities ─────────────────────────────────────── */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-5);
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .desktop-only { display: none !important; }
  h1 { font-size: 2rem; }
  h2 { font-size: 1.6rem; }
}
@media (min-width: 769px) {
  .mobile-only { display: none !important; }
}