/**
 * GharSoap — Design Tokens
 * Single source of truth for colors, typography, spacing, and UI primitives.
 * Generated from brand color #2c5f4f (classic style).
 */

:root {
  /* ─── COLOR: Brand ─── */
  --color-primary:       #2c5f4f;   /* forest green — headings, links, borders */
  --color-primary-dark:  #1a3d2e;   /* deep green — badge bg, CTA sections, gradients */
  --color-primary-light: #9ab8a4;   /* muted green — footer text, muted accents */
  --color-primary-bg:    #f0f7f4;   /* pale green — section backgrounds, card fills */

  --color-accent:        #F5B800;   /* gold — CTAs, highlights, badges */
  --color-accent-dark:   #D97706;   /* dark gold — hover state */

  /* ─── COLOR: Neutral ─── */
  --color-white:         #ffffff;
  --color-black:         #000000;
  --color-text:          #111827;   /* headings */
  --color-text-muted:    #555555;   /* body copy, secondary */
  --color-text-light:    #888888;   /* captions, labels */
  --color-border:        #e5e7eb;   /* dividers, card borders */
  --color-border-green:  #c8e0d8;   /* green-tinted borders */
  --color-bg-page:       #ffffff;
  --color-bg-section:    #f9fafb;   /* alternating section bg */

  /* ─── COLOR: Semantic ─── */
  --color-success:       #10B981;
  --color-warning:       #F59E0B;
  --color-error:         #EF4444;

  /* ─── TYPOGRAPHY ─── */
  --font-serif:    Georgia, 'Times New Roman', serif;    /* headings */
  --font-sans:     ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; /* body */
  --font-mono:     'Courier New', monospace;

  --text-xs:   0.75rem;    /* 12px — captions, fine print */
  --text-sm:   0.8125rem;  /* 13px — labels, badges */
  --text-base: 1rem;       /* 16px — body */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5625rem;  /* 25px */
  --text-3xl:  1.9375rem;  /* 31px */
  --text-4xl:  2.4375rem;  /* 39px */
  --text-5xl:  3.0625rem;  /* 49px */

  --weight-normal:    400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;

  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* ─── SPACING (8pt grid) ─── */
  --space-1:   0.5rem;   /* 8px */
  --space-2:   1rem;     /* 16px */
  --space-3:   1.5rem;   /* 24px */
  --space-4:   2rem;     /* 32px */
  --space-5:   2.5rem;   /* 40px */
  --space-6:   3rem;     /* 48px */
  --space-8:   4rem;     /* 64px */
  --space-10:  5rem;     /* 80px */
  --space-12:  6rem;     /* 96px */

  /* ─── BORDER RADIUS ─── */
  --radius-none:  0;
  --radius-sm:    2px;
  --radius-base:  4px;    /* badge, button */
  --radius-md:    6px;    /* input, small card */
  --radius-lg:    8px;    /* card */
  --radius-xl:    12px;   /* callout box, large card */
  --radius-full:  9999px; /* circle, chat bubble */

  /* ─── SHADOWS ─── */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:  0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg:  0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-xl:  0 8px 32px rgba(0, 0, 0, 0.15);

  /* ─── TRANSITIONS ─── */
  --duration-fast:    150ms;
  --duration-base:    250ms;
  --duration-slow:    350ms;
  --ease:             ease;
  --ease-out:         ease-out;

  /* ─── LAYOUT ─── */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1280px;

  /* ─── Z-INDEX ─── */
  --z-dropdown:    1000;
  --z-sticky:      1020;
  --z-overlay:     1030;
  --z-modal:       1040;
  --z-tooltip:     1060;
}

/* ─── FOOTER (global, overrides legacy inline styles) ─── */
.footer{background:#0f1f17!important;color:#ccc;padding:3rem 1.5rem 0}
.footer-main{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:3rem;padding-bottom:2.5rem;border-bottom:1px solid rgba(255,255,255,.1)}
.footer-brand p{color:#9ab8a4;font-size:.9rem;line-height:1.7;margin:.7rem 0 1rem}
.footer-brand address{font-style:normal;color:#9ab8a4;font-size:.88rem;line-height:1.6}
.footer-brand-name{font-family:Georgia,serif;font-size:1.4rem;font-weight:700;color:#fff}
.footer-col h4{color:#F5B800;font-size:.72rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:1rem}
.footer-col ul{list-style:none;padding:0}
.footer-col ul li{margin-bottom:.55rem}
.footer-col ul li a{color:#9ab8a4;font-size:.88rem;text-decoration:none;transition:.2s}
.footer-col ul li a:hover{color:#fff}
.footer-contact-item{display:flex;align-items:flex-start;gap:.6rem;margin-bottom:.8rem;color:#9ab8a4;font-size:.88rem}
.footer-contact-item svg{flex-shrink:0;margin-top:2px;color:#F5B800}
.footer-bottom{max-width:1200px;margin:0 auto;padding:1.3rem 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.footer-bottom-left{font-size:.78rem;color:#6b8a76}
.footer-bottom-right{display:flex;gap:1.5rem;flex-wrap:wrap}
.footer-bottom-right a{color:#6b8a76;font-size:.78rem;text-decoration:none;transition:.2s}
.footer-bottom-right a:hover{color:#F5B800}
.footer-certs{max-width:1200px;margin:0 auto;padding:.7rem 0 1.2rem;border-top:1px solid rgba(255,255,255,.06);text-align:center;font-size:.76rem;color:#4d6b58;letter-spacing:.3px}
@media(max-width:968px){.footer-main{grid-template-columns:1fr 1fr;gap:2rem}.footer-brand{grid-column:1/-1}}
@media(max-width:640px){.footer-main{grid-template-columns:1fr}.footer-bottom{flex-direction:column;text-align:center}.footer-bottom-right{flex-direction:column;gap:.75rem}}