/* ==========================================================================
   Light Craze — design tokens and base components
   Implements 09-design-system.md. Theme-agnostic: enqueue after the theme's
   own stylesheet.

   Seven locked colours. Never add an eighth (LCB-01).
   Never use a Naqshira colour (LCB-02).
   ========================================================================== */

:root{
  /* ---- ground and structure ---- */
  --lc-ground:  #15120F;
  --lc-surface: #211C17;
  --lc-line:    #3A322A;

  /* ---- accents ---- */
  --lc-volt:    #B4FF2E;   /* hero: CTA, price, links, in-stock. 15.36:1 — text-safe */
  --lc-ember:   #C82A16;   /* urgency: sale, low stock, errors. 3.38:1 — FILL ONLY */

  /* ---- text ---- */
  --lc-bone:    #F7F2E9;   /* body            16.74:1 */
  --lc-smoke:   #A2968A;   /* secondary        6.46:1 */

  /* ---- glow: the accent at opacity, never a new colour (LCB-08) ---- */
  --lc-glow-volt:  0 0 24px 0 rgb(180 255 46 / .35);
  --lc-glow-ember: 0 0 24px 0 rgb(200 42 22 / .35);

  /* ---- spacing, 4px base ---- */
  --lc-1: 4px;  --lc-2: 8px;  --lc-3: 12px; --lc-4: 16px;
  --lc-5: 24px; --lc-6: 32px; --lc-7: 48px; --lc-8: 64px;

  --lc-radius: 10px;   /* deliberately larger than Naqshira's 6px — SEP-12 */
  --lc-radius-sm: 4px;

  --lc-font-display: "Archivo", "Oswald", system-ui, sans-serif;   /* heavy condensed */
  --lc-font-body:    "Inter", system-ui, -apple-system, sans-serif;
  /* NO monospace anywhere — that is Naqshira's engineering voice */
}

/* Dark only. One theme, executed well. */
:root{ color-scheme: dark; }

body{
  background: var(--lc-ground);
  color: var(--lc-bone);
  font-family: var(--lc-font-body);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */
h1,h2,h3,.lc-display{
  font-family: var(--lc-font-display);
  letter-spacing: -.02em;
  line-height: 1.15;
  text-wrap: balance;
}
.lc-display{ font-size: clamp(2rem, 6vw, 3.25rem); font-weight: 800; }
h1{ font-size: clamp(1.6rem, 4vw, 2.25rem); font-weight: 700; }
h2{ font-size: 1.35rem; font-weight: 700; }
h3{ font-size: 1.1rem;  font-weight: 600; }
small,.lc-caption{ font-size: .875rem; color: var(--lc-smoke); }

/* LC-04 / LCB-04 : Volt passes for text at 15.36:1, so links can simply be Volt.
   (Naqshira cannot do this — its hero fails contrast and needs Pearl + underline.) */
a{ color: var(--lc-volt); text-underline-offset: .16em; }

.lc-price{
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--lc-volt);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.lc-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height: 48px;                       /* LC-65 */
  padding: 0 var(--lc-5);
  border-radius: var(--lc-radius-sm);
  border: 1px solid transparent;
  font-weight: 700; cursor: pointer;
  transition: box-shadow .18s ease, transform .18s ease;
}
.lc-btn--primary{ background: var(--lc-volt); color: var(--lc-ground); }
.lc-btn--primary:hover{ box-shadow: var(--lc-glow-volt); }
.lc-btn--secondary{ background: transparent; color: var(--lc-bone); border-color: var(--lc-line); }

/* LC-62 : visible focus on everything interactive */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline: 2px solid var(--lc-volt);
  outline-offset: 3px;
  border-radius: var(--lc-radius-sm);
}

/* --------------------------------------------------------------------------
   Cards and badges
   -------------------------------------------------------------------------- */
.lc-card,
.woocommerce ul.products li.product{
  background: var(--lc-surface);
  border: 1px solid var(--lc-line);
  border-radius: var(--lc-radius);
}

