/*
  Halal Academy — Design System (CSS‑only)
  Scope: Reusable tokens, utilities, and components with the prefix `ha-`
  Intent: Clean, flat, lively (halal concept), accessible, framework‑agnostic
  Usage: <link rel="stylesheet" href="/css/halal-academy-design-system.css" />
*/

/* =====================
   1) Design Tokens
   ===================== */
:root{
  /* Brand palette (Halal greens + neutrals) */
  --ha-brand-50:#ecfdf5;  --ha-brand-100:#d1fae5; --ha-brand-200:#a7f3d0;
  --ha-brand-300:#6ee7b7; --ha-brand-400:#34d399; --ha-brand-500:#10b981;
  --ha-brand-600:#059669; --ha-brand-700:#047857; --ha-brand-800:#065f46; --ha-brand-900:#064e3b;

  --ha-accent-50:#e6fffb; --ha-accent-400:#2dd4bf; --ha-accent-600:#0d9488;

  --ha-ink:#0b1424;         /* primary text */
  --ha-ink-muted:#5b6b81;   /* secondary text */
  --ha-paper:#ffffff;       /* surfaces */
  --ha-surface:#f7fafc;     /* page background */
  --ha-line:#e2e8f0;        /* borders/dividers */

  /* Semantic */
  --ha-ok-50:#ecfdf5;   --ha-ok-500:#10b981;   --ha-ok-700:#047857;
  --ha-warn-50:#fffbeb; --ha-warn-500:#f59e0b; --ha-warn-700:#b45309;
  --ha-bad-50:#fef2f2;  --ha-bad-500:#ef4444;  --ha-bad-700:#b91c1c;
  --ha-info-50:#eff6ff; --ha-info-500:#3b82f6; --ha-info-700:#1d4ed8;

  /* Typography scale */
  --ha-font-sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --ha-fs-12: .75rem;   /* 12 */
  --ha-fs-14: .875rem;  /* 14 */
  --ha-fs-16: 1rem;     /* 16 */
  --ha-fs-18: 1.125rem; /* 18 */
  --ha-fs-20: 1.25rem;  /* 20 */
  --ha-fs-24: 1.5rem;   /* 24 */
  --ha-fs-30: 1.875rem; /* 30 */
  --ha-fs-36: 2.25rem;  /* 36 */
  --ha-fs-48: 3rem;     /* 48 */

  /* Spacing scale */
  --ha-sp-0: 0; --ha-sp-2: .125rem; --ha-sp-4: .25rem; --ha-sp-6: .375rem; --ha-sp-8: .5rem;
  --ha-sp-10: .625rem; --ha-sp-12: .75rem; --ha-sp-16: 1rem; --ha-sp-20: 1.25rem; --ha-sp-24: 1.5rem;
  --ha-sp-32: 2rem; --ha-sp-40: 2.5rem; --ha-sp-48: 3rem; --ha-sp-64: 4rem;

  /* Radii & shadows */
  --ha-r-6: .375rem; --ha-r-10: .625rem; --ha-r-14: .875rem; --ha-r-18: 1.125rem; --ha-r-24: 1.5rem;
  --ha-shadow-1: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.1);
  --ha-shadow-2: 0 6px 20px rgba(2, 6, 23, .08);
  --ha-ring: 0 0 0 3px rgba(16,185,129,.25);

  /* Content width */
  --ha-container: 1200px;
}

@media (prefers-color-scheme: dark){
  :root{
  	--ha-black:#000;
  	--ha-white:#fff;
    --ha-ink:#e7f1ff;
    --ha-ink-muted:#a8b3c7;
    --ha-paper:#0e1726;
    --ha-surface:#0b1420;
    --ha-line:#203047;
    --ha-shadow-1: 0 1px 2px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.4);
    --ha-shadow-2: 0 8px 24px rgba(0,0,0,.45);
  }
}

/* =====================
   2) Base & Resets
   ===================== */
*{ box-sizing: border-box }
html,body{ height:100% }
html{ scroll-behavior:smooth }
body{
  margin:0; background: var(--ha-surface); color:var(--ha-ink);
  font: 400 var(--ha-fs-16)/1.6 var(--ha-font-sans);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; height:auto; vertical-align:middle }
button,input,select,textarea{ font: inherit; color:inherit }

/* =====================
   3) Layout Helpers
   ===================== */
