/*
Theme Name:        Sixth Element
Theme URI:         https://6thelement.hykvra.in/
Author:            6th Element Distributors Ltd
Author URI:        https://6thelement.hykvra.in/
Description:       Custom standalone B2B wholesale theme for 6th Element Distributors. Editorial-wholesale aesthetic — navy + muted gold, Inter, sentence case, squared corners. Pairs with the Sixth Element Core plugin.
Version:           1.2.1
Requires at least: 6.5
Tested up to:      6.7
Requires PHP:      8.2
License:           Proprietary
License URI:       https://6thelement.hykvra.in/
Text Domain:       sixth-element
Tags:              e-commerce, woocommerce, b2b, wholesale, custom, editorial
*/

/* ─────────────────────────────────────────────────────────────
   Design tokens — Editorial wholesale system.
   Sentence case, squared corners, hairline borders, generous whitespace.
   ───────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Brand */
  --se-color-primary:        #0D2451;
  --se-color-primary-soft:   #1a3a6e;
  --se-color-primary-deep:   #081a3a;
  --se-color-accent:         #C8A04A;
  --se-color-accent-dark:    #8a7549;

  /* Surfaces */
  --se-color-bg:             #FFFFFF;
  --se-color-surface:        #F5F7FA;
  --se-color-surface-warm:   #ECEEF2;
  --se-color-ink:            #1A1C1F;

  /* Text */
  --se-color-text:           #1A1C1F;
  --se-color-muted:          #5E6672;
  --se-color-faint:          #9AA3B0;

  /* Borders */
  --se-color-border:         #EEF0F4;
  --se-color-border-input:   #D5DAE2;
  --se-color-border-mid:     #E5E8ED;

  /* Status colors */
  --se-color-success:        #2d6b3e;
  --se-color-success-bg:     rgba(74,140,90,0.1);
  --se-color-success-dot:    #4a8c5a;
  --se-color-warning:        #8a7549;
  --se-color-warning-bg:     rgba(200,160,74,0.12);
  --se-color-danger:         #a82020;
  --se-color-danger-bg:      rgba(168,32,32,0.1);

  /* Type */
  --se-font-sans:   'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --se-font-mono:   'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

  /* Layout */
  --se-max-width:   1280px;
  --se-gutter:      48px;
  --se-nav-height:  68px;
}

html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--se-font-sans);
  color: var(--se-color-text);
  background: var(--se-color-bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01', 'cv11';
}

img { max-width: 100%; height: auto; display: block; }
a   { color: inherit; text-decoration: none; }

/* Default focus ring */
:focus-visible {
  outline: 2px solid var(--se-color-primary);
  outline-offset: 2px;
}

/* Container */
.se-container {
  max-width: var(--se-max-width);
  margin-inline: auto;
  padding-inline: var(--se-gutter);
}

/* Eyebrow — the brand's signature label
   Use as: <span class="se-eyebrow">Wholesale trade · est. Toronto</span>
   Renders as: "— WHOLESALE TRADE · EST. TORONTO" in gold.
*/
.se-eyebrow {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--se-color-accent);
  font-weight: 600;
}
.se-eyebrow::before { content: '— '; color: var(--se-color-accent); }
.se-eyebrow--numbered::before { content: ''; }
.se-eyebrow--on-dark { color: var(--se-color-accent); }
.se-eyebrow--muted   { color: var(--se-color-muted); }
.se-eyebrow--muted::before { color: var(--se-color-muted); }

/* Mono helper for refs, SKUs */
.se-mono {
  font-family: var(--se-font-mono);
  letter-spacing: 0.04em;
}

/* Screen-reader only */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}