/* csc-design-tokens-v3.css
   Dark Editorial Homepage Redesign — 2026-07-24
   Adds the dark/editorial shades this brief's "SKATE. TRAIN. EAT. BELONG."
   mockup needs, on top of the already-locked --cst-teal/--cst-teal-dark
   (#52B7B3/#32736F — D-005/D-061). Those are NOT redefined here; the brief's
   requested turquoise already equals them exactly.
   Supersedes v2's --csc-radius-card:28px (D-059) for this build only — this
   new direction is sharp-edged/editorial, not rounded. v2 stays in place for
   any page still using the rounded-card language. */
:root{
  /* New dark/editorial shades */
  --cst-black:#07090A;
  --cst-black-soft:#0B0D0E;
  --cst-charcoal:#111416;
  --cst-card:#15181A;          /* same value as existing --cst-ink */
  --cst-card-hover:#1B1F21;
  --cst-border:rgba(255,255,255,.22);
  --cst-border-soft:rgba(255,255,255,.12);
  --cst-white:#FFFFFF;
  --cst-gray:#A7ABAD;
  --cst-gray-dark:#676D70;
  --cst-turquoise-light:#78CECA;
  --cst-warning:#F2C94C;
  --cst-error:#E45454;
  --cst-radius-sharp:2px;

  /* Brief-literal aliases so spec CSS pasted verbatim still resolves —
     single source of truth stays the --cst-* values above */
  --community-black:var(--cst-black);
  --community-black-soft:var(--cst-black-soft);
  --community-charcoal:var(--cst-charcoal);
  --community-card:var(--cst-card);
  --community-card-hover:var(--cst-card-hover);
  --community-border:var(--cst-border);
  --community-border-soft:var(--cst-border-soft);
  --community-white:var(--cst-white);
  --community-off-white:var(--cst-concrete);
  --community-gray:var(--cst-gray);
  --community-gray-dark:var(--cst-gray-dark);
  --community-turquoise:var(--cst-teal);
  --community-turquoise-dark:var(--cst-teal-dark);
  --community-turquoise-light:var(--cst-turquoise-light);
  --community-warning:var(--cst-warning);
  --community-error:var(--cst-error);
}

/* Base editorial button/card primitives — sharp corners, per this brief */
.csc-btn{
  display:inline-flex;align-items:center;gap:.5em;
  padding:.85em 1.6em;
  font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  border-radius:var(--cst-radius-sharp);
  border:1px solid transparent;
  transition:background-color var(--csc-duration-hover,200ms) var(--csc-ease-out,ease),
             border-color var(--csc-duration-hover,200ms) var(--csc-ease-out,ease),
             transform var(--csc-duration-hover,200ms) var(--csc-ease-out,ease);
  text-decoration:none;
}
.csc-btn-primary{background:var(--cst-teal);color:var(--cst-black);}
.csc-btn-primary:hover{background:var(--cst-turquoise-light);}
.csc-btn-secondary{background:transparent;color:var(--cst-white);border-color:var(--cst-border);}
.csc-btn-secondary:hover{border-color:var(--cst-white);}
.csc-btn:focus-visible{outline:2px solid var(--cst-teal);outline-offset:2px;}

.csc-card{
  background:var(--cst-card);
  border:1px solid var(--cst-border-soft);
  border-radius:var(--cst-radius-sharp);
}
.csc-card:hover{background:var(--cst-card-hover);}

.csc-label-vertical{
  writing-mode:vertical-rl;
  text-transform:uppercase;
  font-size:11px;font-weight:700;letter-spacing:.12em;
  color:var(--cst-gray);
}

@media (prefers-reduced-motion: reduce){
  .csc-btn,.csc-card{transition:none;}
}

/* Self-hosted display face for this redesign only (Phase 1, 2026-07-24).
   Barlow Condensed, OFL-licensed via Google Fonts, latin subset (covers
   Spanish diacritics), weights 700/800/900 -- headings only. Body stays
   Montserrat (locked, D-005) -- not replacing it site-wide. */
@font-face{
  font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/barlow-condensed-700.woff2') format('woff2');
}
@font-face{
  font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;
  src:url('../fonts/barlow-condensed-800.woff2') format('woff2');
}
@font-face{
  font-family:'Barlow Condensed';font-style:normal;font-weight:900;font-display:swap;
  src:url('../fonts/barlow-condensed-900.woff2') format('woff2');
}
:root{
  --cst-font-display:'Barlow Condensed','Arial Narrow',sans-serif;
}
.csc-display-xl{
  font-family:var(--cst-font-display);font-weight:900;text-transform:uppercase;
  line-height:.86;letter-spacing:-.03em;font-size:clamp(72px,8vw,150px);color:var(--cst-white);
}
.csc-display-lg{
  font-family:var(--cst-font-display);font-weight:800;text-transform:uppercase;
  line-height:.9;letter-spacing:-.02em;font-size:clamp(2.25rem,5.5vw,4.5rem);color:var(--cst-white);
}
.csc-heading{
  font-family:var(--cst-font-display);font-weight:800;text-transform:uppercase;
  line-height:.92;font-size:clamp(1.6rem,3.2vw,2.6rem);color:var(--cst-white);
}
.csc-label-technical{
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--cst-gray);
}
@media (max-width:600px){
  .csc-display-xl{font-size:clamp(54px,17vw,82px);line-height:.84;}
}

/* Phase 2 (2026-07-24): global-shell mobile menu restyle. Flatsome's native
   #main-menu.mobile-sidebar inherited light-theme text (dark gray, meant for
   a white panel) which is unreadable now that html/footer share the new
   black token. Give it its own explicit dark background + editorial link
   style rather than relying on inheritance. */
#main-menu.mobile-sidebar{
  background:var(--cst-black-soft);
  color:var(--cst-white);
}
#main-menu.mobile-sidebar .widget-title{
  color:var(--cst-gray);
  font-family:var(--cst-font-display,inherit);
  text-transform:uppercase;
  letter-spacing:.08em;
}
#main-menu.mobile-sidebar a{
  color:var(--cst-white);
  text-transform:uppercase;
  font-weight:600;
  transition:color .2s ease;
}
#main-menu.mobile-sidebar a:hover,
#main-menu.mobile-sidebar a:focus-visible{
  color:var(--cst-teal);
}
#main-menu.mobile-sidebar .is-divider{
  border-color:var(--cst-border-soft);
}

@media (prefers-reduced-motion: reduce){
  #main-menu.mobile-sidebar a{transition:none;}
}