.ha-container{ width: min(100% - 2rem, var(--ha-container)); margin-inline:4rem }
.ha-stack{ display:flex; flex-direction:column; gap: var(--ha-sp-16) }
.ha-inline{ display:flex; flex-wrap:wrap; gap: var(--ha-sp-12); align-items:center }
.ha-center{ display:grid; place-items:center }
.ha-grid{ display:grid; gap: var(--ha-sp-16) }
@media (min-width: 640px){ .ha-grid.sm-2{ grid-template-columns: repeat(2, minmax(0,1fr)) } }
@media (min-width: 768px){ .ha-grid.md-3{ grid-template-columns: repeat(3, minmax(0,1fr)) } }
@media (min-width: 1024px){ .ha-grid.lg-4{ grid-template-columns: repeat(4, minmax(0,1fr)) } }

.ha-section{ padding-block: var(--ha-sp-48) ;width: auto;}
.ha-card{
  background: var(--ha-paper); border:1px solid var(--ha-line); border-radius: var(--ha-r-18);
  box-shadow: var(--ha-shadow-1); overflow:hidden
}
.ha-card__body{ padding: var(--ha-sp-20) }
.ha-card__footer{ padding: var(--ha-sp-16); border-top:1px solid var(--ha-line) }

/* =====================
   4) Typography
   ===================== */
.ha-eyebrow{ text-transform:uppercase; letter-spacing:.08em; font-weight:600; color:var(--ha-ink-muted); font-size:var(--ha-fs-12) }
.ha-h1{ font-size: clamp(2rem, 1.2rem + 2.5vw, 3rem); line-height:1.15; font-weight:800 }
.ha-h2{ font-size: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); line-height:1.2; font-weight:700 }
.ha-h3{ font-size: var(--ha-fs-24); font-weight:700 }
.ha-lead{ font-size: var(--ha-fs-18); color:var(--ha-ink-muted) }
.ha-muted{ color:var(--ha-ink-muted) }

/* Links */
.ha-link{ color: var(--ha-brand-700); text-decoration: none }
.ha-link:hover{ text-decoration: underline }

/* =====================
   5) Buttons
   ===================== */
.ha-btn{ 
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding: .6rem 1rem; border-radius: var(--ha-r-14); border:1px solid transparent; cursor:pointer;
  background: var(--ha-line); color: var(--ha-white); text-decoration:none; font-weight:600;
  box-shadow: var(--ha-shadow-1); transition: transform .05s ease, box-shadow .2s ease, background .2s;
}
.ha-btn:focus{ outline:none; box-shadow: var(--ha-ring) }
.ha-btn:active{ transform: translateY(1px) }

