/*
Theme Name: Mu Surf
Theme URI: https://musurf.com
Description: Mu Surf store theme. A child of Twenty Twenty-Five. All design
  tokens live in theme.json; this file exists because WordPress requires it and
  holds only what theme.json cannot express.
Author: Mu Surf
Template: twentytwentyfive
Version: 0.1.0
Requires at least: 6.6
Tested up to: 6.8
License: GPL-2.0-or-later
Text Domain: musurf
*/

/* ---------------------------------------------------------------------------
   Everything below is a rule theme.json has no field for.
   Tokens are never redefined here - they are read from var(--wp--...).
   --------------------------------------------------------------------------- */

/* Chinese line-breaking and body rhythm.
   Chinese body steps DOWN to 16px against Latin 17px so the two sit at the
   same optical weight, and takes a looser line-height and 0.02em tracking. */
:lang(zh-Hant) {
  font-size: 1rem;
  line-height: 1.75;
  letter-spacing: 0.02em;
  line-break: strict;
  text-align: left;
}

:lang(zh-Hant) h1,
:lang(zh-Hant) h2,
:lang(zh-Hant) h3,
:lang(zh-Hant) h4 {
  line-height: 1.35;
  letter-spacing: 0.02em;
}

/* Never justified, never italic, never uppercase on a bilingual string. */
:lang(zh-Hant) * {
  font-style: normal;
  text-transform: none;
}

/* Measure. 60-75 characters Latin, 28-36 Chinese. */
.wp-block-post-content p { max-width: 68ch; }
:lang(zh-Hant) .wp-block-post-content p { max-width: 32em; }

/* The nav gap is a token that changes with the language, not a fixed value.
   NEVER justify-content: space-between - it holds the width in both languages
   but the spacing stops meaning anything. */
.wp-block-navigation { gap: 2.25rem; }
:lang(zh-Hant) .wp-block-navigation { gap: 3.5rem; }

/* Radius splits. Tiles, blocks, cards and inputs 8px; controls full pill. */
.wp-block-button__link,
.wp-block-search__button,
.wc-block-components-button,
.wp-block-tag-cloud a,
.wc-block-components-chip {
  border-radius: 999px;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
select,
textarea {
  border-radius: 8px; /* square-ish on purpose: a pill input reads as a button */
}

/* Ember, in three forms by loudness. What governs it is the chroma gap, not
   scarcity: Ember is the only colour in the palette above ~chroma 35 (nav set
   1.5-5.5, story grounds 19-32, Ember 58), so nothing competes with it.
   It marks a decision or an announcement - never a category, never decoration.
   Only the solid fill is capped, at one per page. */

/* 1. Solid fill - the loudest. One per page. */
.mu-ember-fill {
  background-color: var(--wp--preset--color--ember);
  color: var(--wp--preset--color--salt);
  background-image: none;
  border: 0;
  box-shadow: none;
}

/* 2. CTA - uncapped. A page with four is a page with four things to do. */
.mu-ember-cta {
  background-color: var(--wp--preset--color--ember);
  color: var(--wp--preset--color--salt);
  border-radius: var(--wp--custom--radius--pill);
  font-weight: 700;
}

.mu-ember-cta:hover,
.mu-ember-cta:focus-visible {
  background-color: var(--wp--preset--color--deep);
  color: var(--wp--preset--color--salt);
}

/* 3. Inline mark - uncapped. Weight comes with the colour so the emphasis
   survives greyscale and colour-blindness rather than resting on hue alone.
   Ember on Salt only, Sand on the story grounds only - the class switches it,
   nobody picks by eye. Sand is a text highlight and never a block or a fill. */
.mu-mark {
  color: var(--wp--preset--color--ember);
  font-weight: 700;
}

.mu-on-story .mu-mark {
  color: var(--wp--preset--color--sand);
}

/* Inside a story, the CTA is Sky. Ember is invisible on the story grounds
   (1.17-1.90) and a story page carries its own call to action, so it needs a
   fill of its own. Sky separates from all five grounds by lightness, which they
   share, rather than by hue, which the three blue grounds fight - that is why
   the old saturated Dusk could not do this job.
   Warm accent marks text, cool accent is the button. Never the other way. */
.mu-on-story .mu-ember-cta,
.mu-sky-cta {
  background-color: var(--wp--preset--color--sky);
  color: var(--wp--preset--color--deep);
  border-radius: var(--wp--custom--radius--pill);
  font-weight: 700;
}

.mu-on-story .mu-ember-cta:hover,
.mu-on-story .mu-ember-cta:focus-visible,
.mu-sky-cta:hover,
.mu-sky-cta:focus-visible {
  background-color: var(--wp--preset--color--salt);
  color: var(--wp--preset--color--deep);
}

/* Sky is a button fill and nothing else. It is never a ground, never a block,
   never text. And it never appears on Salt: it sits dE 9.8 from Haze, the
   Workshops colour, so the two must not be allowed to meet. */

/* Flat blocks. A chapter mark, never a product, never empty, never a gradient. */
.mu-block {
  border-radius: 8px;
  border: 0;
  box-shadow: none;
  background-image: none;
}

/* Product cards have no border and no card fill - the studio backdrop is Salt,
   the page ground, so the product floats with no visible edge. */
.wc-block-grid__product,
.wp-block-woocommerce-product-template li {
  background: none;
  border: 0;
  box-shadow: none;
}