/* ================================================================
   BASE.CSS — Design system · TRYHARDGG SOLUTIONS LIMITED
   ================================================================ */

/* 1. Design tokens */
:root {
  --ap-orange:          #E8690C;
  --ap-orange-dark:     #C4530A;
  --ap-orange-light:    #FFE4CC;
  --ap-yellow:          #F5B800;
  --ap-yellow-light:    #FFF3CC;
  --ap-cream:           #FFFBF0;
  --ap-cream-2:         #FFF5DC;
  --ap-cream-3:         #FFEDD0;
  --ap-dark:            #1A0F03;
  --ap-dark-2:          #2E1C06;
  --ap-text:            #3A2208;
  --ap-text-muted:      #7C5225;
  --ap-border:          rgba(232,105,12,.16);
  --ap-border-strong:   rgba(232,105,12,.32);
  --ap-white:           #FFFFFF;
  --ap-shadow:          0 2px 16px rgba(26,15,3,.07);
  --ap-shadow-md:       0 4px 28px rgba(26,15,3,.10);
  --ap-shadow-lg:       0 8px 48px rgba(26,15,3,.13);

  --font-heading: 'Merriweather', Georgia, serif;
  --font-body:    'Lato', system-ui, sans-serif;

  --sp-1:  8px;  --sp-2: 16px;  --sp-3: 24px;
  --sp-4: 32px;  --sp-5: 40px;  --sp-6: 56px;
  --sp-7: 72px;  --sp-8: 96px;

  --r-sm:  6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 32px;

  --tr: .2s ease;
}

/* 2. Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--ap-text);
  background: var(--ap-cream);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--tr); }
a:hover { color: var(--ap-orange); }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; font-size: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; }

/* 3. Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ap-dark);
}
h1 { font-size: clamp(1.85rem, 4.5vw, 2.9rem); }
h2 { font-size: clamp(1.45rem, 3vw, 2.1rem); }
h3 { font-size: clamp(1.05rem, 2vw, 1.35rem); }
h4 { font-size: 1.05rem; }
p  { margin-bottom: var(--sp-2); }
p:last-child { margin-bottom: 0; }
strong { font-weight: 700; color: #fff; }

/* 4. Layout */
.ap-container {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 var(--sp-3);
}
.ap-container-sm {
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  padding: 0 var(--sp-3);
}

/* 5. Buttons */
.ap-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .3px;
  transition: background var(--tr), color var(--tr), border-color var(--tr), box-shadow var(--tr), transform var(--tr);
  white-space: nowrap;
  cursor: pointer;
  border: 2px solid transparent;
}
.ap-btn:active { transform: translateY(1px); }

.ap-btn--primary {
  background: var(--ap-orange);
  color: var(--ap-white);
  border-color: var(--ap-orange);
}
.ap-btn--primary:hover {
  background: var(--ap-orange-dark);
  border-color: var(--ap-orange-dark);
  color: var(--ap-white);
  box-shadow: 0 4px 18px rgba(232,105,12,.35);
}

.ap-btn--secondary {
  background: var(--ap-yellow);
  color: var(--ap-dark);
  border-color: var(--ap-yellow);
}
.ap-btn--secondary:hover {
  background: var(--ap-orange);
  border-color: var(--ap-orange);
  color: var(--ap-white);
}

.ap-btn--outline {
  background: transparent;
  color: var(--ap-orange);
  border-color: var(--ap-orange);
}
.ap-btn--outline:hover {
  background: var(--ap-orange);
  color: var(--ap-white);
}

.ap-btn--outline-light {
  background: transparent;
  color: var(--ap-cream);
  border-color: rgba(255,251,240,.45);
}
.ap-btn--outline-light:hover {
  background: rgba(255,251,240,.12);
  color: var(--ap-white);
}

.ap-btn--dark {
  background: var(--ap-dark);
  color: var(--ap-cream);
  border-color: var(--ap-dark);
}
.ap-btn--dark:hover {
  background: var(--ap-dark-2);
  border-color: var(--ap-dark-2);
  color: var(--ap-white);
}

.ap-btn--sm  { padding: 8px 20px; font-size: .83rem; }
.ap-btn--lg  { padding: 15px 40px; font-size: 1rem; }

/* 6. Section spacing */
.ap-section        { padding: var(--sp-8) 0; }
.ap-section--sm    { padding: var(--sp-6) 0; }
.ap-section--lg    { padding: calc(var(--sp-8) * 1.3) 0; }

/* Background helpers */
.ap-bg-cream   { background: var(--ap-cream-2); }
.ap-bg-dark    { background: var(--ap-dark); }
.ap-bg-dark .ap-section-label,
.ap-bg-dark .ap-section-title,
.ap-bg-dark h1,
.ap-bg-dark h2,
.ap-bg-dark h3  { color: var(--ap-cream); }
.ap-bg-dark p,
.ap-bg-dark li  { color: rgba(255,251,240,.75); }

/* 7. Section header */
.ap-section-label {
  display: inline-block;
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ap-orange);
  margin-bottom: var(--sp-2);
}
.ap-section-title   { color: var(--ap-dark); margin-bottom: var(--sp-2); }
.ap-section-title--light { color: var(--ap-cream); }
.ap-section-intro   { font-size: 1.05rem; color: var(--ap-text-muted); max-width: 640px; }
.ap-section-intro--light { color: rgba(255,251,240,.65); }
.ap-link--light { color: var(--ap-yellow); }

.ap-section-header  { margin-bottom: var(--sp-5); }
.ap-section-header--center { text-align: center; }
.ap-section-header--center .ap-section-intro { margin: 0 auto; }

/* 8. Card base */
.ap-card {
  background: var(--ap-white);
  border: 1px solid var(--ap-border);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  box-shadow: var(--ap-shadow);
}

/* 9. Divider */
.ap-divider { border: none; border-top: 1px solid var(--ap-border); margin: var(--sp-4) 0; }

/* 10. Badge */
.ap-badge {
  display: inline-block;
  padding: 4px 12px;
  background: var(--ap-yellow-light);
  color: var(--ap-dark-2);
  border-radius: 100px;
  font-size: .76rem;
  font-weight: 700;
}

/* 11. Notice */
.ap-notice {
  padding: var(--sp-2) var(--sp-3);
  background: var(--ap-cream-3);
  border-left: 4px solid var(--ap-orange);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: .88rem;
  color: var(--ap-text);
}

/* 12. Responsive */
@media (max-width: 768px) {
  body { font-size: 15px; }
  .ap-section     { padding: var(--sp-6) 0; }
  .ap-section--sm { padding: var(--sp-4) 0; }
}