/*
 * ================================================================
 * SOVRAN MODULE SYSTEM — CSS Variable Contract v1.0
 * ================================================================
 *
 * USAGE:
 *   Every template that uses Sovran content modules MUST define
 *   these CSS custom properties on :root (or a parent element).
 *   Modules consume them without re-declaring them.
 *
 *   Copy this file's :root block into your template's base CSS,
 *   then replace the values with your client's brand tokens.
 *
 * ================================================================ */

/* ── Default Token Set (Sovran Dark) ───────────────────────────── */
:root {

  /* Surface / Background */
  --color-bg:           #0b0b0f;     /* page background */
  --color-surface:      #14141a;     /* card / section surface */
  --color-surface-2:    #1c1c26;     /* elevated surface (open states) */
  --color-surface-3:    #242432;     /* highest elevation surface */

  /* Borders */
  --color-border:       rgba(255,255,255,0.07);  /* default border */
  --color-border-hi:    rgba(255,255,255,0.14);  /* hover / focus border */

  /* Text */
  --color-text:         #eeeef4;     /* primary body text */
  --color-text-muted:   #7878a0;     /* secondary / descriptive text */
  --color-text-dim:     #3d3d58;     /* disabled / placeholder text */

  /* Accent (primary brand color) */
  --color-accent:       #8b5cf6;     /* primary CTA, links, active states */
  --color-accent-hi:    #7c3aed;     /* accent hover */
  --color-accent-dim:   rgba(139,92,246,0.12); /* accent fill for chips, bg */

  /* Accent 2 (secondary brand color) */
  --color-accent-2:     #06b6d4;     /* prices, labels, secondary calls */
  --color-accent-2-dim: rgba(6,182,212,0.12);

  /* Status */
  --color-success:      #10b981;     /* positive metrics, checkmarks */
  --color-warning:      #f59e0b;     /* warnings, gluten-free tag */
  --color-error:        #ef4444;     /* errors, spicy tag */

  /* Typography */
  --font-display:       'Space Mono', monospace;  /* headings, eyebrows, prices */
  --font-body:          'Sora', sans-serif;        /* body copy, UI labels */

  /* Border Radius */
  --radius-xs:  3px;
  --radius-sm:  5px;
  --radius:     8px;
  --radius-lg:  14px;
  --radius-xl:  22px;

  /* Shadows */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.3);
  --shadow:     0 4px 24px rgba(0,0,0,0.45);
  --shadow-lg:  0 8px 48px rgba(0,0,0,0.65);

  /* Motion */
  --ease:       cubic-bezier(0.16, 1, 0.3, 1);
  --dur:        0.22s;

  /* Spacing Scale */
  --sp-xs:  0.5rem;
  --sp-sm:  1rem;
  --sp-md:  1.5rem;
  --sp-lg:  2.5rem;
  --sp-xl:  4.5rem;
  --sp-2xl: 7rem;

  /* Layout */
  --container: 1200px;
}


/* ================================================================
 * LIGHT MODE EXAMPLE TOKEN SET
 *
 * Copy this block as a .light-theme class or your own :root
 * overrides to instantly switch any module to a light aesthetic.
 * ================================================================ */
.theme-light {
  --color-bg:           #f8f8fc;
  --color-surface:      #ffffff;
  --color-surface-2:    #f2f2f8;
  --color-surface-3:    #eaeaf2;
  --color-border:       rgba(0,0,0,0.08);
  --color-border-hi:    rgba(0,0,0,0.16);
  --color-text:         #1a1a2e;
  --color-text-muted:   #6b6b88;
  --color-text-dim:     #b0b0c4;
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.06);
  --shadow:     0 4px 24px rgba(0,0,0,0.1);
  --shadow-lg:  0 8px 48px rgba(0,0,0,0.15);
}


/* ================================================================
 * SHARED MODULE BASE STYLES
 *
 * These styles are shared across all modules. Include this file
 * once per template; the individual module JS files handle their
 * own scoped component styles.
 * ================================================================ */

/* Section wrapper — modules live inside .mod-section */
.mod-section {
  padding: var(--sp-2xl) var(--sp-sm);
  position: relative;
}

/* Max-width container */
.mod-wrap {
  max-width: var(--container);
  margin: 0 auto;
}

/* Eyebrow / kicker above headings */
.mod-eyebrow {
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.mod-eyebrow::before {
  content: '';
  display: block;
  width: 18px;
  height: 1px;
  background: var(--color-accent);
  flex-shrink: 0;
}

/* Section heading */
.mod-h {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 0.6rem;
}

/* Section subheading */
.mod-sub {
  color: var(--color-text-muted);
  font-size: 1rem;
  max-width: 560px;
  margin-bottom: var(--sp-lg);
}

/* Filter pill bar */
.mod-filters {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-bottom: var(--sp-md);
}

.mod-filter {
  padding: 0.35rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--color-border-hi);
  background: transparent;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.mod-filter:hover  { border-color: var(--color-accent); color: var(--color-text); }
.mod-filter.active { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }

/* Dietary / category tags */
.mod-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.16em 0.55em;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tag-vegan   { background: rgba(16,185,129,0.13);  color: #10b981; }
.tag-gf      { background: rgba(245,158,11,0.13);  color: #f59e0b; }
.tag-spicy   { background: rgba(239,68,68,0.13);   color: #ef4444; }
.tag-new     { background: var(--color-accent-dim); color: var(--color-accent); }
.tag-popular { background: var(--color-accent-2-dim); color: var(--color-accent-2); }

/* CTA buttons */
.mod-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 1.4rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--dur) var(--ease);
}
.btn-primary {
  background: var(--color-accent);
  color: #fff;
}
.btn-primary:hover {
  background: var(--color-accent-hi);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(139,92,246,0.3);
}
.btn-outline {
  background: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.btn-outline:hover {
  background: var(--color-accent-dim);
}
.btn-ghost {
  background: var(--color-surface-2);
  color: var(--color-text);
  border-color: var(--color-border-hi);
}
.btn-ghost:hover {
  background: var(--color-surface-3);
}

/* Accessibility */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}