.ha-btn--primary{ background: var(--ha-brand-600); color:#fff; border-color: var(--ha-brand-600) }
.ha-btn--primary:hover{ background: var(--ha-brand-700) }

.ha-btn--ghost{ background:transparent; border-color: var(--ha-line) }
.ha-btn--ghost:hover{ background: rgba(2,6,23,.04) }

.ha-btn--danger{ background: var(--ha-bad-500); color:#fff; border-color: var(--ha-bad-500) }
.ha-btn--warning{ background: var(--ha-warn-500); color:#1f2937; border-color: var(--ha-warn-500) }
.ha-btn--ok{ background: var(--ha-ok-500); color:#fff; border-color: var(--ha-ok-500) }

.ha-btn--sm{ padding:.45rem .8rem; border-radius: var(--ha-r-10); font-size: var(--ha-fs-14) }
.ha-btn--lg{ padding:.9rem 1.2rem; border-radius: var(--ha-r-18); font-size: var(--ha-fs-18) }

/* Icon circle */
.ha-icon-btn{ width:2.5rem; height:2.5rem; display:inline-grid; place-items:center; border-radius: 999px; border:1px solid var(--ha-line); background: var(--ha-paper) }
.ha-icon-btn:hover{ background: #f2f6fb }

/* =====================
   6) Forms
   ===================== */
.ha-field{ display:grid; gap:.4rem }
.ha-label{ font-weight:600; font-size: var(--ha-fs-14) }
.ha-input, .ha-select, .ha-textarea{
  width:100%; padding:.65rem .8rem; border:1px solid var(--ha-line); background: var(--ha-paper);
  color:var(--ha-ink); border-radius: var(--ha-r-10); box-shadow: inset 0 1px 0 rgba(2,6,23,.04);
}
.ha-input:focus, .ha-select:focus, .ha-textarea:focus{ outline:none; box-shadow: var(--ha-ring); border-color: var(--ha-brand-400) }
.ha-help{ font-size: var(--ha-fs-12); color: var(--ha-ink-muted) }
.ha-error{ font-size: var(--ha-fs-12); color: var(--ha-bad-500) }

/* Checkboxes & radios */
.ha-check{ display:flex; align-items:center; gap:.6rem }
.ha-check input[type="checkbox"], .ha-check input[type="radio"]{
  width:1.1rem; height:1.1rem; accent-color: var(--ha-brand-600);
}

/* Input groups */
.ha-input-group{ display:flex; align-items:stretch }
.ha-input-group > .ha-input{ border-top-right-radius:0; border-bottom-right-radius:0 }
.ha-input-group > .ha-btn{ border-top-left-radius:0; border-bottom-left-radius:0 }

/* =====================
   7) Navigation
   ===================== */
.ha-topbar{ position:sticky; top:0; z-index:50; background: rgba(255,255,255,.8); backdrop-filter: blur(8px); border-bottom:1px solid var(--ha-line) }
.ha-topbar__row{ display:flex; align-items:center; gap:1rem; padding:.75rem 1rem; margin-inline:1.2rem }
.ha-brand{ display:flex; align-items:center; gap:.6rem; font-weight:800; text-decoration:none; color:inherit }
.ha-brand__logo{ width:2.25rem; height:2.25rem; display:grid; place-items:center; border-radius: .9rem; background: var(--ha-brand-600); color:#fff; font-weight:800 }
.ha-nav{ margin-left:auto; display:flex; gap:1rem }
.ha-nav a{text-decoration:none; padding:.4rem .6rem; border-radius:.5rem }
.ha-nav a:hover{ background: rgba(2,6,23,.05) }

/* =====================
   8) Badges & Chips
   ===================== */
.ha-badge{ display:inline-flex; align-items:center; gap:.4rem; padding:.25rem .55rem; border-radius: 999px; font-size: var(--ha-fs-12); font-weight:600 }
.ha-badge--brand{ background: var(--ha-brand-100); color: var(--ha-brand-800) }
.ha-badge--ok{ background: var(--ha-ok-50); color: var(--ha-ok-700) }
.ha-badge--warn{ background: var(--ha-warn-50); color: var(--ha-warn-700) }
.ha-badge--bad{ background: var(--ha-bad-50); color: var(--ha-bad-700) }
.ha-chip{ padding:.35rem .8rem; border-radius:999px; background: var(--ha-brand-50); color: var(--ha-brand-800); font-size: var(--ha-fs-12); font-weight:600; display:inline-block }

/* =====================
   9) Tables
   ===================== */
.ha-table{ width:100%; border-collapse: collapse; border:1px solid var(--ha-line); border-radius: var(--ha-r-14); overflow:hidden }
.ha-table th, .ha-table td{ padding:.75rem 1rem; border-bottom:1px solid var(--ha-line); text-align:left }
.ha-table thead th{ background:#f3f7fb; font-size: var(--ha-fs-14) }
.ha-table tbody tr:hover{ background:#f7fbff }

/* =====================
   10) Alerts
   ===================== */
.ha-alert{ border:1px solid; border-radius: var(--ha-r-14); padding: .8rem 1rem; display:flex; gap:.75rem; align-items:flex-start }
.ha-alert--info{ background: var(--ha-info-50); border-color: #bfdbfe; color: var(--ha-info-700) }
.ha-alert--ok{ background: var(--ha-ok-50); border-color: #a7f3d0; color: var(--ha-ok-700) }
.ha-alert--warn{ background: var(--ha-warn-50); border-color: #fde68a; color: var(--ha-warn-700) }
.ha-alert--bad{ background: var(--ha-bad-50); border-color: #fecaca; color: var(--ha-bad-700) }

/* =====================
   11) Progress & Meters
   ===================== */
.ha-progress{ height:.5rem; background:#e5edf6; border-radius:999px; overflow:hidden }
.ha-progress__bar{ height:100%; width:0; background: linear-gradient(90deg, var(--ha-brand-500), var(--ha-brand-700)); transition: width .4s ease }

/* =====================
   12) Cards (course/catalog)
   ===================== */
.ha-course{ display:flex; flex-direction:column; border:1px solid var(--ha-line); border-radius: var(--ha-r-18); overflow:hidden; background:var(--ha-paper); box-shadow: var(--ha-shadow-1) }
.ha-course__cover{ object-fit: cover; width:100%; display:block }
.ha-course__body{ padding: var(--ha-sp-16); display:grid; gap:.5rem }
.ha-course__meta{ color:var(--ha-ink-muted); font-size: var(--ha-fs-14) }
.ha-course__row{ margin-top:auto; display:flex; justify-content:space-between; align-items:center; gap:.75rem }

/* =====================
   13) Tabs (CSS‑only)
   ===================== */
.ha-tabs{ display:grid; gap: var(--ha-sp-16) }
.ha-tabs__list{ display:flex; gap:.4rem; border-bottom:1px solid var(--ha-line) }
.ha-tab{ appearance:none; border:none; background:transparent; padding:.6rem .9rem; font-weight:600; border-radius:.6rem .6rem 0 0; cursor:pointer }
.ha-tab[aria-selected="true"], .ha-tab.is-active{ background: var(--ha-paper); border:1px solid var(--ha-line); border-bottom-color: transparent }

/* =====================
   14) Modal (styling only)
   ===================== */
.ha-modal{ position:fixed; inset:0; display:none; place-items:center; padding:1rem; z-index:60 }
.ha-modal.is-open{ display:grid }
.ha-modal__scrim{ position:absolute; inset:0; background: rgba(0,0,0,.5) }
.ha-modal__panel{ position:relative; background: var(--ha-paper); width:min(800px, 96vw); border-radius: var(--ha-r-18); box-shadow: var(--ha-shadow-2); border:1px solid var(--ha-line); padding:1rem }

/* =====================
   15) Hero & Sections
   ===================== */
.ha-hero{
  background:
    radial-gradient(60% 40% at 80% -10%, var(--ha-brand-100), transparent 60%),
    linear-gradient(180deg, #f8fafc 0%, #ecfeff 100%);
  padding: var(--ha-sp-48) 0; border-bottom:1px solid var(--ha-line);
}
.ha-hero__panel{ display:grid; gap: var(--ha-sp-16) }

/* =====================
   16) Certificates (print‑friendly frame)
   ===================== */
.ha-cert{
  background:#fff; color:#111; border: 2px solid var(--ha-brand-600); border-radius: 14px; padding: 2rem;
  width: 1120px; max-width:100%; aspect-ratio: 1120/792; box-shadow: var(--ha-shadow-1);
  display:grid; place-items:center; text-align:center
}
.ha-cert__title{ font-size: 2rem; font-weight:800; color: var(--ha-brand-800) }
.ha-cert__name{ font-size: 1.8rem; font-weight:800 }
.ha-cert__meta{ color:#1f2937; font-size: 1rem }

@media print{
  body{ background:#fff }
  .ha-topbar, .ha-btn, .ha-alert, .ha-nav{ display:none !important }
  .ha-cert{ box-shadow:none; border-color:#000 }
}

/* =====================
   17) Utilities (spacing, display, width, text)
   ===================== */
.ha-hidden{ display:none !important }
.ha-block{ display:block }
.ha-flex{ display:flex }
.ha-grid-u{ display:grid }
.ha-w-100{ width:100% }
.ha-text-center{ text-align:center }
.ha-text-right{ text-align:right }
.ha-mt-0{ margin-top:0 } .ha-mt-8{ margin-top: var(--ha-sp-8) } .ha-mt-16{ margin-top: var(--ha-sp-16) } .ha-mt-24{ margin-top: var(--ha-sp-24) } .ha-mt-32{ margin-top: var(--ha-sp-32) }
.ha-mb-0{ margin-bottom:0 } .ha-mb-8{ margin-bottom: var(--ha-sp-8) } .ha-mb-16{ margin-bottom: var(--ha-sp-16) } .ha-mb-24{ margin-bottom: var(--ha-sp-24) } .ha-mb-32{ margin-bottom: var(--ha-sp-32) }
.ha-p-0{ padding:0 } .ha-p-8{ padding: var(--ha-sp-8) } .ha-p-16{ padding: var(--ha-sp-16) } .ha-p-20{ padding: var(--ha-sp-20) } .ha-p-24{ padding: var(--ha-sp-24) } .ha-p-32{ padding: var(--ha-sp-32) }

/* =====================
   18) Example Certificates: QR placeholder box
   ===================== */
.ha-qr{ width: 128px; height:128px; border:2px solid var(--ha-brand-600); border-radius: 10px; display:grid; place-items:center; color: var(--ha-brand-800); font-weight:700 }

/* =====================
   19) Course Player Shell (CSS only)
   ===================== */
.ha-player{ display:grid; gap:1rem }
@media(min-width: 960px){ .ha-player{ grid-template-columns: 2fr 1fr } }
.ha-video{ background:#000; aspect-ratio: 16/9; border-radius: var(--ha-r-18); overflow:hidden }
.ha-outline details{ border:1px solid var(--ha-line); border-radius: var(--ha-r-14); padding:.6rem .8rem; background: var(--ha-paper) }
.ha-outline summary{ cursor:pointer; font-weight:600 }

/* =====================
   20) Shadows & Effects helpers
   ===================== */
.ha-shadow-1{ box-shadow: var(--ha-shadow-1) }
.ha-shadow-2{ box-shadow: var(--ha-shadow-2) }
.ha-ring{ box-shadow: var(--ha-ring) }

/* End of file */