.lc-badge{
  display:inline-block;
  font-size:.7rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  padding: var(--lc-1) var(--lc-2);
  border-radius: var(--lc-radius-sm);
}
/* Ember is a FILL, never text on ground (LCB-03). Bone on Ember = 4.96:1. */
.lc-badge--sale{ background: var(--lc-ember); color: var(--lc-bone); }
.lc-badge--stock{ background: transparent; color: var(--lc-volt); }
.lc-badge--lights-up{ background: transparent; color: var(--lc-volt); border:1px solid var(--lc-volt); }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
input, select, textarea{
  background: var(--lc-surface);
  border: 1px solid var(--lc-line);
  color: var(--lc-bone);
  border-radius: var(--lc-radius-sm);
  min-height: 48px;
  padding: 0 var(--lc-3);
}
input::placeholder, textarea::placeholder{ color: var(--lc-smoke); }

/* LC-102 : colour is never the only carrier of meaning — always pair with text */
.lc-error{ color: var(--lc-bone); background: var(--lc-ember); padding: var(--lc-3); border-radius: var(--lc-radius-sm); }

/* --------------------------------------------------------------------------
   Product imagery — glow behind, never on top (09-design-system.md)
   -------------------------------------------------------------------------- */
.lc-product-media{ position: relative; border-radius: var(--lc-radius); overflow: hidden; }
.lc-product-media--lit{ box-shadow: var(--lc-glow-volt); }

/* LC-96 : box-shadow, not filter:blur() over large areas — blur destroys
   scroll performance on mid-range Android. */

/* --------------------------------------------------------------------------
   Motion — LC-100 / LC-66
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Kadence palette remap

   Kadence ships a LIGHT palette — palette1 #2B6CB0 (blue), palette3 #1A202C
   (near-black headings), palette9 #ffffff (page/inputs). On our dark ground that
   produced invisible headings, a blue button and a white search field.

   Remapping the theme's own variables fixes headings, buttons, inputs, borders and
   tables in one place. Patching each component instead means chasing the theme
   forever and missing whatever is not on screen today.

   Kadence's semantics, in its own order:
     1,2  accent / accent-hover      6    muted text
     3    headings                   7    hairlines and light fills
     4    body text                  8    subtle background
     5    secondary text             9    page background (lightest)
   ========================================================================== */
:root{
  --global-palette1: var(--lc-volt);
  --global-palette2: var(--lc-volt);
  --global-palette3: var(--lc-bone);      /* headings — was #1A202C */
  --global-palette4: var(--lc-bone);      /* body */
  --global-palette5: var(--lc-smoke);
  --global-palette6: var(--lc-smoke);
  --global-palette7: var(--lc-line);      /* borders, table rules */
  --global-palette8: var(--lc-surface);
  --global-palette9: var(--lc-ground);    /* page + input grounds — was #ffffff */
  --global-palette9rgb: 21, 18, 15;       /* --lc-ground, for Kadence's rgba() overlays */

  /* Buttons: Volt fill with GROUND text. Kadence defaults button text to palette9,
     which now resolves to Ground — correct on a Volt fill, and 15.36:1. */
  --global-palette-btn:            var(--lc-ground);
  --global-palette-btn-hover:      var(--lc-ground);
  --global-palette-btn-bg:         var(--lc-volt);
  --global-palette-btn-bg-hover:   var(--lc-volt);

  --global-palette-btn-sec:        var(--lc-bone);
  --global-palette-btn-sec-hover:  var(--lc-ground);
  --global-palette-btn-sec-bg:     transparent;
  --global-palette-btn-sec-bg-hover: var(--lc-volt);

  --global-palette-highlight:      var(--lc-volt);
  --global-palette-highlight-alt:  var(--lc-volt);
  --global-palette-highlight-alt2: var(--lc-ground);

  --global-heading-font-family: var(--lc-font-display);
  --global-body-font-family:    var(--lc-font-body);
}

/* Headings had no colour of their own, so they inherited the theme's. State it. */
h1, h2, h3, h4, h5, h6, .lc-display,
.site-title, .entry-title, .wp-block-heading{
  color: var(--lc-bone);
}

/* Inputs: Kadence styles these with enough specificity to beat the bare element
   selector further up this file, so match its shape rather than reach for !important. */
input[type="text"], input[type="email"], input[type="url"], input[type="password"],
input[type="search"], input[type="number"], input[type="tel"], input[type="date"],
select, textarea{
  background: var(--lc-surface);
  border: 1px solid var(--lc-line);
  color: var(--lc-bone);
}
input::placeholder, textarea::placeholder{ color: var(--lc-smoke); opacity: 1; }