/* Musthaves by Kell — design tokens
   Source of truth: Claude Design System "Musthaves by Kell Design System".
   Warm cream/beige/taupe palette, Cormorant Garamond display serif + Jost body sans.
   Fonts are self-hosted (variable woff2, latin subset) instead of loaded from the
   Google Fonts CDN, to avoid a render-blocking third-party request. */

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-italic.woff2") format("woff2");
}

@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("../fonts/jost-normal.woff2") format("woff2");
}

:root {
  /* ---- Base palette ---- */
  --color-cream:        #FAF8F3;
  --color-beige:        #E8DDD2;
  --color-taupe-light:  #D4C7B9;
  --color-taupe:        #A68D7A;
  --color-ink:          #453E39;

  /* ---- Derived shades ---- */
  --color-taupe-dark:   oklch(from var(--color-taupe) calc(l - 0.10) c h);
  --color-taupe-darker: oklch(from var(--color-taupe) calc(l - 0.18) c h);
  --color-taupe-pale:   oklch(from var(--color-taupe) calc(l + 0.20) calc(c * 0.6) h);

  --color-ink-soft:     oklch(from var(--color-ink) calc(l + 0.18) calc(c * 0.7) h);
  --color-ink-faint:    oklch(from var(--color-ink) calc(l + 0.32) calc(c * 0.5) h);

  --color-cream-dim:    oklch(from var(--color-cream) calc(l - 0.03) c h);
  --color-white:        #FFFFFF;

  /* ---- Semantic aliases ---- */
  --bg-page:            var(--color-cream);
  --bg-surface:         var(--color-white);
  --bg-surface-muted:   var(--color-beige);
  --bg-surface-tinted:  var(--color-taupe-pale);
  --bg-inverse:         var(--color-ink);

  --text-heading:       var(--color-ink);
  --text-body:          var(--color-ink);
  --text-muted:         var(--color-ink-soft);
  --text-faint:         var(--color-ink-faint);
  --text-inverse:       var(--color-cream);
  --text-accent:        var(--color-taupe);

  --border-subtle:      var(--color-taupe-light);
  --border-default:     var(--color-taupe);
  --border-strong:      var(--color-ink);

  --accent-primary:         var(--color-taupe);
  --accent-primary-hover:   var(--color-taupe-dark);
  --accent-primary-active:  var(--color-taupe-darker);

  --accent-inverse:         var(--color-ink);
  --accent-inverse-hover:   oklch(from var(--color-ink) calc(l + 0.08) c h);
  --accent-inverse-active:  oklch(from var(--color-ink) calc(l + 0.14) c h);

  --state-success:      #7C8B6B;
  --state-error:        #B4674F;
  --state-info:         var(--color-taupe);

  --focus-ring:         var(--color-taupe);

  /* ---- Typography ---- */
  --font-serif-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-sans-body:     "Jost", "Century Gothic", sans-serif;

  --text-display-xl:  clamp(3.5rem, 6vw, 5.5rem);
  --text-display-lg:  clamp(2.75rem, 4.5vw, 4rem);
  --text-display-md:  clamp(2rem, 3vw, 2.75rem);
  --text-display-sm:  1.5rem;

  --text-body-lg:  1.25rem;
  --text-body-md:  1.0625rem;
  --text-body-sm:  0.9375rem;
  --text-body-xs:  0.8125rem;

  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.8;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.12em;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* ---- Spacing / radius / shadow / motion ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  --content-max-width: 1240px;
  --content-max-width-narrow: 760px;

  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(69, 62, 57, 0.05);
  --shadow-sm: 0 2px 8px rgba(69, 62, 57, 0.06);
  --shadow-md: 0 8px 24px rgba(69, 62, 57, 0.08);
  --shadow-lg: 0 20px 48px rgba(69, 62, 57, 0.10);

  --border-width-hairline: 1px;

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-gentle:   cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 450ms;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-sans-body);
  font-size: var(--text-body-md);
  line-height: var(--leading-normal);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif-display);
  font-weight: var(--weight-medium);
  color: var(--text-heading);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

p { margin: 0; }

a {
  color: var(--text-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-taupe-light);
  transition: color var(--duration-fast) var(--ease-standard);
}

a:hover {
  color: var(--color-taupe-darker);
  text-decoration-color: var(--color-taupe);
}

::selection {
  background: var(--color-taupe-light);
  color: var(--color-ink);
}

img { max-width: 100%; height: auto; display: block; }