/**
 * Smart Suite — Frontend Stylesheet
 *
 * Base styles, CSS custom properties, utility classes.
 *
 * @package SmartSuite
 */

/* ========================================================================
   CSS Custom Properties
   ======================================================================== */
:root {
  /* Brand */
  --ss-primary: #2563eb;
  --ss-primary-hover: #1d4ed8;
  --ss-primary-light: #dbeafe;
  --ss-secondary: #64748b;
  --ss-accent: #f59e0b;

  /* Text */
  --ss-text: #1a1a1a;
  --ss-text-light: #666666;
  --ss-text-muted: #999999;

  /* Surfaces */
  --ss-bg: #ffffff;
  --ss-bg-alt: #f8fafc;
  --ss-border: #e2e8f0;
  --ss-border-hover: #cbd5e1;

  /* Shadows */
  --ss-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --ss-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --ss-shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.12);

  /* Radii */
  --ss-radius-sm: 4px;
  --ss-radius: 8px;
  --ss-radius-lg: 12px;

  /* Transitions */
  --ss-transition: 0.3s ease;
  --ss-transition-fast: 0.15s ease;

  /* Spacing */
  --ss-gap: 20px;
  --ss-card-padding: 20px;

  /* Typography — overridden by Branding system (smart_suite_branding) */
  --ss-font: inherit;
  --ss-font-weight: 400;
  --ss-line-height: 1.6;
  --ss-font-size-sm: 0.85rem;
  --ss-font-size: 1rem;
  --ss-font-size-lg: 1.25rem;
  --ss-font-size-xl: 1.5rem;

  /* Heading typography — per-level overrides via Branding */
  --ss-heading-font: inherit;
  --ss-h1-size: 40px;
  --ss-h1-weight: 700;
  --ss-h1-line-height: 1.2;
  --ss-h2-size: 32px;
  --ss-h2-weight: 700;
  --ss-h2-line-height: 1.25;
  --ss-h3-size: 24px;
  --ss-h3-weight: 700;
  --ss-h3-line-height: 1.3;
  --ss-h4-size: 20px;
  --ss-h4-weight: 600;
  --ss-h4-line-height: 1.35;
  --ss-h5-size: 18px;
  --ss-h5-weight: 600;
  --ss-h5-line-height: 1.4;
  --ss-h6-size: 16px;
  --ss-h6-weight: 600;
  --ss-h6-line-height: 1.45;

  /* Links — overridden by Branding */
  --ss-link-color: var(--ss-primary);
  --ss-link-hover-color: var(--ss-primary-hover);
  --ss-link-decoration: none;
  --ss-link-hover-decoration: underline;

  /* Button variants — overridden by Branding */
  --ss-btn-primary-bg: var(--ss-primary);
  --ss-btn-primary-bg-hover: var(--ss-primary-hover);
  --ss-btn-primary-color: #ffffff;
  --ss-btn-primary-color-hover: #ffffff;
  --ss-btn-primary-border-color: var(--ss-primary);
  --ss-btn-primary-border-radius: 8px;
  --ss-btn-primary-padding: 12px 24px;
  --ss-btn-primary-font-size: 14px;
  --ss-btn-primary-font-weight: 600;

  --ss-btn-secondary-bg: #f1f5f9;
  --ss-btn-secondary-bg-hover: #e2e8f0;
  --ss-btn-secondary-color: #334155;
  --ss-btn-secondary-color-hover: #1e293b;
  --ss-btn-secondary-border-color: #f1f5f9;
  --ss-btn-secondary-border-radius: 8px;
  --ss-btn-secondary-padding: 12px 24px;
  --ss-btn-secondary-font-size: 14px;
  --ss-btn-secondary-font-weight: 600;

  --ss-btn-outline-bg: transparent;
  --ss-btn-outline-bg-hover: transparent;
  --ss-btn-outline-color: var(--ss-primary);
  --ss-btn-outline-color-hover: var(--ss-primary-hover);
  --ss-btn-outline-border-color: var(--ss-primary);
  --ss-btn-outline-border-radius: 8px;
  --ss-btn-outline-padding: 12px 24px;
  --ss-btn-outline-font-size: 14px;
  --ss-btn-outline-font-weight: 600;

  --ss-btn-ghost-bg: transparent;
  --ss-btn-ghost-bg-hover: transparent;
  --ss-btn-ghost-color: inherit;
  --ss-btn-ghost-color-hover: inherit;
  --ss-btn-ghost-border-color: transparent;
  --ss-btn-ghost-border-radius: 8px;
  --ss-btn-ghost-padding: 4px 8px;
  --ss-btn-ghost-font-size: 14px;
  --ss-btn-ghost-font-weight: 400;
  --ss-btn-ghost-transition: 0.2s ease;

  /* Element defaults — overridden by Branding "Elements" tab */
  --ss-el-text-mb: 16px;

  /* Text presets — overridden by Branding */
  --ss-text-secondary-size: 0.875rem;
  --ss-text-secondary-lh: 1.5;
  --ss-text-small-size: 0.8125rem;
  --ss-text-small-lh: 1.45;
  --ss-text-lead-size: 1.25rem;
  --ss-text-lead-lh: 1.6;
  --ss-text-lead-weight: 300;
  --ss-text-caption-size: 0.75rem;
  --ss-text-caption-lh: 1.4;
  --ss-text-caption-ls: 0.02em;

  --ss-el-img-radius: 8px;
  --ss-el-img-cap-size: 13px;
  --ss-el-img-cap-color: #888;

  --ss-el-icon-xs: 16px;
  --ss-el-icon-sm: 24px;
  --ss-el-icon-md: 36px;
  --ss-el-icon-lg: 48px;
  --ss-el-icon-xl: 64px;
  --ss-el-icon-xxl: 96px;
  --ss-el-icon-color: inherit;
  --ss-el-icon-hover-color: inherit;
  --ss-el-icon-bg: transparent;
  --ss-el-icon-default-size: 36px;

  /* Icon in elements — gap between icon and text */
  --ss-el-heading-icon-color: inherit;
  --ss-el-heading-icon-size: 20px;
  --ss-el-heading-icon-gap: 8px;
  --ss-el-btn-icon-color: inherit;
  --ss-el-btn-icon-size: 14px;
  --ss-el-btn-icon-gap: 8px;
  --ss-el-label-icon-color: inherit;
  --ss-el-label-icon-size: 12px;
  --ss-el-label-icon-gap: 4px;

  --ss-el-list-size: 15px;
  --ss-el-list-spacing: 6px;
  --ss-el-list-mb: 16px;
  --ss-el-list-check-color: #10b981;
  --ss-el-list-icon-size: 16px;
  --ss-el-list-icon-gap: 8px;

  --ss-el-divider-color: #e5e7eb;
  --ss-el-divider-thickness: 1px;
  --ss-el-divider-style: solid;

  --ss-el-spacer-height: 40px;

  --ss-el-label-size: 11px;
  --ss-el-label-weight: 700;
  --ss-el-label-transform: uppercase;
  --ss-el-label-spacing: 0.5px;
  --ss-el-label-padding: 4px 10px;
  --ss-el-label-radius: 4px;
  --ss-el-label-bg: #f1f5f9;
  --ss-el-label-color: #64748b;
  --ss-el-label-primary-bg: #eef2ff;
  --ss-el-label-success-bg: #ecfdf5;
  --ss-el-label-success-color: #059669;
  --ss-el-label-warning-bg: #fffbeb;
  --ss-el-label-warning-color: #d97706;
  --ss-el-label-accent-bg: #fdf2f8;
  --ss-el-label-accent-color: #db2777;

  --ss-el-quote-size: 20px;
  --ss-el-quote-lh: 1.5;
  --ss-el-quote-mark-size: 48px;
  --ss-el-quote-mark-opacity: 0.3;
  --ss-el-quote-author-weight: 600;
  --ss-el-quote-role-size: 13px;
  --ss-el-quote-role-color: #888;
  --ss-el-quote-photo-size: 48px;
  --ss-el-quote-photo-radius: 50%;

  --ss-el-faq-border-color: #e5e7eb;
  --ss-el-faq-radius: 8px;
  --ss-el-faq-q-size: 15px;
  --ss-el-faq-q-weight: 600;
  --ss-el-faq-q-padding: 14px 18px;
  --ss-el-faq-a-size: 14px;
  --ss-el-faq-a-color: #555;
  --ss-el-faq-a-lh: 1.6;
  --ss-el-faq-toggle-color: #999;
  --ss-el-faq-item-gap: 8px;

  --ss-el-embed-radius: 8px;
  --ss-el-embed-ratio: 56.25%;
  --ss-el-embed-cap-size: 13px;
  --ss-el-embed-cap-color: #888;

  /* ── Design Tokens ────────────────────────────── */

  /* Spacing scale (4px base) */
  --ss-space-1: 4px;
  --ss-space-2: 8px;
  --ss-space-3: 12px;
  --ss-space-4: 16px;
  --ss-space-5: 20px;
  --ss-space-6: 24px;
  --ss-space-7: 32px;
  --ss-space-8: 40px;
  --ss-space-9: 48px;
  --ss-space-10: 64px;
  --ss-space-11: 80px;
  --ss-space-12: 96px;

  /* Fluid spacing scale */
  --ss-fluid-1: clamp(4px, 0.5vw, 8px);
  --ss-fluid-2: clamp(8px, 1vw, 16px);
  --ss-fluid-3: clamp(16px, 2vw, 32px);
  --ss-fluid-4: clamp(24px, 3vw, 48px);
  --ss-fluid-5: clamp(32px, 4vw, 64px);

  /* Border radii */
  --ss-radius-1: 4px;
  --ss-radius-2: 8px;
  --ss-radius-3: 12px;
  --ss-radius-4: 16px;
  --ss-radius-5: 20px;
  --ss-radius-6: 24px;
  --ss-radius-round: 9999px;

  /* Shadows */
  --ss-shadow-1: 0 1px 3px rgba(0,0,0,0.1);
  --ss-shadow-2: 0 4px 6px rgba(0,0,0,0.1);
  --ss-shadow-3: 0 10px 30px rgba(0,0,0,0.12);
  --ss-shadow-4: 0 20px 40px rgba(0,0,0,0.15);
  --ss-shadow-5: 0 25px 50px rgba(0,0,0,0.2);
  --ss-shadow-6: 0 30px 60px rgba(0,0,0,0.25);

  /* Durations */
  --ss-duration-1: 0.15s;
  --ss-duration-2: 0.2s;
  --ss-duration-3: 0.3s;
  --ss-duration-4: 0.5s;
  --ss-duration-5: 0.8s;

  /* ── Card element defaults ────────────────────── */
  --ss-el-card-bg: #ffffff;
  --ss-el-card-border-color: #e5e7eb;
  --ss-el-card-border-width: 1px;
  --ss-el-card-radius: 12px;
  --ss-el-card-shadow: 0 1px 3px rgba(0,0,0,0.1);
  --ss-el-card-padding: 20px;
  --ss-el-card-gap: 12px;
  --ss-el-card-hover-shadow: 0 10px 30px rgba(0,0,0,0.12);
  --ss-el-card-hover-lift: -2px;
  --ss-el-card-transition: 0.2s;
  --ss-el-card-title-size: 18px;
  --ss-el-card-title-weight: 600;
  --ss-el-card-mb: 16px;

  /* ── Alert element defaults ───────────────────── */
  --ss-el-alert-padding: 16px;
  --ss-el-alert-radius: 8px;
  --ss-el-alert-border-width: 1px;
  --ss-el-alert-border-color: #e5e7eb;
  --ss-el-alert-bg: #f9fafb;
  --ss-el-alert-line-height: 1.6;
  --ss-el-alert-icon-size: 20px;
  --ss-el-alert-gap: 12px;
  --ss-el-alert-title-weight: 600;
  --ss-el-alert-title-size: 15px;
  --ss-el-alert-mb: 16px;

  /* ── Table element defaults ───────────────────── */
  --ss-el-table-border-color: #e5e7eb;
  --ss-el-table-border-width: 1px;
  --ss-el-table-radius: 8px;
  --ss-el-table-header-bg: #f9fafb;
  --ss-el-table-header-weight: 600;
  --ss-el-table-stripe-bg: #f9fafb;
  --ss-el-table-hover-bg: #f3f4f6;
  --ss-el-table-mb: 16px;

  /* ── Form Input element defaults ──────────────── */
  --ss-el-form-bg: #ffffff;
  --ss-el-form-border-color: #d1d5db;
  --ss-el-form-border-width: 1px;
  --ss-el-form-radius: 8px;
  --ss-el-form-label-size: 14px;
  --ss-el-form-label-weight: 500;
  --ss-el-form-label-gap: 4px;
  --ss-el-form-placeholder-color: #9ca3af;
  --ss-el-form-help-size: 13px;
  --ss-el-form-help-color: #6b7280;
  --ss-el-form-transition: 0.2s;
  --ss-el-form-mb: 16px;

  --ss-row-width: 1140px;
  --ss-row-padding: 40px;
  --ss-grid-gap: 32px;
  --ss-row-side-padding: 20px;
}

