/* ByTaste website proposal v1. Semantic values are maintained here.
   White / black / blue and clear emphasis are user-selected directions;
   exact values, typography and dimensions are current proposals. */
@font-face {
  font-family: "Inter";
  src: url("assets/InterVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --color-canvas: #FFFFFF;
  --color-ink: #202124;
  --color-accent: #0866FF;
  --color-accent-hover: #0053D6;
  --color-accent-soft: #EEF4FF;
  --color-surface: #F6F7F9;
  --color-subtle: #70757E;
  --color-border: #E4E6EB;
  --color-inverse: #FFFFFF;
  --color-inverse-subtle: #B8BBC3;
  --color-success: #17814A;
  --font-ui: "Inter", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, monospace;
  --type-display: clamp(42px, 5.2vw, 72px);
  --type-display-leading: 1.15;
  --type-title: 32px;
  --type-title-leading: 1.35;
  --type-specimen-display: 44px;
  --type-section: 27px;
  --type-feature: clamp(30px, 3.5vw, 46px);
  --type-body: 16px;
  --type-body-leading: 1.75;
  --type-caption: 13px;
  --landing-header-height: 88px;
  --landing-expression-size: clamp(36px, 3.5vw, 50px);
  --landing-surface-mint: #EDF3EF;
  --landing-surface-blue: #EEF4FF;
  --landing-surface-lilac: #F1EEF8;
  --landing-surface-peach: #FBEFE7;
  --landing-surface-yellow: #F8F4E6;
  --landing-type-hero: clamp(48px, 5.55vw, 80px);
  --landing-type-section: clamp(36px, 3.9vw, 54px);
  --motion-scene: 1000ms;
  --motion-story: 720ms;
  --landing-chapter-space: 155px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-section: clamp(64px, 8vw, 112px);
  --page-width: 1200px;
  --page-gutter: clamp(24px, 4vw, 64px);
  --radius-control: 8px;
  --radius-panel: 16px;
  --radius-large: 24px;
  --shadow-overlay: 0 14px 44px rgb(24 31 45 / 18%), 0 3px 10px rgb(24 31 45 / 8%);
  --motion-press: 160ms;
  --motion-state: 220ms;
  --motion-enter: 380ms;
  --motion-layout: 420ms;
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
}

@media (max-width:1100px) {
  :root { --landing-chapter-space:125px; }
}
@media (max-width:860px) {
  :root { --landing-chapter-space:105px; --landing-header-height:77px; }
}
@media (max-width:600px) {
  :root { --landing-header-height:72px; --landing-type-hero:42px; --landing-type-section:36px; --landing-chapter-space:90px; }
}
@media (max-width:370px) {
  :root { --landing-type-hero:38px; }
}

@media (max-width:1080px) {
  :root { --type-specimen-display:37px; --type-title:28px; --type-section:24px; }
}
@media (max-width:760px) {
  :root {
    --type-display:clamp(39px, 8.8vw, 60px);
    --type-specimen-display:clamp(28px, 6.8vw, 40px);
    --type-title:25px;
    --type-body:15px;
    --type-caption:12px;
  }
}