/* =====================================================================
   OxygenBars.com design tokens + base components  v1.0 (Oct 24, 2026)
   Drop into: wp-content/themes/oxygenbars-child/assets/css/tokens.css
   Enqueue: see theme-setup.md. No build step, no Elementor Pro required.
   ---------------------------------------------------------------------
   FONT: self-host Jost (SIL OFL). Ship ONLY the 4 weights used:
   400 body · 500 chips/subtitles · 600 headings/buttons · 700 numbers.
   Files: assets/fonts/jost-{400,500,600,700}.woff2 (latin subset, ~20 KB each).
   Preload only 400 + 600 in <head>. Turn OFF Google Fonts in Elementor
   (Settings → Advanced/Performance → Google Fonts: Disable) so Jost isn't loaded twice.
   ===================================================================== */
@font-face{font-family:"Jost";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/jost-400.woff2") format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/jost-500.woff2") format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/jost-600.woff2") format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/jost-700.woff2") format("woff2")}

:root{
  /* ---- LIVE BRAND PALETTE (exact hex from the live Elementor kit, post-15; names = live --e-global-color-* ids). DO NOT CHANGE ---- */
  --ob-live-secondary:#313D4D;   /* e-global-color-secondary: navy */
  --ob-live-primary:#484F56;     /* e-global-color-primary: charcoal */
  --ob-live-bd8ee69:#496EA0;     /* steel blue */
  --ob-live-d49ac81:#5EC6FF;     /* sky blue (also def42f5) */
  --ob-live-1ebe17d:#B8D0ED;     /* light blue */
  --ob-live-332724a:#20257F;     /* indigo (also 044b931) */
  --ob-live-73a81c6:#ADC1D8;     /* powder blue */
  --ob-live-d7d34cf:#BBCED5;     /* blue-grey */
  --ob-live-4d462f5:#D2D2D2;     /* light grey */
  --ob-live-cfa1f76:#F7F8F9;     /* off-white */
  --ob-live-text:#FFFFFF;        /* e-global-color-text */
  --ob-live-accent:#FFFFFF2B;    /* e-global-color-accent: white 17% overlay */
  /* ---- semantic tokens (live values referenced; tints = extra tokens) ---- */

  /* ---- color ---- */
  --ob-navy-900:var(--ob-live-secondary);   /* headings, dark bands, PRIMARY BUTTON (white text 11.0:1) */
  --ob-navy-hover:#26303D; /* primary hover (13.4:1) */
  --ob-navy-950:#1F2733;   /* price, strongest text, primary pressed (15.0:1) */
  --ob-slate-700:var(--ob-live-primary);  /* body text */
  --ob-slate-500:#5D6878;  /* meta, subtitles (5.9:1) */
  --ob-slate-400:#64748B;  /* helper text minimum (4.8:1) */
  --ob-blue-600:var(--ob-live-bd8ee69);   /* links, selected states, stats ONLY (not buy buttons) (5.2:1) */
  --ob-blue-700:#3B5A86;   /* link hover */
  --ob-blue-800:#2E4769;
  --ob-blue-200:var(--ob-live-1ebe17d);   /* light blue, text on navy */
  --ob-blue-100:#D6E1EF;   /* chip / selected borders */
  --ob-blue-50:#F0F5FC;    /* selected fill */
  --ob-sky-400:var(--ob-live-d49ac81);    /* decorative accent only. NEVER white text on it (1.9:1) */
  --ob-bg:#FFFFFF;
  --ob-bg-subtle:var(--ob-live-cfa1f76); /* was #F5F8FC (drift fixed) */ --ob-bg-tint:#F5F8FC;  /* alternate sections, filter panel */
  --ob-border:#E3E8EF; /* extra tint (hairlines) */ --ob-border-strong:var(--ob-live-4d462f5); /* inputs, dividers */ --ob-indigo:var(--ob-live-332724a); --ob-powder:var(--ob-live-73a81c6); --ob-bluegrey:var(--ob-live-d7d34cf); --ob-sky-tint:rgba(94,198,255,.16);
  --ob-success:#2F8F5B;    /* ticks, "Added" state */
  --ob-sale:#B42318;       /* Sale badge, errors (6.5:1) */

  /* ---- type ---- */
  --ob-font:"Jost",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* fluid scale: 390px → 1280px viewport */
  --fs-display:clamp(32px,2.4rem + 1.2vw,44px);
  --fs-h1:clamp(28px,1.5rem + 1.3vw,40px);
  --fs-h2:clamp(24px,1.25rem + 0.8vw,30px);
  --fs-h3:clamp(18px,1.05rem + 0.25vw,20px);
  --fs-h4:16px;
  --fs-lead:clamp(16px,0.95rem + 0.25vw,18px);
  --fs-body:16px;           /* inputs stay 16px (no iOS zoom) */
  --fs-small:14px;
  --fs-micro:12px;
  --fs-price:clamp(34px,1.9rem + 0.7vw,40px);    /* product page */
  --fs-price-card:clamp(17px,1rem + 0.4vw,21px); /* listing card */
  --lh-tight:1.15; --lh-head:1.3; --lh-body:1.6;

  /* ---- spacing (4px base) ---- */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;--s10:40px;--s12:48px;--s16:64px;--s20:80px;
  --section-y:clamp(48px,3rem + 2.5vw,80px);
  --container:1240px; --gutter:24px;

  /* ---- radii ---- */
  --r-sm:6px;--r-md:10px;--r-lg:14px;--r-xl:20px;--r-pill:999px;

  /* ---- shadows ---- */
  --sh-1:0 1px 2px rgba(17,24,39,.06);
  --sh-2:0 4px 14px rgba(49,61,77,.10);
  --sh-3:0 12px 32px rgba(49,61,77,.16);
  --sh-focus:0 0 0 3px #fff,0 0 0 5px var(--ob-blue-600);

  /* ---- breakpoints (reference only; CSS vars can't be used in @media) ----
     mobile  <768   (design width 390)
     tablet  768–1023 (drawer menu, 2-col grids)
     desktop ≥1024  (mega-menu, 3–4 col grids)
     wide    ≥1280  (header shows email)                                    */
}
@media (max-width:767px){:root{--gutter:16px}}

