/* ==========================================================
   AJEC DESIGN SYSTEM
   Foundation
========================================================== */

/* ===== VARIABLES ===== */

:root {
  /* Color */

  --ajec-primary: #2563eb;
  --ajec-primary-hover: #1d4ed8;

  --ajec-background: #FAFAFA;
  --ajec-surface: #eef6ff; /* Section biasa */
  --ajec-surface-muted: #f3f4f6; /* Abu-abu untuk Teacher */
  --ajec-surface-accent: #dbeafe; /* CTA, lebih menonjol */

  --ajec-text: #222222;
  --ajec-text-muted: #6b7280;

  --ajec-border: #e5e7eb;

  --ajec-success: #22c55e;
  --ajec-warning: #f59e0b;
  --ajec-danger: #ef4444;
  /* Typography */

  /* Font Family */
  --ajec-font-family: "Inter", sans-serif;

  /* Font Size */
  --ajec-font-h1: 48px;
  --ajec-font-h2: 36px;
  --ajec-font-h3: 30px;
  --ajec-font-h4: 24px;
  --ajec-font-h5: 20px;
  --ajec-font-body: 16px;
  --ajec-font-small: 14px;

  /* Font Weight */
  --ajec-font-regular: 400;
  --ajec-font-medium: 500;
  --ajec-font-semibold: 600;
  --ajec-font-bold: 700;

  /* Line Height */
  --ajec-line-height-heading: 1.2;
  --ajec-line-height-body: 1.6;

  /* Radius */
  --ajec-radius: 10px;

  /* Spacing */
  --ajec-space: 16px;
  --ajec-space-xs: 8px;
  --ajec-space-sm: 16px;
  --ajec-space-md: 24px;
  --ajec-space-lg: 32px;
  --ajec-space-xl: 48px;
  --ajec-space-2xl: 64px;

  /* Container */
  --ajec-container: 1200px;
  --ajec-container-sm: 420px;

  /* Animation */
  --ajec-transition: 0.2s ease;

  /* Form */
  --ajec-input-height: 48px;
  --ajec-input-padding: 16px;

  /* Button */
  --ajec-btn-height: 48px;
  --ajec-btn-padding-x: 24px;
  --ajec-btn-radius: var(--ajec-radius);

  /* Shadow */
  --ajec-shadow-sm: 0 4px 12px rgba(37, 99, 235, 0.15);
  --ajec-shadow-md: 0 8px 20px rgba(37, 99, 235, 0.25);

  --ajec-shadow-card: 0 10px 30px rgba(37,99,235,.08);
}

/* ===== BASE ===== */

/* Body */
body {
  font-family: var(--ajec-font-family);
  font-size: var(--ajec-font-body);
  font-weight: var(--ajec-font-regular);
  line-height: var(--ajec-line-height-body);

  color: var(--ajec-text);
  background: var(--ajec-background);
}

/* Heading */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;

  font-weight: var(--ajec-font-bold);
  line-height: var(--ajec-line-height-heading);

  color: var(--ajec-text);
}

h1 {
  font-size: var(--ajec-font-h1);
}

h2 {
  font-size: var(--ajec-font-h2);
}

h3 {
  font-size: var(--ajec-font-h3);
}

h4 {
  font-size: var(--ajec-font-h4);
}

h5 {
  font-size: var(--ajec-font-h5);
}

h6 {
  font-size: var(--ajec-font-body);
}

/* Paragraph */
p {
  margin: 0;

  font-size: var(--ajec-font-body);
  line-height: var(--ajec-line-height-body);

  color: var(--ajec-text);
}

/* Link */
a {
  color: var(--ajec-primary);
  text-decoration: none !important;

  transition: color var(--ajec-transition);
}

a:hover {
  text-decoration: none !important;
  color: var(--ajec-primary-hover);
}