/* ==========================================================================
   TORIDORI Storefront Child — design tokens
   --------------------------------------------------------------------------
   THE ONLY FILE YOU NEED FOR: colours, spacing, radius, fonts, column counts.
   Every other stylesheet reads these variables and defines no raw values.

   Colour names follow design/hero/DESIGN_PRINCIPLES.md:
     --tds-primary  = every CTA. Never introduce a second CTA colour.
     --tds-urgency  = sale / countdown / stock warning ONLY.
   ========================================================================== */

:root {
	/* --- Brand colours ------------------------------------------------- */
	--tds-primary:      #1c61e7;
	--tds-primary-ink:  #1550c8;
	--tds-urgency:      #e4483b;
	--tds-preorder:     #f5a623;

	/* --- Neutrals ------------------------------------------------------ */
	--tds-ink:          #1c2436;  /* headings */
	--tds-body:         #3a3f4b;  /* body text */
	--tds-muted:        #6b7280;  /* captions, meta */
	--tds-surface:      #f7f8fb;  /* panels, image backgrounds */
	--tds-surface-alt:  #eef1f7;
	--tds-line:         #e7e9f0;  /* borders */
	--tds-white:        #ffffff;

	/* --- Typography ---------------------------------------------------- */
	--tds-font: "Noto Sans JP", "Helvetica Neue", Arial,
	            "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

	--tds-fs-xs:   0.6875rem;  /* 11px  badges */
	--tds-fs-sm:   0.75rem;    /* 12px  meta lines */
	--tds-fs-base: 0.875rem;   /* 14px  card titles */
	--tds-fs-md:   1rem;       /* 16px  body */
	--tds-fs-lg:   1.25rem;    /* 20px  section titles */
	--tds-fs-xl:   1.75rem;    /* 28px  hero headline */

	--tds-lh-tight: 1.3;
	--tds-lh-body:  1.55;

	/* --- Spacing scale ------------------------------------------------- */
	--tds-space-1: 4px;
	--tds-space-2: 8px;
	--tds-space-3: 12px;
	--tds-space-4: 16px;
	--tds-space-5: 24px;
	--tds-space-6: 32px;
	--tds-space-7: 48px;

	/* Vertical rhythm between homepage sections. */
	--tds-section-gap: var(--tds-space-7);

	/* --- Shape --------------------------------------------------------- */
	--tds-radius-sm: 6px;
	--tds-radius:    12px;
	--tds-radius-lg: 18px;
	--tds-radius-pill: 999px;

	--tds-shadow:    0 1px 4px rgba(20, 20, 40, 0.06);
	--tds-shadow-lg: 0 8px 24px rgba(20, 20, 40, 0.13);

	/* --- Layout shell ---------------------------------------------------
	   ONE width for the whole page. Storefront's .col-full (which wraps the
	   header and the page content) and our own .tds-container (announcement
	   bar, category bar, homepage sections) both read these, which is what
	   keeps their left and right edges on the same line.

	   --tds-shell is the OUTER width, padding included, because both boxes
	   are forced to border-box in base.css. 71.7347858333em is exactly
	   Storefront 4.6.2's own geometry (66.4989378333em of content plus its
	   2.617924em gutters), so pages that do not opt into the wide shell look
	   precisely as they did before.

	   Catalogue screens get --tds-shell-wide instead, via the tds-wide body
	   class added in inc/layout.php. Blog posts, ordinary pages, checkout and
	   my-account deliberately stay at Storefront's width.

	   REM, NOT EM. Storefront writes these as em, which is safe for .col-full
	   because it inherits the body font size. Our containers do not: the
	   announcement bar sets 12px text, and 71.73em there resolved to 861px --
	   the bar came out 287px narrower than the header. rem is measured from the
	   root, so it still respects a reader's larger default text size while
	   giving every container the same answer.
	   ------------------------------------------------------------------- */
	--tds-shell:       71.7347858333rem; /* ~1148px outer, ~1064px content */
	--tds-shell-wide:  87.5rem;          /* 1400px outer, ~1316px content */
	--tds-shell-pad:   2.617924rem;      /* Storefront's gutter, matched */

	/* Left gutter reserved for Storefront's search glyph in the header. */
	--tds-search-gutter:  44px;

	/* --- Product grid columns ------------------------------------------
	   Change these three numbers to re-flow every product grid on the site
	   (shop, category archive, homepage rows). Nothing else needs editing.
	   ------------------------------------------------------------------- */
	--tds-cols-desktop: 5;   /* >= 1400px */
	--tds-cols-laptop:  4;   /* 1024–1399px */
	--tds-cols-tablet:  3;   /* 768–1023px */
	--tds-cols-mobile:  2;   /* < 768px */

	--tds-card-gap: var(--tds-space-4);

	/* Product images are always square. 'contain' never crops a figure;
	   switch to 'cover' if you prefer edge-to-edge photos. */
	--tds-card-image-fit: contain;
	--tds-card-image-bg:  var(--tds-surface);

	/* Product titles clamp to this many lines. */
	--tds-card-title-lines: 2;

	/* --- Category tiles ------------------------------------------------ */
	--tds-cat-size:        150px;
	--tds-cat-size-mobile: 112px;
}

/* Storefront narrows its gutter on small phones; match it so the shell keeps
   the same edges there too. */
@media (max-width: 568px) {
	:root {
		--tds-shell-pad: 1.41575rem;
	}
}

/* Catalogue screens only -- see toridori_layout_body_class() in inc/layout.php. */
body.tds-theme.tds-wide {
	--tds-shell: var(--tds-shell-wide);
}

/* Storefront's own button colours come from the Customizer and also apply to
   checkout. We only align OUR buttons to the brand colour — see base.css. */