@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=DM+Serif+Display:ital@0;1&family=Cormorant+Garamond:wght@300;400;500&family=Noto+Sans+JP:wght@300;400;500&family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Inter+Tight:wght@300;400;500;600&family=Zen+Old+Mincho:wght@400;500&display=swap");

/* tokens/fonts.css */
/* MASURU webfonts.
   No bespoke font binaries were supplied, so every family here is served from the Google Fonts CDN.
   The pairing was chosen from the coming-soon page's type panel and saved into the tokens:
   EB Garamond for site headlines, Inter Tight for UI and labels, Zen Old Mincho for the Japanese
   companion lines. DM Serif Display and DM Sans stay loaded — earlier components reference them
   through --font-serif-display — as does Noto Sans JP as a JP fallback.
   If MASURU licenses bespoke cuts, drop the .woff2 files into assets/fonts/ and replace this
   @import with local @font-face rules. */

/* tokens/colors.css */
:root{
/* ─── Terracotta · the single action accent ─── */
--color-primary:#CF8C73;
--color-primary-pressed:#B87333;
--color-primary-disabled:#EDD4C5;
--color-primary-on-dark:#E8B09A;
--color-on-primary:#FAF8F5;
/* ─── Sage · passive accent, links, focus ─── */
--color-sage:#4D6D5F;
--color-sage-pressed:#3D5A4D;
--color-sage-soft:#D0DDD9;
/* ─── Ink & text ─── */
--color-ink:#2C2927;
--color-body:#3D3A36;
--color-muted:#6B6460;
--color-muted-soft:#9A9390;
--color-on-dark:#FAF8F5;
--color-on-dark-muted:rgba(250,248,245,.65);
/* ─── Hairlines ─── */
--color-hairline:#DDD9D4;
--color-hairline-soft:#E8E4DF;
--color-hairline-strong:#C4BEB9;
/* ─── Surfaces ─── */
--color-canvas:#FAF8F5;
--color-surface:#F2EFE9;
--color-surface-soft:#F7F4F0;
--color-surface-strong:#EDE9E3;
--color-surface-dark:#2C2927;
--color-surface-dark-mid:#3A3632;
--color-surface-dark-soft:#302D2A;
/* ─── Card tints ─── */
--color-tint-linen:#F5EFE4;
--color-tint-sage:#E0EAE6;
--color-tint-terracotta:#F5E5DC;
--color-tint-copper:#EDE0D0;
--color-tint-stone:#EDEAE5;
--color-tint-charcoal:#E8E5E1;
/* ─── Semantic ─── */
--color-error:#C13515;
--color-error-hover:#A32D0F;
--color-success:#2A6B45;
--color-warning:#9B6A2A;
--color-focus-ring:#4D6D5F;
--color-scrim:#2C2927;

/* ─── masuru.co.uk surfaces · sampled from the brand's own site design ───
   The live site runs light-on-light in a warm greige family, with ONE dark band.
   These sit alongside the written pack's neutral surfaces rather than replacing them —
   see readme.md › "Where the pack and the site diverge". */
--color-site-cream:#E7DED5;
--color-site-linen:#E3D9CF;
--color-site-card:#EDE6DE;
--color-site-taupe:#D2C4B5;
--color-site-sand:#C6B6A4;
--color-site-sand-deep:#A89783;
--color-site-band:#484134;
--color-site-band-rule:rgba(251,248,243,.18);
--color-site-band-soft:#3E382E;
--color-site-ink:#332C22;
--color-site-body:#4A4235;
--color-site-muted:#6E6455;
--color-site-hairline:#C9BCAD;
--color-site-hairline-soft:#D8CDC1;
--color-site-on-band:#FBF8F3;
--color-site-on-band-muted:rgba(251,248,243,.72);

/* ─── Semantic aliases · prefer these in product code ─── */
--text-heading:var(--color-ink);
--text-body:var(--color-body);
--text-muted:var(--color-muted);
--text-placeholder:var(--color-muted-soft);
--text-disabled:var(--color-muted-soft);
--text-on-dark:var(--color-on-dark);
--text-on-dark-muted:var(--color-on-dark-muted);
--text-link:var(--color-sage);
--text-link-on-dark:var(--color-primary-on-dark);

--surface-page:var(--color-canvas);
--surface-card:var(--color-canvas);
--surface-raised:var(--color-surface);
--surface-inset:var(--color-surface-strong);
--surface-tile-light:var(--color-canvas);
--surface-tile-warm:var(--color-surface);
--surface-tile-dark:var(--color-surface-dark);
--surface-tile-dark-mid:var(--color-surface-dark-mid);
--surface-tile-dark-soft:var(--color-surface-dark-soft);

--border-default:var(--color-hairline);
--border-soft:var(--color-hairline-soft);
--border-strong:var(--color-hairline-strong);
--border-focus:var(--color-focus-ring);
--border-selected:var(--color-sage);

--action-primary:var(--color-primary);
--action-primary-pressed:var(--color-primary-pressed);
--action-primary-disabled:var(--color-primary-disabled);
--action-primary-on-dark:var(--color-primary-on-dark);
--action-on-primary:var(--color-on-primary);
--action-dark:var(--color-ink);
--action-on-dark:var(--color-on-dark);
}

