/* ============================================================
   Memori — Colors & Type
   Source: Charte Graphique Memori (Pulaku Agency, 2024)
   ============================================================ */

/* ---------- Webfonts ---------- */
@font-face { font-family: 'Inter Tight'; src: url('fonts/InterTight-Thin.ttf') format('truetype');           font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter Tight'; src: url('fonts/InterTight-ThinItalic.ttf') format('truetype');     font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter Tight'; src: url('fonts/InterTight-ExtraLight.ttf') format('truetype');    font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter Tight'; src: url('fonts/InterTight-ExtraLightItalic.ttf') format('truetype');font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter Tight'; src: url('fonts/InterTight-Light.ttf') format('truetype');          font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter Tight'; src: url('fonts/InterTight-LightItalic.ttf') format('truetype');    font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter Tight'; src: url('fonts/InterTight-Regular.ttf') format('truetype');        font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter Tight'; src: url('fonts/InterTight-Italic.ttf') format('truetype');         font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter Tight'; src: url('fonts/InterTight-Medium.ttf') format('truetype');         font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter Tight'; src: url('fonts/InterTight-MediumItalic.ttf') format('truetype');   font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter Tight'; src: url('fonts/InterTight-SemiBold.ttf') format('truetype');       font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter Tight'; src: url('fonts/InterTight-SemiBoldItalic.ttf') format('truetype'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter Tight'; src: url('fonts/InterTight-Bold.ttf') format('truetype');           font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter Tight'; src: url('fonts/InterTight-BoldItalic.ttf') format('truetype');     font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter Tight'; src: url('fonts/InterTight-ExtraBold.ttf') format('truetype');      font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter Tight'; src: url('fonts/InterTight-ExtraBoldItalic.ttf') format('truetype');font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter Tight'; src: url('fonts/InterTight-Black.ttf') format('truetype');          font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter Tight'; src: url('fonts/InterTight-BlackItalic.ttf') format('truetype');    font-weight: 900; font-style: italic; font-display: swap; }

:root {
  /* ---------- BRAND PALETTE ---------- */
  --color-cultured:     #f5f5f0;
  --color-antique-ruby: #831625;
  --color-ruby-on-dark: #c0253a;
  --color-black-olive:  #3e3e3e;
  --color-raisin-black: #222222;

  /* ---------- EXTENDED ---------- */
  --color-cultured-hi:  #fbfbf7;
  --color-cultured-lo:  #ececE5;
  --color-ruby-hover:   #6e1220;
  --color-ruby-soft:    #f1d9dc;
  --color-olive-40:     #3e3e3e66;
  --color-olive-20:     #3e3e3e33;

  /* ---------- SEMANTIC ---------- */
  --bg:                 var(--color-cultured);
  --bg-elev:            var(--color-cultured-hi);
  --bg-inverse:         var(--color-raisin-black);

  --fg:                 var(--color-raisin-black);
  --fg-1:               var(--color-raisin-black);
  --fg-2:               var(--color-black-olive);
  --fg-3:               var(--color-olive-40);
  --fg-inverse:         var(--color-cultured);

  --accent:             var(--color-antique-ruby);
  --accent-on-dark:     var(--color-ruby-on-dark);
  --accent-hover:       var(--color-ruby-hover);
  --accent-soft:        var(--color-ruby-soft);
  --accent-fg:          var(--color-cultured);

  --border:             var(--color-olive-20);
  --border-strong:      var(--color-black-olive);
  --hairline:           var(--color-cultured-lo);

  /* ---------- TYPE ---------- */
  --font-display:       'Inter Tight', 'Helvetica Neue', system-ui, sans-serif;
  --font-body:          'Inter Tight', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono:          ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  --fs-xs:   12px;  --lh-xs:   1.45;
  --fs-sm:   14px;  --lh-sm:   1.5;
  --fs-base: 16px;  --lh-base: 1.6;
  --fs-md:   18px;  --lh-md:   1.55;
  --fs-lg:   22px;  --lh-lg:   1.4;
  --fs-xl:   32px;  --lh-xl:   1.15;
  --fs-2xl:  48px;  --lh-2xl:  1.05;
  --fs-3xl:  72px;  --lh-3xl:  0.98;
  --fs-4xl:  112px; --lh-4xl:  0.92;
  --fs-5xl:  168px; --lh-5xl:  0.88;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-black:   800;

  --tr-display: -0.03em;
  --tr-heading: -0.02em;
  --tr-body:    -0.005em;
  --tr-caps:    0.12em;

  /* ---------- SPACING ---------- */
  --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;
  --s-11: 192px;

  /* ---------- RADII ---------- */
  --r-none: 0;
  --r-sm:   2px;
  --r-md:   4px;
  --r-lg:   8px;
  --r-xl:   16px;
  --r-pill: 999px;

  /* ---------- SHADOWS ---------- */
  --sh-1: 0 1px 2px rgba(34,34,34,0.04), 0 1px 1px rgba(34,34,34,0.03);
  --sh-2: 0 4px 12px rgba(34,34,34,0.06), 0 1px 2px rgba(34,34,34,0.04);
  --sh-3: 0 12px 32px rgba(34,34,34,0.08), 0 2px 6px rgba(34,34,34,0.04);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;
}

html, body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  letter-spacing: var(--tr-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-3xl);
  line-height: var(--lh-3xl);
  letter-spacing: var(--tr-display);
  color: var(--fg-1);
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-2xl);
  line-height: var(--lh-2xl);
  letter-spacing: var(--tr-display);
  color: var(--fg-1);
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xl);
  line-height: var(--lh-xl);
  letter-spacing: var(--tr-heading);
  color: var(--fg-1);
}

h4, .h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  line-height: var(--lh-lg);
  letter-spacing: var(--tr-heading);
  color: var(--fg-1);
}

p, .p {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--fg-2);
  text-wrap: pretty;
  max-width: 62ch;
}

.eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-xs);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--fg-3);
}

.lede {
  font-size: var(--fs-md);
  line-height: var(--lh-md);
  color: var(--fg-2);
  max-width: 50ch;
}

.display-hero {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(64px, 11vw, var(--fs-5xl));
  line-height: var(--lh-5xl);
  letter-spacing: var(--tr-display);
  color: var(--fg-1);
  text-transform: none;
  text-wrap: balance;
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

a {
  color: var(--fg-1);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--accent); }

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

::selection { background: var(--color-raisin-black); color: var(--color-cultured); }