/* ============================================
   CLATMock Platform Design System
   Homepage design applied platform-wide.
   Loaded on every page. Provides:
   - Homepage body/container/fonts
   - Design header + buttons + footer
   - Design tokens mapped to the CSS variables
     consumed by exam.css / sudden_death.css
   ============================================ */

/* ── Design ink/green vars ── */
:root {
  --ink: #1d2938;
  --ink-soft: #5f6e7c;
  --ink-faint: #89949b;
  --green: #2c806b;
  --green-dark: #1c5e50;
  --green-wash: #e4f1eb;
  --cream: #f8f7f2;
  --surface: #ffffff;
  --line: #e8e7df;
  --orange: #ee7b55;
  --yellow: #f4ba5c;
  --blue-wash: #e8f0f4;
  --shadow: 0 18px 55px rgba(35, 53, 57, .08);
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* ── Compatibility tokens consumed by exam.css / sudden_death.css ──
     Mapped to the homepage green/cream design. */
  --bg: #f3f3f3;
  --bg-alt: #f8fafc;
  --bg-secondary: #f1f3ee;
  --card: #ffffff;
  --text: #1d2938;
  --text-secondary: #5f6e7c;
  --text-tertiary: #89949b;
  --line-strong: #d4d8d2;

  /* Brand (green — homepage) */
  --primary: #2c806b;
  --primary-dark: #256e5c;
  --primary-darker: #1c5e50;
  --primary-light: #e4f1eb;
  --primary-glow: rgba(44, 128, 107, 0.22);

  /* Accent */
  --secondary: #84cc16;
  --secondary-dark: #65a30d;

  /* Semantic */
  --success: #16a34a;
  --success-bg: #dcfce7;
  --success-border: #86efac;
  --success-glow: rgba(22, 163, 74, 0.25);
  --danger: #dc2626;
  --danger-bg: #fee2e2;
  --danger-border: #fca5a5;
  --danger-glow: rgba(220, 38, 38, 0.25);
  --warning: #d97706;
  --warning-bg: #fef3c7;
  --warning-border: #fcd34d;
  --info: #2563eb;
  --info-bg: #dbeafe;
  --info-border: #93c5fd;
  --review: #7c3aed;
  --review-bg: #f3e8ff;
  --review-border: #d8b4fe;

  /* Geometry */
  --radius-sm: 8px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.12);
  --shadow-xl: 0 24px 60px rgba(15, 23, 42, 0.18);

  /* Typography */
  --font-sans: "DM Sans", "Inter", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;

  /* Transitions */
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 0.15s;
  --duration: 0.2s;
  --duration-slow: 0.3s;
}

/* ── Base / Reset (homepage style) ── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { background-color: #f3f3f3; background-image: linear-gradient(0deg, transparent 24%, #e1e1e1 25%, #e1e1e1 26%, transparent 27%, transparent 74%, #e1e1e1 75%, #e1e1e1 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, #e1e1e1 25%, #e1e1e1 26%, transparent 27%, transparent 74%, #e1e1e1 75%, #e1e1e1 76%, transparent 77%, transparent); background-size: 55px 55px; color: #1d2938; font-family: "DM Sans", sans-serif; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
button, a { font: inherit; }
button { border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid rgba(42, 122, 101, .35); outline-offset: 3px; }
::selection { background: #b9dfcc; color: #173b33; }

.site-shell { overflow: hidden; }
.container { width: min(1160px, calc(100% - 48px)); margin: 0 auto; }
.skip-link { position: fixed; z-index: 100; top: -100px; left: 20px; padding: 10px 15px; background: var(--green-dark); color: #fff; border-radius: 0 0 10px 10px; font-weight: 700; transition: top .2s; }
.skip-link:focus { top: 0; }

/* ── Design Header ── */
.site-header { position: sticky; top: 0; z-index: 40; background: rgba(248, 247, 242, .8); border-bottom: 1px solid transparent; backdrop-filter: blur(18px); transition: box-shadow .3s, border-color .3s, background .3s; }
.site-header.scrolled { border-color: var(--line); background: rgba(248, 247, 242, .92); box-shadow: 0 8px 25px rgba(30, 50, 50, .06); }
.header-inner { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: Manrope, sans-serif; font-weight: 800; letter-spacing: -.04em; font-size: 18px; }
.brand-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--green); color: #fff; box-shadow: 0 5px 12px rgba(44, 128, 107, .2); }
.brand-name { white-space: nowrap; }
.site-nav { display: flex; align-items: center; gap: 31px; margin-left: auto; }
.site-nav a { color: var(--ink-soft); font-size: 14px; font-weight: 600; transition: color .2s; }
.site-nav a:hover { color: var(--green); }
.header-actions { display: flex; align-items: center; gap: 12px; }

/* ── Design Buttons (`.button` from homepage + `.btn` alias for exam/SD) ── */
.button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 0 18px; border-radius: 10px; border: 1px solid transparent; font-size: 14px; font-weight: 700; white-space: nowrap; transition: transform .2s var(--ease), background .2s, box-shadow .2s, border-color .2s; }
.button:hover, .btn:hover { transform: translateY(-2px); }
.button-primary, .btn-primary { color: #fff; background: var(--green); box-shadow: 0 8px 18px rgba(44, 128, 107, .18); }
.button-primary:hover, .btn-primary:hover { background: var(--green-dark); box-shadow: 0 10px 23px rgba(44, 128, 107, .25); }
.button-danger, .btn-danger { color: #fff; background: var(--orange); box-shadow: 0 10px 25px rgba(238, 123, 85, .25); }
.button-danger:hover, .btn-danger:hover { background: #d96542; }
.button-quiet { color: var(--ink); background: transparent; border-color: var(--line); }
.button-quiet:hover { border-color: #bdcfc8; background: #fff; }
.button-small, .btn-sm { min-height: 39px; padding: 0 15px; font-size: 13px; border-radius: 9px; }
.button-large, .btn-lg { min-height: 52px; padding: 0 21px; }
.btn-outline { background: var(--card); border: 1px solid var(--line-strong); color: var(--text); box-shadow: var(--shadow-sm); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.btn-shine { font-weight: 700; position: relative; z-index: 1; }

/* ── Cards / shared surfaces (design-tinted) ── */
.card { background: var(--card); backdrop-filter: blur(12px); border: 1px solid var(--line); padding: 18px; margin: 14px 0; border-radius: var(--radius-xl); box-shadow: var(--shadow); }
.hidden { display: none !important; }

/* ── Header responsive ── */
@media (max-width: 700px) {
  .container { width: calc(100% - 32px); }
  .header-inner { height: 72px; gap: 14px; }
  .site-nav { margin-left: auto; gap: 18px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { font-size: 13px; white-space: nowrap; }
}