/* ========================================================================
   Base / Reset for SS Elements
   ======================================================================== */
[class^="ss-"],
[class*=" ss-"] {
  box-sizing: border-box;
  font-family: var(--ss-font);
}

.ss-no-results {
  color: var(--ss-text-muted);
  font-style: italic;
  padding: 20px;
  text-align: center;
}

/* ========================================================================
   Hours Table
   ======================================================================== */
.ss-hours-table {
  border-collapse: collapse;
  width: 100%;
  max-width: 400px;
  font-size: var(--ss-font-size-sm);
}

.ss-hours-table td {
  padding: 6px 12px 6px 0;
  border-bottom: 1px solid var(--ss-border);
  color: var(--ss-text);
}

.ss-hours-table .ss-hours-day {
  font-weight: 600;
  white-space: nowrap;
}

.ss-hours-table tr.ss-today td {
  color: var(--ss-primary);
  font-weight: 700;
}

.ss-hours-table .ss-closed {
  color: var(--ss-text-muted);
  font-style: italic;
}

.ss-hours-today.ss-closed {
  color: #dc2626;
}

.ss-hours-compact {
  max-width: 300px;
}

.ss-hours-inline {
  font-size: var(--ss-font-size-sm);
  color: var(--ss-text-light);
}

/* ========================================================================
   Address & Contact
   ======================================================================== */
.ss-address {
  color: var(--ss-text-light);
  text-decoration: none;
  font-size: var(--ss-font-size-sm);
}

.ss-address:hover {
  color: var(--ss-primary);
  text-decoration: underline;
}

.ss-contact a {
  color: var(--ss-text-light);
  text-decoration: none;
  font-size: var(--ss-font-size-sm);
}

.ss-contact a:hover {
  color: var(--ss-primary);
}

/* ========================================================================
   Badges
   ======================================================================== */
.ss-badge {
  display: inline-block;
  background: var(--ss-bg-alt);
  color: var(--ss-text);
  padding: 2px 8px;
  border-radius: var(--ss-radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
}

.ss-badge--dietary {
  background: #dcfce7;
  color: #166534;
}

.ss-badge--status-open {
  background: #dcfce7;
  color: #166534;
}

.ss-badge--status-closed {
  background: #fee2e2;
  color: #991b1b;
}