/* ============================================================
   sonon — Colors & Typography
   まつ毛と眉毛のお店
   ============================================================ */

/* ---------- Webfonts ----------
   sonon's logotype is a high-contrast serif with delicate hairlines.
   Closest free Google Font match: Cormorant Garamond (display) and
   Noto Serif JP (Japanese body). If brand-spec fonts exist, please
   replace the @import below.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500&family=Noto+Serif+JP:wght@300;400;500;600&family=Noto+Sans+JP:wght@300;400;500&display=swap');

:root {
  /* ============================================================
     COLOR — sonon brand palette
     ============================================================ */

  /* Brand core */
  --sonon-bg:        #F5F2EE;   /* off-white / paper           */
  --sonon-brown:     #98866B;   /* signature toupe brown       */
  --sonon-gold:      #C4975A;   /* warm accent gold            */
  --sonon-dark-bg:   #65625C;   /* deep mushroom / dark mode bg */

  /* Tonal extensions (derived, harmonious) */
  --sonon-bg-2:      #EDE7DE;   /* cream — secondary surface    */
  --sonon-bg-3:      #E2D9CB;   /* sand — tertiary card surface */
  --sonon-line:      #D9D0C2;   /* hairline borders             */
  --sonon-line-soft: #E9E2D6;   /* even softer dividers         */

  --sonon-brown-50:  #EDE7DE;
  --sonon-brown-100: #D9CDB9;
  --sonon-brown-200: #C0B196;
  --sonon-brown-300: #A8997B;
  --sonon-brown-400: #98866B;   /* = brand brown */
  --sonon-brown-500: #806F56;
  --sonon-brown-600: #685A45;
  --sonon-brown-700: #4F4534;

  --sonon-gold-soft: #DCB888;
  --sonon-gold:      #C4975A;
  --sonon-gold-deep: #A37B43;

  /* Foreground / text */
  --sonon-ink:       #2B2A26;   /* near-black, slightly warm    */
  --sonon-ink-2:     #4A463F;   /* secondary body               */
  --sonon-ink-3:     #6E6760;   /* tertiary / captions          */
  --sonon-ink-4:     #9A9189;   /* placeholders, muted          */
  --sonon-on-dark:   #F5F2EE;   /* text on dark surfaces        */
  --sonon-on-dark-2: #C9C4BC;

  /* Semantic */
  --sonon-success:   #7B8A5A;   /* sage                         */
  --sonon-warning:   #C4975A;   /* gold doubles as warn         */
  --sonon-error:     #A8554C;   /* dusty terracotta             */

  /* ============================================================
     SEMANTIC TOKENS
     ============================================================ */
  --bg:        var(--sonon-bg);
  --bg-elev:   #FFFFFF;
  --bg-soft:   var(--sonon-bg-2);
  --bg-card:   #FFFFFF;
  --bg-dark:   var(--sonon-dark-bg);

  --fg1:       var(--sonon-ink);
  --fg2:       var(--sonon-ink-2);
  --fg3:       var(--sonon-ink-3);
  --fg4:       var(--sonon-ink-4);

  --border:    var(--sonon-line);
  --border-soft: var(--sonon-line-soft);

  --accent:    var(--sonon-brown);
  --accent-2:  var(--sonon-gold);

  /* ============================================================
     TYPOGRAPHY — families
     ============================================================ */
  --font-display: 'Cormorant Garamond', 'Noto Serif JP', 'Hiragino Mincho ProN',
                  'Yu Mincho', serif;
  --font-serif:   'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --font-sans:    'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --font-mono:    'SF Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* ============================================================
     TYPE SCALE — generous, airy. Salon designs breathe.
     ============================================================ */
  --fs-display:  72px;
  --fs-h1:       48px;
  --fs-h2:       36px;
  --fs-h3:       24px;
  --fs-h4:       20px;
  --fs-body:     16px;
  --fs-small:    14px;
  --fs-caption:  12px;
  --fs-eyebrow:  11px;  /* for tracked-out small caps labels */

  /* Line height */
  --lh-tight:    1.15;
  --lh-snug:     1.4;
  --lh-body:     1.75;  /* roomy — Japanese body reads better */
  --lh-loose:    2.0;

  /* Letter spacing — sonon loves wide tracking on display + eyebrows */
  --ls-display:  0.04em;
  --ls-eyebrow:  0.32em;
  --ls-button:   0.18em;
  --ls-body:     0.02em;

  /* ============================================================
     SPACING / RADIUS / SHADOW
     ============================================================ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* Sonon prefers small, restrained radii — no bubble-y corners */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-pill: 999px;

  /* Soft, low, warm shadows — never harsh */
  --shadow-1:  0 1px 2px rgba(75, 65, 50, 0.06);
  --shadow-2:  0 4px 16px rgba(75, 65, 50, 0.08);
  --shadow-3:  0 12px 32px rgba(75, 65, 50, 0.10);
  --shadow-4:  0 24px 60px rgba(75, 65, 50, 0.14);

  /* Motion */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    160ms;
  --dur-base:    280ms;
  --dur-slow:    520ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */
html, body {
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  color: var(--fg1);
  font-weight: 400;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  margin: 0;
}

.display { font-size: var(--fs-display); font-weight: 300; }
h1       { font-size: var(--fs-h1); }
h2       { font-size: var(--fs-h2); }
h3       { font-size: var(--fs-h3); font-family: var(--font-serif); }
h4       { font-size: var(--fs-h4); font-family: var(--font-serif); }

p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg2);
  margin: 0 0 1em 0;
}

small, .caption {
  font-size: var(--fs-caption);
  color: var(--fg3);
  letter-spacing: 0.04em;
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg3);
  font-weight: 500;
}

.subtitle-jp {
  font-family: var(--font-serif);
  font-size: var(--fs-small);
  letter-spacing: 0.2em;
  color: var(--fg2);
  font-weight: 400;
}

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
a:hover { border-bottom-color: currentColor; }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-6) 0;
}

code, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}