/* tokens/typography.css */
:root{
/* ─── Families · the boundary is strict ─── */
--font-serif-display:"DM Serif Display",Georgia,serif;
/* The live site sets its headlines in a lighter, garamond-style serif than DM Serif Display.
   EB Garamond is the chosen cut — a warmer old-style face than Cormorant — picked from the
   coming-soon page's type panel and saved here as the system default. A flagged substitution:
   no bespoke MASURU font binaries were supplied. */
--font-serif-site:"EB Garamond","Cormorant Garamond",Georgia,"Noto Sans JP",serif;
--font-sans:"Inter Tight","DM Sans",system-ui,-apple-system,sans-serif;
/* Japanese companion lines — MASURU sets JP alongside EN on packaging and campaign work.
   Zen Old Mincho ties the JP lines to the garamond headlines rather than to the sans. */
--font-jp:"Zen Old Mincho","Noto Sans JP","Hiragino Mincho ProN",serif;

/* ─── Weight ladder · 700 is absent from the system ─── */
--font-weight-light:300;
--font-weight-regular:400;
--font-weight-medium:500;
--font-weight-semibold:600;

/* ─── Display · DM Serif Display, always 400 ─── */
--type-hero-display-size:56px;--type-hero-display-line:1.07;--type-hero-display-tracking:-.5px;
--type-display-lg-size:40px;--type-display-lg-line:1.10;
--type-display-md-size:34px;--type-display-md-line:1.15;
--type-lead-size:24px;--type-lead-line:1.45;

/* ─── Headings ─── */
--type-heading-1-size:28px;--type-heading-1-line:1.20;
--type-heading-2-size:22px;--type-heading-2-line:1.25;
--type-heading-3-size:18px;--type-heading-3-line:1.30;
--type-heading-4-size:16px;--type-heading-4-line:1.35;

/* ─── Labels ─── */
--type-label-size:11px;--type-label-line:1.0;--type-label-tracking:2px;
--type-micro-uppercase-size:11px;--type-micro-uppercase-line:1.40;--type-micro-uppercase-tracking:1.5px;

/* ─── Body ─── */
--type-body-lg-size:18px;--type-body-lg-line:1.75;
--type-body-md-size:16px;--type-body-md-line:1.55;
--type-body-sm-size:14px;--type-body-sm-line:1.50;

/* ─── Captions & micro ─── */
--type-caption-size:13px;--type-caption-line:1.40;
--type-micro-size:12px;--type-micro-line:1.40;

/* ─── Buttons, nav, fine print ─── */
--type-button-md-size:14px;--type-button-md-line:1.30;
--type-button-sm-size:12px;--type-button-sm-line:1.0;
--type-nav-link-size:12px;--type-nav-link-line:1.0;
--type-dense-link-size:14px;--type-dense-link-line:2.41;
--type-fine-print-size:12px;--type-fine-print-line:1.0;--type-fine-print-tracking:-.12px;

/* ─── Japanese companion line ─── */
--type-jp-size:15px;--type-jp-line:1.90;--type-jp-tracking:.04em;
--type-jp-sm-size:13px;--type-jp-sm-line:1.80;--type-jp-sm-tracking:.04em;

/* ─── Site caps label · the uppercase tracked label used on buttons and section heads ─── */
--type-caps-size:12px;--type-caps-line:1.0;--type-caps-tracking:.14em;
--type-caps-lg-size:14px;--type-caps-lg-line:1.0;--type-caps-lg-tracking:.22em;

/* ─── Semantic aliases ─── */
--font-heading:var(--font-serif-display);
--font-ui:var(--font-sans);
--font-body:var(--font-sans);
}