/* ---- base ---- */
body{font-family:var(--ob-font);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ob-slate-700)}
h1,h2,h3,h4{font-family:var(--ob-font);font-weight:600;color:var(--ob-navy-900);margin:0}
h1{font-size:var(--fs-h1);line-height:var(--lh-tight)} h2{font-size:var(--fs-h2);line-height:1.2} h3{font-size:var(--fs-h3);line-height:var(--lh-head)} h4{font-size:var(--fs-h4)}
a{color:var(--ob-blue-600)} a:hover{color:var(--ob-blue-700)}
:focus-visible{outline:none;box-shadow:var(--sh-focus);border-radius:4px}
.ob-container{max-width:calc(var(--container) + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.ob-section{padding:var(--section-y) 0} .ob-section--alt{background:var(--ob-bg-subtle)}
.ob-eyebrow{font-size:13px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--ob-blue-600)}
.ob-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- buttons ---- (map Woo: .button, .single_add_to_cart_button, .checkout-button, #place_order → .ob-btn--primary look) */
.ob-btn{--h:48px;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--h);padding:0 22px;border-radius:var(--r-md);border:1.5px solid transparent;font:600 16px/1 var(--ob-font);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,box-shadow .15s}
.ob-btn--lg{--h:56px;font-size:17px;padding:0 28px}
.ob-btn--sm{--h:40px;font-size:14px;padding:0 16px}
.ob-btn--primary,
.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce .single_add_to_cart_button,.woocommerce #place_order,.woocommerce a.checkout-button{background:var(--ob-navy-900);color:#fff;border-color:transparent;box-shadow:var(--sh-2)}
.ob-btn--primary:hover,
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,.woocommerce .single_add_to_cart_button:hover,.woocommerce #place_order:hover,.woocommerce a.checkout-button:hover{background:var(--ob-navy-hover);color:#fff}
.ob-btn--primary:active{background:var(--ob-navy-950)}
.ob-btn--secondary{background:#fff;color:var(--ob-navy-900);border-color:var(--ob-border)}
.ob-btn--secondary:hover{border-color:var(--ob-blue-600);color:var(--ob-blue-700)}
.ob-btn--light{background:#fff;color:var(--ob-navy-900)} .ob-btn--light:hover{background:var(--ob-blue-50)}
.ob-btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)} .ob-btn--ghost:hover{background:rgba(255,255,255,.1);color:#fff}
.ob-btn[disabled],.ob-btn.is-disabled{background:#E5E9EF;color:#8A94A3;box-shadow:none;cursor:not-allowed}
.ob-btn.is-added{background:var(--ob-success)}
.ob-btn--block{width:100%}
.ob-link{background:none;border:0;padding:0;min-height:44px;font:600 14px var(--ob-font);color:var(--ob-blue-600);text-decoration:underline;cursor:pointer}

/* ---- form controls ---- */
.ob-input,.woocommerce form .input-text,.woocommerce form select{width:100%;min-height:48px;padding:0 14px;border:1.5px solid var(--ob-border);border-radius:var(--r-md);font:16px var(--ob-font);color:var(--ob-navy-950);background:#fff}
.ob-input:focus,.woocommerce form .input-text:focus{outline:none;border-color:var(--ob-blue-600);box-shadow:0 0 0 3px rgba(73,110,160,.2)}
.ob-input.is-error,.woocommerce form .woocommerce-invalid .input-text{border-color:var(--ob-sale)}
/* option card (radio/checkbox): <label class="ob-opt"><input …><span class="ob-opt__card">…</span></label> */
.ob-opt{position:relative;display:block;cursor:pointer}
.ob-opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.ob-opt__card{display:flex;gap:10px;align-items:flex-start;min-height:56px;padding:10px 12px;border:1.5px solid var(--ob-border);border-radius:var(--r-md);background:#fff}
.ob-opt input:checked+.ob-opt__card{border-color:var(--ob-blue-600);background:var(--ob-blue-50);box-shadow:inset 0 0 0 1px var(--ob-blue-600)}
.ob-opt input:focus-visible+.ob-opt__card{box-shadow:var(--sh-focus)}
/* filter chip (GET-form checkbox): <label class="ob-fchip"><input type=checkbox name=guests value=2><span>2 guests <small>(1)</small></span></label> */
.ob-fchip{position:relative;cursor:pointer;display:inline-block}
.ob-fchip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.ob-fchip span{display:inline-flex;align-items:center;gap:4px;min-height:40px;padding:0 14px;border:1px solid var(--ob-border);border-radius:var(--r-pill);background:#fff;font-size:14px;font-weight:500;color:var(--ob-navy-900);white-space:nowrap}
.ob-fchip small{color:var(--ob-slate-400);font-size:12px}
.ob-fchip input:checked+span{border-color:var(--ob-blue-600);background:var(--ob-blue-50);box-shadow:inset 0 0 0 1px var(--ob-blue-600);color:var(--ob-blue-700)}
.ob-fchip input:checked+span::before{content:"✓";font-weight:700}
.ob-fchip input:focus-visible+span{box-shadow:var(--sh-focus)}

/* ---- cards ---- */
.ob-card{background:#fff;border:1px solid var(--ob-border);border-radius:var(--r-lg);padding:var(--s6)}
.ob-card--hover{transition:box-shadow .15s,border-color .15s}.ob-card--hover:hover{box-shadow:var(--sh-2);border-color:var(--ob-blue-100)}
/* product card (archive). CLS-safe: image box has fixed 1:1 ratio + width/height attrs */
.ob-pcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--ob-border);border-radius:var(--r-lg);overflow:hidden}
.ob-pcard__media{display:block;aspect-ratio:1/1;background:#fff;border-bottom:1px solid var(--ob-border)}
.ob-pcard__media img{width:100%;height:100%;object-fit:contain}
.ob-pcard__body{display:flex;flex-direction:column;flex:1;padding:14px 16px 16px}
.ob-pcard__title{font-size:17px;line-height:1.3;margin:0 0 2px}.ob-pcard__title a{color:var(--ob-navy-900);text-decoration:none}
.ob-pcard__sub{font-size:13px;color:var(--ob-slate-500);margin:0 0 10px}
.ob-pcard__price{margin-top:auto;margin-bottom:12px;font-size:var(--fs-price-card);font-weight:600;color:var(--ob-navy-950)}
.ob-pcard__acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}.ob-pcard__acts .ob-btn{--h:44px;font-size:14px;padding:0 10px}
/* tier / category link card */
.ob-tier{display:grid;gap:2px;padding:16px 18px;border:1px solid var(--ob-border);border-radius:var(--r-lg);background:#fff;text-decoration:none;color:var(--ob-slate-500)}
.ob-tier:hover{border-color:var(--ob-blue-600);box-shadow:var(--sh-2)}
.ob-tier__t{font-size:18px;font-weight:600;color:var(--ob-navy-900)}.ob-tier__c{font-size:13px;font-weight:600;color:var(--ob-blue-600)}

/* ---- chips & badges ---- */
.ob-chip{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border:1px solid var(--ob-blue-100);border-radius:var(--r-pill);background:#fff;color:var(--ob-navy-900);font-size:14px;font-weight:500}
.ob-stat{display:inline-flex;align-items:center;gap:4px;min-height:28px;padding:0 9px;border-radius:var(--r-pill);background:var(--ob-bg-subtle);font-size:12.5px;font-weight:500;color:var(--ob-navy-900)} /* card stat chip: guests / LPM / stations */
.ob-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-pill);font-size:12px;font-weight:600;line-height:1.4;background:#fff;color:var(--ob-navy-900);border:1px solid var(--ob-border)}
.ob-badge--blue{background:var(--ob-blue-50);color:var(--ob-blue-700);border-color:transparent}
.ob-badge--sale,.woocommerce span.onsale{background:var(--ob-sale);color:#fff;border-color:transparent}

/* ---- tables ---- */
.ob-table-scroll{overflow-x:auto;border:1px solid var(--ob-border);border-radius:var(--r-lg);background:#fff}
.ob-table{width:100%;border-collapse:collapse;font-size:14px}
.ob-table th,.ob-table td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--ob-border)}
.ob-table thead th{background:var(--ob-navy-900);color:#fff}
.ob-table tbody th{color:var(--ob-navy-900);font-weight:600;position:sticky;left:0;background:#fff}
.ob-table tbody tr:nth-child(even)>*{background:var(--ob-bg-subtle)}

/* ---- policy note (cart/checkout, "All sales final") ---- */
.ob-policy{font-size:13px;line-height:1.5;color:var(--ob-slate-500);margin:10px 0 0}
.ob-policy a{color:var(--ob-blue-600)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ---------- v0.3: payment placeholders, copy markers, disclaimers ---------- */
.pay-placeholder{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;padding:0 14px;border:1.5px dashed #C9D1DC;border-radius:var(--r-md);background:#F1F3F6;color:#5D6878;font:500 14px/1.2 var(--ob-font);white-space:nowrap;cursor:not-allowed;box-shadow:none;appearance:none;-webkit-appearance:none}
.pay-placeholder:hover,.pay-placeholder:focus{background:#F1F3F6;color:#5D6878;border-color:#C9D1DC}
.pay-row{display:grid;gap:10px;margin-top:10px}
.pay-row.wallets{grid-template-columns:repeat(3,1fr)}
.pay-row.wallets .pay-placeholder{font-size:13px;padding:0 8px}
@media (max-width:420px){.pay-row.wallets{grid-template-columns:1fr 1fr}.pay-row.wallets .pay-placeholder:last-child{grid-column:1/-1}}
/* Copy markers: staging only; must not exist in production */
.mk{background:#FFF4CC;color:#7A4A00;border:1px dashed #C08A00;border-radius:4px;padding:0 4px;font-size:.85em;font-weight:600}
.ob-footer .mk,.ob-dark .mk{background:#3a3220;color:#FFD98A;border-color:#C08A00}
.disclaimer{font-size:12.5px;line-height:1.5;color:var(--ob-slate-500);margin:12px 0 0}
.ob-footer .disclaimer{color:rgba(255,255,255,.72);border-top:1px solid rgba(255,255,255,.12);padding-top:14px}
/* extras used by the sales template (not brand colours) */
:root{--ob-ph-bg:#FFF8EB;--ob-ph-border:#B7791F;--ob-ph-text:#8A5A12;--r-leaf:0 20px}