/* design-guide.css – External stylesheet containing design tokens & styles */

:root {
  /* Colors */
  --color-primary: #0053a0;
  --color-primary-light: #e6f0fb;
  --color-secondary: #6c757d;
  --color-danger: #c62828;
  --color-bg: #f5f7fa;
  --color-white: #ffffff;
  --color-border: #d1d9e6;
  --color-text: #222;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.15);

  /* Typography */
  --font-base: 16px;
  --font-large: 20px;
  --font-title: 28px;
}

body {
  margin: 0;
  padding: 0;
  font-family: system-ui, Arial, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
}

/* Layout */
.pms-header {
  background: var(--color-primary);
  color: var(--color-white);
  padding: var(--space-lg);
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.pms-title {
  margin: 0;
  font-size: var(--font-title);
}
.pms-container {
  max-width: 960px;
  margin: auto;
  padding: var(--space-lg);
}
.pms-section {
  background: var(--color-white);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.pms-section-title {
  margin-bottom: var(--space-md);
  font-size: var(--font-large);
}

/* Buttons */
.btn {
  padding: var(--space-sm) var(--space-md);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-base);
  cursor: pointer;
  margin-right: var(--space-sm);
}
.btn-primary { background: var(--color-primary); color: var(--color-white); }
.btn-secondary { background: var(--color-secondary); color: var(--color-white); }
.btn-danger { background: var(--color-danger); color: var(--color-white); }

/* Card */
.card {
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
}
.card-title { margin-top: 0; font-size: var(--font-large); }
.card-text { margin: 0; }

/* Forms */
.form-group { margin-bottom: var(--space-md); }
.form-label { display: block; margin-bottom: var(--space-xs); font-weight: bold; }
.form-input {
  width: 100%;
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  font-size: var(--font-base);
}

/* Table */
.pms-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--color-border);
}
.pms-table th,
.pms-table td {
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  text-align: left;
}
.pms-table th {
  background: var(--color-primary-light);
  font-weight: bold;
}

/* Badges */
.badge {
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  color: var(--color-white);
  font-size: 14px;
}
.badge-green { background: #2e7d32; }
.badge-yellow { background: #fbc02d; }