/* tokens/spacing.css */
:root{
/* Base unit 4px · 8px primary increment */
--space-xxs:4px;
--space-xs:8px;
--space-sm:12px;
--space-md:16px;
--space-lg:20px;
--space-xl:24px;
--space-xxl:32px;
--space-xxxl:40px;
--space-section-sm:48px;
--space-section:64px;
--space-section-lg:96px;
--space-hero:120px;

/* ─── Semantic aliases ─── */
--tile-padding-block:var(--space-section-lg);
--hero-padding-block:var(--space-hero);
--card-padding:var(--space-xl);
--card-padding-feature:var(--space-xxl);
--button-padding:10px 20px;
--button-padding-compact:8px 12px;
--grid-gutter-tight:var(--space-xs);
--grid-gutter:var(--space-md);
--grid-gutter-wide:var(--space-xl);
--container-max:1280px;
--container-max-detail:1080px;
--control-height:44px;
--control-height-nav:44px;
--control-height-search:64px;
--icon-button-size:40px;
}

/* tokens/radius.css */
:root{
--radius-none:0px;
--radius-xs:4px;
--radius-sm:6px;
--radius-md:8px;
--radius-lg:12px;
--radius-xl:16px;
--radius-xxl:20px;
--radius-full:9999px;

/* ─── Semantic aliases · three active values ─── */
--radius-control:var(--radius-md);
--radius-card:var(--radius-lg);
--radius-panel:var(--radius-xl);
--radius-modal:var(--radius-xxl);
--radius-pill:var(--radius-full);
--radius-tile:var(--radius-none);
}

/* tokens/elevation.css */
:root{
/* Level 0 is flat — no token. Level 1 is the hairline border, not a shadow. */
--shadow-subtle:rgba(44,41,39,.04) 0px 1px 2px 0px;
--shadow-float:rgba(44,41,39,.08) 0px 4px 12px 0px;
--shadow-mockup:rgba(44,41,39,.20) 0px 24px 48px -8px;
/* The only true drop-shadow in the system — product photography only. */
--shadow-product:rgba(44,41,39,.22) 3px 5px 30px 0px;

--blur-frosted:saturate(180%) blur(20px); /* @kind other */
--frosted-opacity:.85; /* @kind other */
--scrim:rgba(44,41,39,.5);
--focus-ring:2px solid var(--color-focus-ring);
--focus-ring-offset:2px;
}

/* tokens/motion.css */
:root{
--duration-fast:150ms; /* @kind other */
--duration-base:200ms; /* @kind other */
--duration-modal:300ms; /* @kind other */
--ease-out:cubic-bezier(0,0,.2,1); /* @kind other */
--ease-in-out:cubic-bezier(.4,0,.2,1); /* @kind other */
--transition-state:color var(--duration-fast) var(--ease-out),background-color var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out);
/* Every button presses with the same micro-interaction. */
--press-scale:.95; /* @kind other */
}

/* utilities/base.css */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--type-body-md-size);font-weight:var(--font-weight-regular);line-height:var(--type-body-md-line);text-wrap:pretty}
h1,h2,h3,h4,h5,h6{margin:0;color:var(--text-heading);font-weight:var(--font-weight-regular)}
h1,h2{font-family:var(--font-serif-display)}
h3,h4,h5,h6{font-family:var(--font-sans);font-weight:var(--font-weight-semibold)}
p{margin:0}
a{color:var(--text-link);text-decoration:none;transition:color var(--duration-fast) var(--ease-out)}
a:hover{color:var(--color-sage-pressed);text-decoration:underline;text-underline-offset:3px}
a:active{color:var(--color-sage-pressed)}
:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-ring-offset)}
button,input,select,textarea{font:inherit;color:inherit}
img{display:block;max-width:100%}
*,*::before,*::after{box-sizing:border-box}
::selection{background:var(--color-sage-soft);color:var(--color-ink)}
.masuru-on-dark{color:var(--text-on-dark)}
.masuru-on-dark h1,.masuru-on-dark h2,.masuru-on-dark h3,.masuru-on-dark h4{color:var(--text-on-dark)}
.masuru-on-dark a{color:var(--text-link-on-dark)}
.masuru-on-dark a:hover{color:var(--color-primary)}

