/* ============================================
   PannonPTT — Design Tokens
   All visual values as CSS custom properties.
   ============================================ */

:root {
  /* ── Brand / Primary Blue ── */
  --brand-600: #1f4fd8;
  --brand-500: #3767e0;
  --brand-400: #5b86e8;
  --brand-300: #7a9ef0;
  --brand-100: #dbeafe;

  /* ── Slate / UI backbone ── */
  --slate-900: #0f172a;
  --slate-700: #334155;
  --slate-500: #64748b;
  --slate-300: #cbd5e1;
  --slate-100: #f1f5f9;

  /* ── Surface / Background ── */
  --surface-100: #f8fafc;
  --surface-200: rgba(255, 255, 255, 0.65);
  --surface-300: rgba(255, 255, 255, 0.3);

  /* ── Feedback ── */
  --color-success: #16a34a;
  --color-error: #dc2626;

  /* ── Typography ── */
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  --text-display: clamp(2rem, 4vw, 3rem);
  --text-h1: clamp(1.75rem, 3vw, 2.25rem);
  --text-h2: clamp(1.25rem, 2vw, 1.5rem);
  --text-body-lg: 1.125rem;
  --text-body: 1rem;
  --text-caption: 0.875rem;

  --leading-tight: 1.2;
  --leading-normal: 1.6;
  --leading-relaxed: 1.8;

  /* ── Spacing ── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 64px;

  /* ── Radius ── */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* ── Shadow (slate-900 based, never black) ── */
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 12px 32px rgba(15, 23, 42, 0.10);
  --shadow-lg: 0 30px 60px rgba(15, 23, 42, 0.15);

  /* ── Product card depth / gradient ── */
  --product-card-grad-start: rgba(248, 250, 252, 0.98);
  --product-card-grad-mid: rgba(241, 245, 249, 0.72);
  --product-card-grad-mid-alt-1: rgba(241, 245, 249, 0.72);
  --product-card-grad-mid-alt-2: rgba(241, 245, 249, 0.72);
  --product-card-grad-end: rgba(241, 245, 249, 0.96);
  --product-card-border: rgba(203, 213, 225, 0.8);
  --product-card-overlay: rgba(248, 250, 252, 0.5);
  --product-card-overlay-fade: rgba(248, 250, 252, 0);
  --product-card-highlight: rgba(241, 245, 249, 0.18);
  --product-card-highlight-fade: rgba(241, 245, 249, 0);
  --product-card-grad-fade: rgba(241, 245, 249, 0);
  --product-card-border-hover: rgba(148, 163, 184, 0.72);
  --product-card-divider: rgba(203, 213, 225, 0.82);
  --product-price-shadow: rgba(248, 250, 252, 0.45);
  --product-card-shadow: 0 8px 20px rgba(30, 41, 59, 0.1);
  --product-card-shadow-hover: 0 12px 26px rgba(30, 41, 59, 0.14);
  --product-image-pedestal-inner: rgba(100, 116, 139, 0.2);
  --product-image-pedestal-outer: rgba(148, 163, 184, 0);
  --product-image-halo-inner: rgba(241, 245, 249, 0.32);
  --product-image-halo-outer: rgba(241, 245, 249, 0);
  --product-image-shadow: drop-shadow(0 10px 18px rgba(51, 65, 85, 0.16))
    drop-shadow(0 4px 12px rgba(51, 65, 85, 0.1));
  --product-image-shadow-hover: drop-shadow(0 14px 24px rgba(51, 65, 85, 0.2))
    drop-shadow(0 8px 18px rgba(51, 65, 85, 0.14));
  --product-feature-icon-bg-start: rgba(248, 250, 252, 0.96);
  --product-feature-icon-bg-end: rgba(241, 245, 249, 0.96);
  --product-feature-icon-border: rgba(203, 213, 225, 0.9);
  --product-feature-icon-shadow: 0 1px 3px rgba(51, 65, 85, 0.08);

  /* ── Value card depth / gradient (hero-inspired) ── */
  --value-card-grad-start: rgba(248, 250, 252, 0.98);
  --value-card-grad-end: rgba(241, 245, 249, 0.97);
  --value-card-border: rgba(203, 213, 225, 0.9);
  --value-card-border-hover: rgba(148, 163, 184, 0.78);
  --value-card-overlay: rgba(255, 255, 255, 0.55);
  --value-card-overlay-fade: rgba(255, 255, 255, 0);
  --value-card-shadow: 0 10px 24px rgba(30, 41, 59, 0.1);
  --value-card-shadow-hover: 0 14px 30px rgba(30, 41, 59, 0.14);
  --value-card-ground-inner: rgba(148, 163, 184, 0.24);
  --value-card-ground-outer: rgba(148, 163, 184, 0);
  --value-icon-bg-start: rgba(238, 243, 248, 0.96);
  --value-icon-bg-end: rgba(241, 245, 249, 0.98);
  --value-icon-border: rgba(203, 213, 225, 0.9);
  --value-icon-shadow: 0 2px 8px rgba(51, 65, 85, 0.12);
  --value-icon-color: #334155;

  /* ── Glass (hero only) ── */
  --glass-bg: rgba(255, 255, 255, 0.42);
  --glass-border: 1px solid rgba(255, 255, 255, 0.45);
  --glass-blur: blur(18px);

  /* ── Header ── */
  --header-bg: rgba(248, 250, 252, 0.85);
  --header-border: rgba(203, 213, 225, 0.4);

  /* ── Footer (single-panel, professional gray) ── */
  --footer-section-padding-y: 40px;
  --footer-border-width: 1px;
  --footer-top-line-height: 1px;
  --footer-bg-start: var(--surface-100);
  --footer-bg-mid: var(--surface-100);
  --footer-bg-end: var(--surface-100);
  --footer-bg-mid-stop: 56%;
  --footer-blob-inner: rgba(148, 163, 184, 0);
  --footer-blob-outer: rgba(148, 163, 184, 0);
  --footer-border-top: rgba(148, 163, 184, 0.32);
  --footer-panel-gap: var(--space-lg);
  --footer-panel-bg: #3f4a5d;
  --footer-panel-border-width: 1px;
  --footer-panel-border: rgba(100, 116, 139, 0.75);
  --footer-panel-radius: var(--radius-sm);
  --footer-panel-padding: var(--space-lg);
  --footer-panel-padding-mobile: var(--space-md);
  --footer-panel-gap-mobile: var(--space-md);
  --footer-panel-shadow: 0 8px 18px rgba(15, 23, 42, 0.16);
  --footer-title-size: var(--text-body);
  --footer-title-weight: 700;
  --footer-title-margin-bottom: var(--space-md);
  --footer-title-letter-spacing: 0.01em;
  --footer-title: #f1f5f9;
  --footer-text: #dbe4f0;
  --footer-muted: #b5c0cf;
  --footer-list-gap: var(--space-sm);
  --footer-item-gap: var(--space-sm);
  --footer-item-size: var(--text-caption);
  --footer-item-line-height: 1.5;
  --footer-link: #dbeafe;
  --footer-link-weight: 500;
  --footer-link-underline-color: rgba(191, 219, 254, 0.72);
  --footer-link-underline-offset: 3px;
  --footer-link-underline-thickness: 1.5px;
  --footer-link-hover: #eff6ff;
  --footer-doc-link-weight: 600;
  --footer-icon: #e2e8f0;
  --footer-icon-size: 24px;
  --footer-icon-padding: 4px;
  --footer-icon-radius: 999px;
  --footer-icon-margin-top: 1px;
  --footer-icon-bg: rgba(255, 255, 255, 0.08);
  --footer-icon-border-width: 1px;
  --footer-icon-border: rgba(226, 232, 240, 0.28);
  --footer-meta-size: var(--text-caption);
  --footer-legal-gap: var(--space-lg);
  --footer-credit-size: var(--text-caption);
  --footer-credit-padding-top: var(--space-md);
  --footer-credit-border-width: 1px;
  --footer-credit-border: rgba(226, 232, 240, 0.22);
  --footer-focus: rgba(191, 219, 254, 0.82);
  --footer-focus-width: 2px;
  --footer-focus-offset: 2px;
  --footer-top-line-start: rgba(148, 163, 184, 0);
  --footer-top-line-mid: rgba(148, 163, 184, 0.42);
  --footer-top-line-end: rgba(148, 163, 184, 0);

  /* ── Mobile Nav (glass) ── */
  --nav-mobile-bg: rgba(248, 250, 252, 0.72);
  --nav-mobile-border: rgba(203, 213, 225, 0.35);

  /* ── Hero background ── */
  /* Tuned to match hero.png reference */
  --hero-grad-start: #9bb4d8;
  --hero-grad-mid: #dbe7f3;
  --hero-grad-end: #f8fafc;
  --hero-radial-inner: rgba(255, 255, 255, 0.95);
  --hero-radial-mid: rgba(255, 255, 255, 0.45);
  --hero-radial-outer: rgba(255, 255, 255, 0);
  --hero-top-wash-start: rgba(255, 255, 255, 0.8);
  --hero-top-wash-end: rgba(255, 255, 255, 0);
  --hero-left-haze-inner: rgba(120, 160, 200, 0.55);
  --hero-left-haze-outer: rgba(120, 160, 200, 0);
  --hero-right-blob-inner: rgba(120, 160, 200, 0.42);
  --hero-right-blob-outer: rgba(120, 160, 200, 0);
  --hero-fade-start: rgba(241, 245, 249, 1);
  --hero-fade-end: rgba(241, 245, 249, 0);

  /* ── Detail hero (subpage) ── */
  --detail-hero-img-max-height: 420px;

  /* ── Hero image drop-shadow ── */
  --hero-img-shadow: drop-shadow(0 24px 34px rgba(15, 23, 42, 0.22))
    drop-shadow(0 10px 20px rgba(51, 65, 85, 0.16));
  --hero-img-glow-inner: rgba(255, 255, 255, 0.62);
  --hero-img-glow-outer: rgba(255, 255, 255, 0);
  --hero-img-ground-inner: rgba(15, 23, 42, 0.18);
  --hero-img-ground-outer: rgba(15, 23, 42, 0);

  /* ── Brand shadow (CTA buttons) ── */
  --shadow-brand-sm: 0 4px 12px rgba(31, 79, 216, 0.25);
  --shadow-brand-md: 0 6px 16px rgba(31, 79, 216, 0.3);

  /* ── Focus ring ── */
  --focus-ring: 0 0 0 3px rgba(31, 79, 216, 0.1);

  /* ── Motion ── */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-normal: 220ms;
  --dur-slow: 360ms;

  /* ── Nav overlay ── */
  --nav-overlay-bg: rgba(15, 23, 42, 0.45);

  /* ── Layout ── */
  --container-max: 1200px;
  --header-height: 72px;
  --header-height-shrunk: 56px;

  /* ── Error / Feedback surfaces ── */
  --error-bg:     #fef2f2;
  --error-border: #fecaca;

  /* ── Quote Email (inline table layout — email clients) ── */
  --quote-email-body-bg:        #f1f5f9;
  --quote-email-outer-radius:   8px;
  --quote-email-outer-shadow:   0 2px 8px rgba(15, 23, 42, 0.08);
  --quote-email-header-bg:      #ffffff;
  --quote-email-header-border:  #cbd5e1;
  --quote-email-header-text:    #0f172a;
  --quote-email-header-meta:    #334155;
  --quote-email-header-accent:  #1f4fd8;
  --quote-email-panel-border:   #cbd5e1;
  --quote-email-panel-radius:   6px;
  --quote-email-label-color:    #64748b;
  --quote-email-text:           #334155;
  --quote-email-text-strong:    #0f172a;
  --quote-email-row-odd:        #ffffff;
  --quote-email-row-even:       #f8fafc;
  --quote-email-row-border:     #e2e8f0;
  --quote-email-total-bg:       #f0f9ff;
  --quote-email-total-border:   #0f172a;
  --quote-email-total-text:     #0f172a;
  --quote-email-total-amount:   #1f4fd8;
  --quote-email-cta-bg:         #dbeafe;
  --quote-email-cta-accent:     #1f4fd8;
  --quote-email-cta-text:       #0f172a;
  --quote-email-footer-border:  #e2e8f0;
  --quote-email-footer-text:    #64748b;
  --quote-email-footer-strong:  #334155;
  --quote-email-link:           #1f4fd8;
  --quote-email-muted:          #94a3b8;

  /* ── Admin Panel ── */
  --admin-bg: var(--surface-100);
  --admin-card-bg: rgba(255, 255, 255, 0.92);
  --admin-card-border: var(--slate-300);
  --admin-nav-bg: var(--slate-900);
  --admin-nav-text: var(--slate-100);
  --admin-nav-active-bg: rgba(255, 255, 255, 0.12);
  --admin-nav-hover-bg: rgba(255, 255, 255, 0.08);
  --admin-nav-width: 220px;
  --admin-table-header-bg: var(--slate-100);
  --admin-table-row-hover: rgba(241, 245, 249, 0.6);
  --admin-table-border: var(--slate-100);
  --admin-badge-contact-bg: var(--brand-100);
  --admin-badge-contact-text: var(--brand-600);
  --admin-badge-callback-bg: #dcfce7;
  --admin-badge-callback-text: var(--color-success);
  --admin-done-bg: rgba(22, 163, 74, 0.08);
  --admin-stat-card-bg: var(--admin-card-bg);
}