/* ==========================================================================
   Craftaine design tokens v1.0  ·  29 Oct 2026
   Source of truth for the website. If this file and a PDF disagree, this file wins.
   Use: upload this folder to your child theme (e.g. /wp-content/themes/craftaine-child/assets/),
   then enqueue craftaine-tokens.css, or paste everything below the @font-face rules into
   Appearance > Customize > Additional CSS and host the fonts separately.
   ========================================================================== */

/* ---------- Fonts: self-hosted, SIL Open Font License 1.1 (licences in /fonts) ---------- */
@font-face {
  font-family: 'Libre Caslon Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/libre-caslon-display-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Libre Caslon Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/libre-caslon-display-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/libre-caslon-text-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/libre-caslon-text-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/libre-caslon-text-latin-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/libre-caslon-text-latin-ext-400-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/libre-caslon-text-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/libre-caslon-text-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./fonts/jost-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./fonts/jost-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('./fonts/jost-latin-wght-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('./fonts/jost-latin-ext-wght-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ---------- Colour: brand ---------- */
  --c-indigo: #16293F;   /* logo ink, header, primary buttons, text on light */
  --c-bone:   #EFEAE0;   /* page ground, text on dark */
  --c-night:  #0E1114;   /* campaign ground, footer option */
  --c-mist:   #B9C2CE;   /* dividers on dark, disabled fills. Never text on Bone (1.50:1) */
  --c-brass:  #A8823C;   /* accent shapes only, about 5 % of a view. Not text on Bone (2.96:1) */
  --c-white:  #FFFFFF;   /* product image ground, forms, email */

  /* ---------- Colour: interface (tested on Bone, WCAG 2.1) ---------- */
  --c-text:        var(--c-indigo);  /* 12.31:1 on Bone */
  --c-text-muted:  #55616F;          /* Slate. 5.27:1 on Bone. Secondary text, input borders (needs 3:1) */
  --c-line:        #D8D1C4;          /* decorative rules only, 1.27:1, never the only cue */
  --c-error:       #8E3124;          /* 6.70:1 on Bone */
  --c-success:     #3E5C43;          /* 6.22:1 on Bone */
  --c-brass-text:  #7A5D28;          /* when brass must be text on Bone: 5.12:1 */
  --c-text-on-dark:       var(--c-bone);  /* 12.31:1 on Indigo, 15.79:1 on Night */
  --c-text-muted-on-dark: #8E99A8;        /* 5.11:1 on Indigo */
  --c-focus:        var(--c-indigo);   /* focus ring on light grounds */
  --c-focus-on-dark: var(--c-bone);    /* focus ring on Indigo or Night */

  /* ---------- Type families ---------- */
  --f-display: 'Libre Caslon Display', 'Libre Caslon Text', Georgia, serif;  /* feeling: headlines, never bold */
  --f-text:    'Libre Caslon Text', Georgia, 'Times New Roman', serif;      /* body, product copy */
  --f-sans:    'Jost', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;  /* fact: nav, buttons, prices, sizes */
  /* Jost and Libre Caslon Text have no ₦ glyph and no Yoruba underdots (ẹ ị ọ).
     The browser draws those characters from the next font in the stack. */

  /* ---------- Type scale (desktop value, fluid down to the mobile value) ---------- */
  --t-display: clamp(2.75rem, 1.6rem + 3.6vw, 4.5rem);   /* 44 to 72 px, line 1.05, tracking -0.01em */
  --t-h1:      clamp(2rem, 1.6rem + 1.25vw, 2.625rem);   /* 32 to 42 px, line 1.12 */
  --t-h2:      clamp(1.5rem, 1.25rem + 0.7vw, 1.875rem);  /* 24 to 30 px, line 1.20 */
  --t-lede:    clamp(1.1875rem, 1.1rem + 0.3vw, 1.3125rem); /* 19 to 21 px, Caslon Text italic, line 1.55 */
  --t-body:    clamp(1rem, 0.97rem + 0.1vw, 1.0625rem);  /* 16 to 17 px, line 1.65. Floor 15 px */
  --t-small:   0.875rem;   /* 14 px, line 1.60: captions, footnotes */
  --t-label:   0.6875rem;  /* 11 px Jost Medium caps, tracking 0.24em: nav, eyebrows */
  --t-button:  0.75rem;    /* 12 px Jost Medium caps, tracking 0.24em */
  --t-data:    0.8125rem;  /* 13 px Jost Regular, tracking 0.04em: prices, sizes, SKU */
  --lh-display: 1.05; --lh-h1: 1.12; --lh-h2: 1.20; --lh-lede: 1.55; --lh-body: 1.65; --lh-small: 1.60; --lh-label: 1.40;
  --track-label: 0.24em; --track-data: 0.04em; --track-display: -0.01em;
  --measure: 68ch;

  /* ---------- Space (4 px base) ---------- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* ---------- Layout ---------- */
  --container: 1320px;
  --gutter: 16px;            /* 24 px from 600, 40 px from 1200 (see media queries below) */
  --header-h: 64px;          /* 80 px from 900 */
  --wordmark-w: 168px;       /* header wordmark; 220 px from 900. Never under 140 px */
  --grid-gap: 16px;          /* product grid; 24 px from 900 */
  /* Breakpoints (CSS variables cannot drive media queries, so these are for reference):
     sm 600px · md 900px · lg 1200px · xl 1440px */

  /* ---------- Shape, lines, motion ---------- */
  --radius-0: 0;             /* buttons, cards, images, chips */
  --radius-1: 2px;           /* inputs, tags */
  --border: 1px solid var(--c-text-muted);
  --rule: 1px solid var(--c-line);
  --tap: 44px;               /* minimum touch target */
  --field-h: 48px;           /* inputs, selects, buttons */
  --ratio-product: 4 / 5;    /* every product image */
  --ease: cubic-bezier(.2,0,0,1);
  --dur-1: 120ms; --dur-2: 240ms;
}

@media (min-width: 600px)  { :root { --gutter: 24px; } }
@media (min-width: 900px)  { :root { --header-h: 80px; --wordmark-w: 220px; --grid-gap: 24px; } }
@media (min-width: 1200px) { :root { --gutter: 40px; } }
@media (prefers-reduced-motion: reduce) { :root { --dur-1: 0ms; --dur-2: 0ms; } }

/* ==========================================================================
   Base layer: light-touch defaults. Delete anything your theme already does well.
   ========================================================================== */
body { background: var(--c-bone); color: var(--c-text); font-family: var(--f-text);
  font-size: var(--t-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, .c-display { font-family: var(--f-display); font-weight: 400; color: var(--c-text); }
h1 { font-size: var(--t-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--t-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--t-lede); line-height: var(--lh-h2); }
.c-display { font-size: var(--t-display); line-height: var(--lh-display); letter-spacing: var(--track-display); }
.c-lede { font-family: var(--f-text); font-style: italic; font-size: var(--t-lede); line-height: var(--lh-lede); }
.c-label { font-family: var(--f-sans); font-weight: 500; font-size: var(--t-label); line-height: var(--lh-label);
  letter-spacing: var(--track-label); text-transform: uppercase; }
.c-data { font-family: var(--f-sans); font-weight: 400; font-size: var(--t-data); letter-spacing: var(--track-data);
  font-variant-numeric: lining-nums tabular-nums; }
p, li { max-width: var(--measure); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.is-dark :focus-visible, .site-footer :focus-visible { outline-color: var(--c-focus-on-dark); }
img { max-width: 100%; height: auto; }

/* Buttons: one primary per view */
.c-button, .button, button.button, .wp-element-button,
.woocommerce a.button, .woocommerce button.button, .woocommerce .single_add_to_cart_button {
  min-height: var(--field-h); padding: 0 var(--s-6); border: 1px solid var(--c-indigo); border-radius: var(--radius-0);
  background: var(--c-indigo); color: var(--c-bone); font-family: var(--f-sans); font-weight: 500;
  font-size: var(--t-button); letter-spacing: var(--track-label); text-transform: uppercase;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.c-button:hover, .button:hover, .woocommerce .single_add_to_cart_button:hover { background: var(--c-night); border-color: var(--c-night); }
.c-button--secondary { background: transparent; color: var(--c-indigo); }
.c-button--secondary:hover { background: var(--c-indigo); color: var(--c-bone); }
.button:disabled, .button.disabled { background: var(--c-mist); border-color: var(--c-mist); color: var(--c-indigo); cursor: not-allowed; }

/* Forms: 1 px Slate border meets the 3:1 non-text contrast rule */
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="search"],
input[type="number"], select, textarea {
  min-height: var(--field-h); padding: 0 var(--s-4); border: var(--border); border-radius: var(--radius-1);
  background: var(--c-white); color: var(--c-text); font-family: var(--f-sans); font-size: 16px; }
textarea { padding: var(--s-3) var(--s-4); }
label { font-family: var(--f-sans); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
.woocommerce-error, .woocommerce-invalid input { border-color: var(--c-error); }

/* WooCommerce: product grid, images, prices */
.woocommerce ul.products li.product img, .wc-block-components-product-image img {
  aspect-ratio: var(--ratio-product); object-fit: cover; background: var(--c-white); border-radius: var(--radius-0); }
.woocommerce ul.products li.product .woocommerce-loop-product__title, .wc-block-components-product-name {
  font-family: var(--f-text); font-size: 15px; line-height: 1.4; font-weight: 400; color: var(--c-text); }
.price, .woocommerce-Price-amount, .wc-block-components-product-price {
  font-family: var(--f-sans); font-size: 14px; letter-spacing: var(--track-data); color: var(--c-text);
  font-variant-numeric: lining-nums tabular-nums; }
.onsale, .wc-block-components-product-sale-badge { background: var(--c-indigo); color: var(--c-bone); border-radius: var(--radius-0);
  font-family: var(--f-sans); font-weight: 500; font-size: var(--t-label); letter-spacing: var(--track-label); text-transform: uppercase; }

/* Size chips (variation swatches): square, 44 px minimum */
.c-size { min-width: var(--tap); min-height: var(--tap); border: var(--border); border-radius: var(--radius-0);
  background: transparent; font-family: var(--f-sans); font-size: var(--t-data); letter-spacing: var(--track-data); }
.c-size[aria-pressed="true"], .c-size.is-selected { background: var(--c-indigo); color: var(--c-bone); border-color: var(--c-indigo); }
.c-size[disabled] { color: var(--c-text-muted); text-decoration: line-through; }

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