/* =========================================================
   eBhatta ERP Documentation Website
   Stylesheet
   Part 1 of 3
   ---------------------------------------------------------
   Foundation
   • CSS Variables
   • Reset
   • Base Layout
   • Typography
   • Links
   • Utilities
   ========================================================= */

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

:root {

  /* Brand */

  --primary: #C9784A;
  --primary-dark: #A95F38;

  /* Background */

  --background: #F8F5F2;
  --surface: #FFFFFF;

  /* Text */

  --text-primary: #2D2D2D;
  --text-secondary: #6F6F6F;

  /* Borders */

  --border: #E7D8CC;

  /* States */

  --success: #3F8F5C;
  --warning: #D58A00;
  --error: #C94848;
  --info: #3B82F6;

  /* Effects */

  --shadow-sm: 0 2px 8px rgba(0,0,0,.05);

  --shadow-md: 0 8px 24px rgba(0,0,0,.08);

  --shadow-lg: 0 16px 40px rgba(0,0,0,.12);

  /* Radius */

  --radius-sm: 8px;

  --radius-md: 14px;

  --radius-lg: 22px;

  /* Layout */

  --container-width: 960px;

  --transition: .25s ease;

}

/* =========================================================
   RESET
   ========================================================= */

*,
*::before,
*::after {

  box-sizing: border-box;

}

html {

  scroll-behavior: smooth;

}

body {

  margin: 0;

  padding: 0;

  background: var(--background);

  color: var(--text-primary);

  font-family:

    Inter,

    "Segoe UI",

    Roboto,

    Helvetica,

    Arial,

    sans-serif;

  font-size: 16px;

  line-height: 1.7;

  overflow-wrap: break-word;

  -webkit-font-smoothing: antialiased;

  text-rendering: optimizeLegibility;

}

img {

  display: block;

  max-width: 100%;

}

svg {

  display: block;

  max-width: 100%;

}

hr {

  border: 0;

  border-top: 1px solid var(--border);

  margin: 32px 0;

}

/* =========================================================
   SELECTION
   ========================================================= */

::selection {

  background: var(--primary);

  color: white;

}

/* =========================================================
   TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {

  margin-top: 0;

  margin-bottom: 16px;

  color: var(--text-primary);

  font-weight: 700;

  line-height: 1.25;

}

h1 {

  font-size: clamp(2rem, 5vw, 3rem);

}

h2 {

  font-size: clamp(1.6rem, 4vw, 2.2rem);

}

h3 {

  font-size: 1.35rem;

}

p {

  margin-top: 0;

  margin-bottom: 18px;

  color: var(--text-secondary);

}

strong {

  color: var(--text-primary);

}

/* =========================================================
   LINKS
   ========================================================= */

a {

  color: var(--primary);

  text-decoration: none;

  transition: var(--transition);

}

a:hover {

  color: var(--primary-dark);

}

a:focus-visible {

  outline: 3px solid rgba(201,120,74,.25);

  border-radius: 6px;

}

/* =========================================================
   LAYOUT
   ========================================================= */

.container {

  width: min(100% - 32px, var(--container-width));

  margin-inline: auto;

}

.section {

  margin-block: 48px;

}

.center {

  text-align: center;

}

/* =========================================================
   TEXT HELPERS
   ========================================================= */

.text-muted {

  color: var(--text-secondary);

}

.text-primary {

  color: var(--primary);

}

.text-dark {

  color: var(--text-primary);

}

/* =========================================================
   SPACING HELPERS
   ========================================================= */

.mt-0 {

  margin-top: 0;

}

.mb-0 {

  margin-bottom: 0;

}

.mt-1 {

  margin-top: 8px;

}

.mt-2 {

  margin-top: 16px;

}

.mt-3 {

  margin-top: 24px;

}

.mt-4 {

  margin-top: 32px;

}

.mb-1 {

  margin-bottom: 8px;

}

.mb-2 {

  margin-bottom: 16px;

}

.mb-3 {

  margin-bottom: 24px;

}

.mb-4 {

  margin-bottom: 32px;

}

/* =========================================================
   HERO
   ========================================================= */

.hero {

  margin-top: 40px;

  margin-bottom: 40px;

  padding: 42px 32px;

  text-align: center;

  color: #FFFFFF;

  border-radius: var(--radius-lg);

  background: linear-gradient(
    135deg,
    var(--primary),
    var(--primary-dark)
  );

  box-shadow: var(--shadow-lg);

}

.hero h1 {

  margin-bottom: 12px;

  color: #FFFFFF;

  letter-spacing: -.5px;

}

.hero p {

  max-width: 640px;

  margin: 0 auto;

  color: rgba(255,255,255,.92);

  font-size: 1.1rem;

}

/* =========================================================
   CARD
   ========================================================= */

.card {

  background: var(--surface);

  border: 1px solid var(--border);

  border-radius: var(--radius-md);

  padding: 28px;

  margin-bottom: 28px;

  box-shadow: var(--shadow-sm);

}

.card {

  background: var(--surface);

  border: 1px solid var(--border);

  border-radius: var(--radius-md);

  padding: 28px;

  margin-bottom: 28px;

  box-shadow: var(--shadow-sm);

  transition:
      box-shadow var(--transition),
      transform var(--transition);

}

.card:hover {

  transform: translateY(-2px);

  box-shadow: var(--shadow-md);

}

