/**
 * LINQDOM Design Tokens — CSS Custom Properties
 * Extracted from: references/Product Page.html
 * Extraction method: Visual source analysis of inline CSS
 * Confidence level: HIGH — all values directly from CSS property declarations
 * Date: 2026-09-03
 */

:root {
  /* ============================================================
   * 1. COLOR PALETTE
   * ============================================================ */

  /* Primary Brand Color */
  --color-primary:           #0ca68a;   /* Confirmed: used for CTA buttons, links, icon accents */
  --color-primary-hover:     #088c74;   /* Confirmed: .btn-primary:hover background */
  --color-primary-light:     rgba(12, 166, 138, 0.08);  /* Confirmed: hover backgrounds */
  --color-primary-glow:      rgba(12, 166, 138, 0.25);   /* Confirmed: box-shadow glow */

  /* Dark / Hero / Video Section */
  --color-dark-bg:           #0f172a;   /* Confirmed: .full-width-video background, video overlay */
  --color-video-overlay:     rgba(15, 23, 42, 0.35);     /* Confirmed: video overlay on hover = 0.25 */
  --color-video-overlay-hover: rgba(15, 23, 42, 0.25);

  /* Light Section Background */
  --color-bg-section:        #f8fafc;   /* Confirmed: .bg-light class, section bg */

  /* Card & Surface */
  --color-bg-card:           #ffffff;   /* Confirmed: .bg-white, all card backgrounds */
  --color-bg-white:          #ffffff;

  /* Text Hierarchy */
  --color-text-dark:         #1e293b;   /* Confirmed: body text, headings (--text-dark) */
  --color-text-body:         #1e293b;
  --color-text-muted:        #64748b;   /* Confirmed: breadcrumbs, labels, subtitles */
  --color-text-light:        #64748b;

  /* Borders */
  --color-border:            #e2e8f0;   /* Confirmed: .border-color, card borders, dividers */
  --color-border-light:      #e2e8f0;

  /* Interactive States */
  --color-primary-rgb:       12, 166, 138;  /* For rgba() usage */

  /* Badge / Certification Tags */
  --color-badge-border:      #94a3b8;   /* Confirmed: .cert-tag border */
  --color-badge-text:        #475569;   /* Confirmed: .cert-tag text */

  /* Status Colors (inferred, not confirmed in source) */
  --color-success:           #10b981;   /* Used in compat-table .fa-circle-check = primary color */
  --color-error:             #ef4444;   /* Not confirmed in source */
  --color-warning:           #f59e0b;   /* Not confirmed in source */

  /* ============================================================
   * 2. TYPOGRAPHY
   * ============================================================ */

  /* Font Stack */
  --font-family-base:        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                              "Helvetica Neue", Arial, sans-serif;
  --font-family-body:        var(--font-family-base);
  --font-family-ui:          var(--font-family-base);

  /* Google Fonts: None used in reference HTML (system font stack only) */

  /* Font Weights */
  --font-weight-regular:      400;
  --font-weight-medium:       500;
  --font-weight-semibold:      600;
  --font-weight-bold:         700;
  --font-weight-extrabold:    800;

  /* H1 — Responsive (Hero / Page Title) — clamp 28px → 36px */
  --font-size-h1:            clamp(28px, 4vw, 36px);
  --line-height-h1:           1.2;
  --font-weight-h1:           800;

  /* H2 — Responsive (Section Titles) — clamp 20px → 28px */
  --font-size-h2:            clamp(20px, 2.5vw, 28px);
  --line-height-h2:          1.3;
  --font-weight-h2:           800;
  --letter-spacing-h2:        0.05em;
  --text-transform-h2:         uppercase;

  /* H3 — Responsive (Card Titles) — clamp 17px → 22px */
  --font-size-h3:            clamp(17px, 2vw, 22px);
  --line-height-h3:          1.3;
  --font-weight-h3:           700;

  /* H4 — Responsive (Feature Card Titles) — clamp 15px → 18px */
  --font-size-h4:            clamp(15px, 1.6vw, 18px);
  --font-weight-h4:           700;
  --margin-bottom-h4:          6px;

  /* H5 — Installation Step Titles */
  --font-size-h5:            13px;
  --font-weight-h5:           700;

  /* Body — 15px desktop / 14px mobile (via media query below) */
  --font-size-body:          15px;
  --line-height-body:         1.6;
  --font-size-body-sm:        14px;
  --font-size-body-xs:        12px;

  /* Spec Table */
  --font-size-spec-label:    13px;
  --font-size-spec-value:    13px;

  /* Button Text */
  --font-size-btn:           14px;
  --font-weight-btn:          600;

  /* Caption / Small — 12px minimum readability floor */
  --font-size-caption:       12px;
  --font-size-tiny:          12px;
  --color-text-caption:      var(--color-text-muted);

  /* ============================================================
   * 3. SPACING & LAYOUT
   * ============================================================ */

  /* Container */
  --container-max-width:      1200px;
  --container-padding-x:      20px;
  --container-padding-x-sm:   16px;       /* Mobile edge breathing room */
  --container-margin-x:       auto;

  /* Sections */
  --section-padding-y:       48px;
  --section-title-margin-y:   48px;

  /* Cards */
  --card-padding:             20px 16px;  /* .feature-card (was 20px 12px — squished) */
  --card-padding-large:       24px;       /* .cert-row, .cta-banner */
  --card-padding-sm:          16px;       /* .dl-card, .prod-card — 16px floor */
  --card-padding-xs:          14px 16px;  /* .faq-item */
  --card-border-radius:       8px;        /* .radius */

  /* Grids */
  --grid-columns-2:          1fr 1fr;
  --grid-columns-4:          repeat(4, 1fr);
  --grid-columns-6:          repeat(6, 1fr);
  --grid-columns-7:          repeat(7, 1fr);
  --grid-gap:                12px;
  --grid-gap-md:             16px;
  --grid-gap-lg:             20px;
  --grid-gap-xl:             24px;
  --grid-gap-2xl:            48px;

  /* Hero */
  --hero-grid-gap:           48px;
  --hero-image-min-height:   420px;
  --hero-image-border-radius: 12px;

  /* Spec Bar */
  --spec-bar-gap:            12px;
  --spec-node-padding:        10px 4px;

  /* ============================================================
   * 4. INTERACTIVE & TRANSITIONS
   * ============================================================ */

  /* Base Transition (used on most elements) */
  --transition-base:         all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* Elevated Transition (buttons, cards on hover) */
  --transition-elevated:     transform 0.2s ease, box-shadow 0.2s ease;

  /* Image Zoom */
  --transition-image-zoom:   transform 0.5s ease;
  --transition-image-zoom-hero: transform 0.6s ease;

  /* Icon Scale */
  --transition-icon:         transform 0.3s ease;

  /* Shadow Utilities */
  --shadow-card:             0 6px 20px rgba(0, 0, 0, 0.04);
  --shadow-card-hover:       0 12px 30px rgba(0, 0, 0, 0.08);
  --shadow-card-deep:        0 10px 24px rgba(0, 0, 0, 0.08);
  --shadow-btn-primary:       0 4px 12px var(--color-primary-glow);
  --shadow-btn-primary-hover: 0 6px 16px var(--color-primary-glow);
  --shadow-card-glow:        0 10px 24px var(--color-primary-glow);

  /* Transform Utilities */
  --translate-y-hover:        translateY(-4px);
  --translate-y-hover-sm:     translateY(-2px);
  --translate-y-hover-md:    translateY(-3px);
  --translate-y-hover-lg:    translateY(-6px);
  --translate-x-hover:       translateX(4px);
  --scale-hover:             scale(1.03);
  --scale-hover-sm:          scale(1.02);
  --scale-hover-icon:        scale(1.15);
  --scale-hover-icon-md:     scale(1.2);
  --scale-hover-icon-lg:     scale(1.25);

  /* ============================================================
   * 5. BUTTON SYSTEM
   * ============================================================ */

  /* Button Base */
  --btn-border-radius:        6px;
  --btn-padding-x:            24px;
  --btn-padding-y:            12px;
  --btn-padding-xs:           8px 18px;

  /* Primary Button */
  --btn-primary-bg:           var(--color-primary);
  --btn-primary-bg-hover:     var(--color-primary-hover);
  --btn-primary-color:        #ffffff;
  --btn-primary-border:        var(--color-primary);
  --btn-primary-border-hover:  var(--color-primary-hover);

  /* Outline Button — DEFAULT = dark text on white/transparent (WCAG AA) */
  --btn-outline-bg:            #ffffff;
  --btn-outline-bg-hover:      var(--color-primary-light);
  --btn-outline-color:        var(--color-text-dark);
  --btn-outline-color-hover:   var(--color-primary);
  --btn-outline-border:        var(--color-border);
  --btn-outline-border-hover:  var(--color-primary);

  /* Secondary Button — muted gray (WCAG AA on white) */
  --btn-secondary-bg:          #f1f5f9;
  --btn-secondary-bg-hover:    var(--color-primary-light);
  --btn-secondary-color:       var(--color-text-dark);
  --btn-secondary-color-hover: var(--color-primary);
  --btn-secondary-border:      var(--color-border);
  --btn-secondary-border-hover:var(--color-primary);

  /* White Button — solid white card-style button (dark text always) */
  --btn-white-bg:              #ffffff;
  --btn-white-bg-hover:        var(--color-primary-light);
  --btn-white-color:           var(--color-text-dark);
  --btn-white-color-hover:     var(--color-primary);
  --btn-white-border:          var(--color-border);
  --btn-white-border-hover:    var(--color-primary);

  /* Ghost Button — no border, brand text only (WCAG AA on white) */
  --btn-ghost-bg:              transparent;
  --btn-ghost-bg-hover:        var(--color-primary-light);
  --btn-ghost-color:           var(--color-primary);
  --btn-ghost-color-hover:     var(--color-primary-hover);
  --btn-ghost-border:          transparent;
  --btn-ghost-border-hover:    var(--color-primary);

  /* Pill Button (header CTA) */
  --btn-pill-bg:              var(--color-primary);
  --btn-pill-bg-hover:        var(--color-primary-hover);
  --btn-pill-color:           #ffffff;
  --btn-pill-padding:         8px 18px;
  --btn-pill-radius:          20px;
  --btn-pill-font-size:        13px;
  --btn-pill-font-weight:      600;

  /* ============================================================
   * 6. NAVIGATION
   * ============================================================ */

  /* Header */
  --header-height:            70px;
  --header-border-bottom:     1px solid var(--color-border);
  --header-bg:                #ffffff;
  --header-position:          sticky;
  --header-top:               0;
  --header-z-index:           100;

  /* Nav Links */
  --nav-link-font-size:       14px;
  --nav-link-font-weight:      500;
  --nav-link-color:           var(--color-text-dark);
  --nav-link-color-hover:      var(--color-primary);
  --nav-link-underline-color:  var(--color-primary);
  --nav-underline-height:      2px;
  --nav-underline-width-0:     0;
  --nav-underline-width-100:   100%;
  --nav-underline-transform:   translateX(-50%);
  --nav-underline-transition:  width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --nav-gap:                  28px;

  /* ============================================================
   * 7. CARDS & COMPONENTS
   * ============================================================ */

  /* Feature Card */
  --feature-card-border:      1px solid var(--color-border);
  --feature-card-radius:      var(--card-border-radius);
  --feature-card-icon-size:   24px;
  --feature-card-icon-color:  var(--color-primary);
  --feature-card-padding:     var(--card-padding);
  --feature-card-text-align:  center;
  --feature-card-icon-margin-bottom: 12px;

  /* Application Card */
  --app-card-border:          1px solid var(--color-border);
  --app-card-radius:          var(--card-border-radius);
  --app-card-overflow:        hidden;
  --app-card-img-height:      140px;
  --app-card-img-object-fit:   cover;

  /* Product Recommendation Card */
  --prod-card-border:         1px solid var(--color-border);
  --prod-card-radius:         var(--card-border-radius);
  --prod-card-img-height:     120px;
  --prod-card-img-object-fit:  contain;

  /* Download Card */
  --dl-card-border:           1px solid var(--color-border);
  --dl-card-radius:           var(--card-border-radius);
  --dl-card-padding:           16px 8px;
  --dl-card-icon-size:         22px;
  --dl-card-icon-color:        var(--color-primary);

  /* Spec Node (specs bar) */
  --spec-node-border-radius:  var(--card-border-radius);
  --spec-node-icon-size:      20px;
  --spec-node-icon-color:     var(--color-primary);

  /* Certification Row */
  --cert-row-bg:              var(--color-bg-section);
  --cert-row-border:          1px solid var(--color-border);
  --cert-row-padding:         24px;

  /* Certification Tag */
  --cert-tag-border:          2px solid var(--color-badge-border);
  --cert-tag-border-radius:   4px;
  --cert-tag-padding:         6px 12px;
  --cert-tag-font-size:       16px;
  --cert-tag-font-weight:      800;
  --cert-tag-color:           var(--color-badge-text);
  --cert-tag-bg:              #ffffff;

  /* FAQ Item */
  --faq-item-border:          1px solid var(--color-border);
  --faq-item-radius:          var(--card-border-radius);
  --faq-item-padding:         12px 16px;
  --faq-item-font-size:       13px;
  --faq-item-font-weight:      600;
  --faq-item-justify:         space-between;
  --faq-item-align-items:     center;

  /* ============================================================
   * 8. TABLE SYSTEM
   * ============================================================ */

  /* Technical Spec Table */
  --spec-table-border:         1px solid var(--color-border);
  --spec-table-collapse:       collapse;
  --spec-table-font-size:     12px;
  --spec-table-radius:         var(--card-border-radius);
  --spec-table-overflow:       hidden;
  --spec-table-cell-padding:   10px 14px;
  --spec-table-row-hover-bg:   var(--color-primary-light);
  --spec-table-label-bg:       var(--color-bg-section);
  --spec-table-label-width:    25%;
  --spec-table-label-border-r: 1px solid var(--color-border);
  --spec-table-row-transition: background-color 0.2s ease;

  /* Inverter Compatibility Table */
  --compat-table-border:        1px solid var(--color-border);
  --compat-table-font-size:    12px;
  --compat-table-radius:       var(--card-border-radius);
  --compat-table-cell-padding:  10px 14px;
  --compat-table-header-bg:    var(--color-bg-section);
  --compat-table-header-weight: 700;
  --compat-table-row-hover-bg:  var(--color-primary-light);

  /* ============================================================
   * 9. FOOTER
   * ============================================================ */

  /* Confirmed from footer.jpg analysis */
  --footer-bg:                 #0f172a;   /* Dark navy background */
  --footer-text-primary:        #ffffff;   /* LINQDOM logo + links */
  --footer-text-secondary:      rgba(255, 255, 255, 0.7);  /* Inferred: secondary text */
  --footer-link-gap:           4px;       /* Vertical gap between footer links */
  --footer-col-gap:            48px;      /* Gap between footer columns */

  /* ============================================================
   * 10. HERO & VIDEO
   * ============================================================ */

  /* Video Section */
  --video-section-height:     520px;
  --video-container-position: relative;
  --video-btn-size:           72px;
  --video-btn-radius:         50%;
  --video-btn-bg:             rgba(12, 166, 138, 0.9);
  --video-btn-bg-hover:       var(--color-primary);
  --video-btn-icon-size:      24px;
  --video-btn-border:         3px solid rgba(255, 255, 255, 0.8);
  --video-btn-box-shadow:     0 0 24px rgba(12, 166, 138, 0.6);
  --video-play-icon-margin-left: 4px;
  --video-overlay-padding:    0 20px;

  /* ============================================================
   * 11. INSTALLATION FLOW
   * ============================================================ */

  --install-step-border-radius: var(--card-border-radius);
  --install-step-icon-size:     20px;
  --install-step-icon-color:    var(--color-primary);
  --install-step-icon-margin-bottom: 8px;
  --install-arrow:             "›";
  --install-arrow-size:        22px;
  --install-arrow-color:       var(--color-border);
  --install-arrow-position:    absolute;
  --install-arrow-right:        -6px;
  --install-arrow-top:          10px;

  /* ============================================================
   * 12. BREADCRUMBS
   * ============================================================ */

  --breadcrumb-font-size:      12px;
  --breadcrumb-color:          var(--color-text-muted);
  --breadcrumb-color-hover:    var(--color-primary);
  --breadcrumb-padding:        16px 0;
  --breadcrumb-separator:      "›";
  --breadcrumb-separator-margin: 0 6px;

  /* ============================================================
   * 13. CTA BANNER
   * ============================================================ */

  --cta-banner-bg:             #f1f5f9;
  --cta-banner-radius:         12px;
  --cta-banner-padding:        40px;
  --cta-banner-margin-y:       48px;
  --cta-banner-gap:           12px;
}