/* ==========================================================================
   L'Chaim — reset, design tokens and base typography
   --------------------------------------------------------------------------
   Loaded FIRST, before any component styling. Hand-authored; no build step.

   During the migration away from the generated utility sheet the load order is
       lc-base.css  →  app.css (outgoing utilities)  →  lc.css (components)
   which keeps the cascade in the required order: reset, then utilities, then
   components. When app.css is deleted this file is merged into lc.css.
   ========================================================================== */

/* ==========================================================================
   1. Reset
   Normalises the browser defaults the layout is built on: collapsed heading
   and list styling, block-level media, inherited form typography.
   ========================================================================== */

*,
::before,
::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
}

::before,
::after { --tw-content: ''; }

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
}

body { margin: 0; line-height: inherit; }

hr { height: 0; color: inherit; border-top-width: 1px; }

h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; margin: 0; }

p, figure, blockquote, dl, dd { margin: 0; }

a { color: inherit; text-decoration: inherit; }

b, strong { font-weight: bolder; }

small { font-size: 80%; }

button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

button, select { text-transform: none; }

button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}

button, [role=button] { cursor: pointer; }

:-moz-focusring { outline: auto; }

ol, ul, menu { list-style: none; margin: 0; padding: 0; }

textarea { resize: vertical; }

input::placeholder,
textarea::placeholder { opacity: 1; color: #9ca3af; }

img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  vertical-align: middle;
}

img, video { max-width: 100%; height: auto; }

[hidden] { display: none; }

[x-cloak] { display: none !important; }

/* ==========================================================================
   2. Design tokens
   ========================================================================== */

:root {
  /* Brand — warm gold */
  --gold-50:  #FDFCF9;
  --gold-100: #F6F4EE;
  --gold-200: #EAE4D6;
  --gold-300: #D6CCB6;
  --gold-400: #C1B192;
  --gold-500: #A99268;
  --gold-600: #8C7753;
  --gold-700: #6F5D3F;
  --gold-800: #544630;
  --gold-900: #3B3122;

  /* Neutral — onyx */
  --onyx-50:  #F5F5F5;
  --onyx-100: #EBEBEB;
  --onyx-200: #D6D6D6;
  --onyx-300: #BDBDBD;
  --onyx-400: #949494;
  --onyx-500: #6B6B6B;
  --onyx-600: #525252;
  --onyx-700: #3D3D3D;
  --onyx-800: #292929;
  --onyx-900: #171614;

  --white: #ffffff;

  /* Type. --font-sans is the body stack; the root stack in the reset keeps the
     wider fallback chain. */
  --font-sans:  'DM Sans', sans-serif;
  --font-serif: 'Cormorant Garamond', serif;

  /* Elevation */
  --shadow-luxury:       0 10px 40px -10px rgba(23, 22, 20, .08);
  --shadow-luxury-hover: 0 20px 40px -10px rgba(23, 22, 20, .12);
  --shadow-gold-glow:    0 4px 20px rgba(169, 146, 104, .15);

  /* Motion — the shared easing/duration the interactive elements use.
     --transition-base animates the full set of paint properties, so a hover
     rule can change any of them without restating the transition. */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:
    color .15s var(--ease), background-color .15s var(--ease),
    border-color .15s var(--ease), text-decoration-color .15s var(--ease),
    fill .15s var(--ease), stroke .15s var(--ease), opacity .15s var(--ease),
    box-shadow .15s var(--ease), transform .15s var(--ease),
    filter .15s var(--ease), -webkit-backdrop-filter .15s var(--ease),
    backdrop-filter .15s var(--ease);

  /* Layout */
  --page-max:   1400px;
  --footer-max: 1200px;
}

/* ==========================================================================
   3. Base / typography
   ========================================================================== */

body {
  font-family: var(--font-sans);
  background: var(--gold-50);
  color: var(--onyx-900);
}

::selection { background: var(--gold-200); color: var(--onyx-900); }