/* =========================================================
   SECTION TITLES
   ========================================================= */

.section-title {

  margin-bottom: 8px;

}

.section-subtitle {

  margin-bottom: 28px;

  color: var(--text-secondary);

}

/* =========================================================
   NAVIGATION TILES
   ========================================================= */

.tile {

  display: flex;

  align-items: center;

  gap: 18px;

  padding: 20px;

  margin-bottom: 16px;

  background: var(--surface);

  border: 1px solid var(--border);

  border-radius: var(--radius-md);

  color: var(--text-primary);

  transition: var(--transition);

}

.tile:hover {

  border-color: var(--primary);

  transform: translateY(-2px);

  box-shadow: var(--shadow-md);

}

.tile-icon {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 56px;

  height: 56px;

  border-radius: 50%;

  background: rgba(201,120,74,.12);

  font-size: 1.5rem;

  flex-shrink: 0;

}

.tile-content {

  flex: 1;

}

.tile-title {

  display: block;

  margin-bottom: 4px;

  color: var(--text-primary);

  font-size: 1.05rem;

  font-weight: 700;

}

.tile-description {

  margin: 0;

  color: var(--text-secondary);

  font-size: .95rem;

}

/* =========================================================
   CONTACT CARD
   ========================================================= */

.contact-box {

  text-align: center;

  padding-top: 22px;

  padding-bottom: 22px;

}

.contact-email {

  display: inline-block;

  margin-top: 16px;

  padding: 14px 22px;

  border-radius: var(--radius-sm);

  background: rgba(201,120,74,.10);

  color: var(--primary-dark);

  font-weight: 600;

  word-break: break-word;

}

.contact-email:hover {

  background: rgba(201,120,74,.18);

}

/* =========================================================
   ARTICLE
   ========================================================= */

article {

  color: var(--text-secondary);

}

article h2 {

  margin-top: 42px;

  margin-bottom: 16px;

  padding-bottom: 10px;

  border-bottom: 1px solid var(--border);

}

article ul,
article ol {

  padding-left: 24px;

  margin-bottom: 20px;

}

article li {

  margin-bottom: 10px;

}

article strong {

  color: var(--text-primary);

}

article blockquote {

  margin: 24px 0;

  padding: 18px 22px;

  border-left: 5px solid var(--primary);

  background: #FCF7F3;

  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;

}

/* =========================================================
   BACK LINK
   ========================================================= */

.back-link {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  margin-bottom: 28px;

  font-weight: 600;

}

.back-link:hover {

  gap: 12px;

}

/* =========================================================
   FOOTER
   ========================================================= */

footer {

  margin-top: 56px;

  padding: 32px 20px;

  text-align: center;

  color: var(--text-secondary);

  border-top: 1px solid var(--border);

}

footer p {

  margin: 6px 0;

  font-size: .95rem;

}

/* =========================================================
   BUTTONS
   ========================================================= */

.button {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  padding: 14px 24px;

  border: none;

  border-radius: var(--radius-sm);

  background: var(--primary);

  color: #FFFFFF;

  font-weight: 600;

  transition: var(--transition);

  cursor: pointer;

}

.button:hover {

  background: var(--primary-dark);

  color: #FFFFFF;

  transform: translateY(-2px);

}

.button-outline {

  background: transparent;

  border: 1px solid var(--primary);

  color: var(--primary);

}

.button-outline:hover {

  background: var(--primary);

  color: #FFFFFF;

}

/* =========================================================
   DIVIDER
   ========================================================= */

.divider {

  width: 100%;

  height: 1px;

  margin: 40px 0;

  background: var(--border);

}

/* =========================================================
   SMALL TEXT
   ========================================================= */

.small {

  font-size: .9rem;

}

.tiny {

  font-size: .8rem;

}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {

  body {

    font-size: 15px;

  }

  .hero {

    padding: 40px 24px;

    margin-top: 24px;

    margin-bottom: 32px;

  }

  .hero h1 {

    font-size: 2rem;

  }

  .hero p {

    font-size: 1rem;

  }

  .card {

    padding: 22px;

  }

  .tile {

    align-items: flex-start;

    padding: 18px;

  }

  .tile-icon {

    width: 48px;

    height: 48px;

    font-size: 1.25rem;

  }

}

@media (max-width: 480px) {

  .container {

    width: min(100% - 20px, var(--container-width));

  }

  .hero {

    border-radius: var(--radius-md);

    padding: 32px 20px;

  }

  .hero h1 {

    font-size: 1.75rem;

  }

  .card {

    padding: 18px;

    border-radius: var(--radius-sm);

  }

  .tile {

    flex-direction: column;

    text-align: center;

  }

  .tile-icon {

    margin: 0 auto;

  }

  .back-link {

    font-size: .95rem;

  }

}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */

:focus-visible {

  outline: 3px solid rgba(201,120,74,.30);

  outline-offset: 3px;

}

/* =========================================================
   PRINT
   ========================================================= */

@media print {

  body {

    background: #FFFFFF;

    color: #000000;

  }

  .hero {

    background: none;

    color: #000000;

    box-shadow: none;

    border: 1px solid #CCCCCC;

  }

  .tile {

    page-break-inside: avoid;

    box-shadow: none;

  }

  footer {

    border-top: 1px solid #CCCCCC;

  }

}