/* utilities/type.css */
.masuru-hero-display{font-family:var(--font-serif-display);font-size:var(--type-hero-display-size);font-weight:400;line-height:var(--type-hero-display-line);letter-spacing:var(--type-hero-display-tracking)}
.masuru-display-lg{font-family:var(--font-serif-display);font-size:var(--type-display-lg-size);font-weight:400;line-height:var(--type-display-lg-line)}
.masuru-display-md{font-family:var(--font-serif-display);font-size:var(--type-display-md-size);font-weight:400;line-height:var(--type-display-md-line)}
.masuru-lead{font-family:var(--font-serif-display);font-size:var(--type-lead-size);font-weight:400;line-height:var(--type-lead-line)}
.masuru-heading-1{font-family:var(--font-serif-display);font-size:var(--type-heading-1-size);font-weight:400;line-height:var(--type-heading-1-line)}
.masuru-heading-2{font-family:var(--font-serif-display);font-size:var(--type-heading-2-size);font-weight:400;line-height:var(--type-heading-2-line)}
.masuru-heading-3{font-family:var(--font-sans);font-size:var(--type-heading-3-size);font-weight:600;line-height:var(--type-heading-3-line)}
.masuru-heading-4{font-family:var(--font-sans);font-size:var(--type-heading-4-size);font-weight:600;line-height:var(--type-heading-4-line)}
.masuru-label{font-family:var(--font-sans);font-size:var(--type-label-size);font-weight:600;line-height:var(--type-label-line);letter-spacing:var(--type-label-tracking);text-transform:uppercase}
.masuru-body-lg{font-family:var(--font-sans);font-size:var(--type-body-lg-size);font-weight:300;line-height:var(--type-body-lg-line)}
.masuru-body-md{font-family:var(--font-sans);font-size:var(--type-body-md-size);font-weight:400;line-height:var(--type-body-md-line)}
.masuru-body-md-medium{font-family:var(--font-sans);font-size:var(--type-body-md-size);font-weight:500;line-height:var(--type-body-md-line)}
.masuru-body-sm{font-family:var(--font-sans);font-size:var(--type-body-sm-size);font-weight:400;line-height:var(--type-body-sm-line)}
.masuru-body-sm-medium{font-family:var(--font-sans);font-size:var(--type-body-sm-size);font-weight:500;line-height:var(--type-body-sm-line)}
.masuru-caption{font-family:var(--font-sans);font-size:var(--type-caption-size);font-weight:400;line-height:var(--type-caption-line)}
.masuru-caption-bold{font-family:var(--font-sans);font-size:var(--type-caption-size);font-weight:600;line-height:var(--type-caption-line)}
.masuru-micro{font-family:var(--font-sans);font-size:var(--type-micro-size);font-weight:500;line-height:var(--type-micro-line)}
.masuru-micro-uppercase{font-family:var(--font-sans);font-size:var(--type-micro-uppercase-size);font-weight:600;line-height:var(--type-micro-uppercase-line);letter-spacing:var(--type-micro-uppercase-tracking);text-transform:uppercase}
.masuru-button-md{font-family:var(--font-sans);font-size:var(--type-button-md-size);font-weight:500;line-height:var(--type-button-md-line)}
.masuru-button-sm{font-family:var(--font-sans);font-size:var(--type-button-sm-size);font-weight:500;line-height:var(--type-button-sm-line)}
.masuru-nav-link{font-family:var(--font-sans);font-size:var(--type-nav-link-size);font-weight:400;line-height:var(--type-nav-link-line)}
.masuru-dense-link{font-family:var(--font-sans);font-size:var(--type-dense-link-size);font-weight:400;line-height:var(--type-dense-link-line)}
.masuru-fine-print{font-family:var(--font-sans);font-size:var(--type-fine-print-size);font-weight:400;line-height:var(--type-fine-print-line);letter-spacing:var(--type-fine-print-tracking)}
.masuru-site-display{font-family:var(--font-serif-site);font-weight:300;font-size:56px;line-height:1.12;letter-spacing:.005em}
.masuru-site-display-md{font-family:var(--font-serif-site);font-weight:300;font-size:34px;line-height:1.2}
.masuru-site-heading{font-family:var(--font-serif-site);font-weight:400;font-size:20px;line-height:1.3}
.masuru-site-body{font-family:var(--font-serif-site);font-weight:400;font-size:15px;line-height:1.6}
.masuru-caps{font-family:var(--font-sans);font-size:var(--type-caps-size);font-weight:400;line-height:var(--type-caps-line);letter-spacing:var(--type-caps-tracking);text-transform:uppercase}
.masuru-caps-lg{font-family:var(--font-sans);font-size:var(--type-caps-lg-size);font-weight:400;line-height:var(--type-caps-lg-line);letter-spacing:var(--type-caps-lg-tracking);text-transform:uppercase}
.masuru-jp{font-family:var(--font-jp);font-size:var(--type-jp-size);font-weight:300;line-height:var(--type-jp-line);letter-spacing:var(--type-jp-tracking)}
.masuru-jp-sm{font-family:var(--font-jp);font-size:var(--type-jp-sm-size);font-weight:300;line-height:var(--type-jp-sm-line);letter-spacing:var(--type-jp-sm-tracking)}
.masuru-wordmark{font-family:var(--font-serif-display);font-weight:400;letter-spacing:.22em;text-transform:uppercase}