/* =========================================================================
   Designsystem
   Digitala objektspresentationer för bostäder.

   Paletten är hämtad ur arkitekturens material: kalk, sand, ek, kol och
   mässing. Ingen blå eller lila techgradient någonstans.
   ========================================================================= */

:root {
  /* ---- Ljusa ytor: kalk och sand ---- */
  --sand-50:  #FCFAF6;
  --sand-100: #F5F1E8;
  --sand-200: #EBE5D8;
  --sand-300: #DCD3C1;
  --sand-400: #C4B8A0;

  /* ---- Mörka ytor: varm kol ---- */
  --char-900: #141312;
  --char-850: #1B1A18;
  --char-800: #232120;
  --char-700: #2F2C29;
  --char-600: #3E3A36;
  --char-500: #524D47;

  /* ---- Text ---- */
  --stone-600: #4F4A43;
  --stone-500: #6A645A;

  /* ---- Accent: mässing. Sparsam, aldrig dekorativ för sin egen skull.
         Ljus yta använder den mörkare tonen, mörk yta den ljusare. ---- */
  --brass-700: #5E421D;
  --brass-600: #825D2C;
  --brass-500: #B08A4F;
  --brass-400: #CBA469;

  /* ---- Stöd ---- */
  --moss-600: #4A6250;
  --clay-600: #97462C;

  /* ---- Semantiska roller: ljust läge ---- */
  --bg:          var(--sand-100);
  --bg-raised:   var(--sand-50);
  --bg-sunken:   var(--sand-200);
  --fg:          var(--char-900);
  --fg-muted:    var(--stone-600);
  --fg-subtle:   var(--stone-500);
  --line:        color-mix(in oklab, var(--char-900) 13%, transparent);
  --line-strong: color-mix(in oklab, var(--char-900) 24%, transparent);
  --accent:      var(--brass-600);
  --accent-fg:   #fff;

  /* ---- Typografi ----
     Serif bär rubrikerna som i ett arkitekturmagasin. Sans bär allt
     som ska läsas snabbt: etiketter, fakta, formulär. */
  --font-display: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body:    "Instrument Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* Fluid skala. Rubrikerna får ta i rejält — det är hela poängen. */
  --t-display: clamp(3rem, 1.6rem + 5.6vw, 7.5rem);
  --t-h1:      clamp(2.6rem, 1.5rem + 4.4vw, 5.5rem);
  --t-h2:      clamp(2.2rem, 1.4rem + 3.4vw, 4.4rem);
  --t-h3:      clamp(1.5rem, 1.2rem + 1.3vw, 2.3rem);
  --t-h4:      clamp(1.1rem, 1rem + 0.5vw, 1.4rem);
  --t-lead:    clamp(1.1rem, 1rem + 0.6vw, 1.45rem);
  --t-body:    clamp(1rem, 0.97rem + 0.16vw, 1.0625rem);
  --t-small:   0.9375rem;
  --t-label:   0.75rem;

  --lh-tight: 0.94;
  --lh-snug: 1.06;
  --lh-body: 1.65;

  /* ---- Rum. Generöst — whitespace är en del av produkten. ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 9rem;

  --section-y: clamp(5rem, 3rem + 9vw, 12rem);
  --gutter: clamp(1.35rem, 0.6rem + 3vw, 4.5rem);
  --maxw: 88rem;
  --maxw-text: 44rem;

  /* ---- Form. Nästan raka hörn: arkitektur, inte app. ---- */
  --r-xs: 2px;
  --r-sm: 3px;
  --r-md: 4px;
  --r-lg: 6px;
  --r-pill: 999px;

  /* ---- Djup. Diskret; premium skriker inte med skuggor. ---- */
  --shadow-sm: 0 1px 2px rgba(20,19,18,.05);
  --shadow-md: 0 2px 6px rgba(20,19,18,.06), 0 10px 24px -12px rgba(20,19,18,.14);
  --shadow-lg: 0 4px 12px rgba(20,19,18,.07), 0 30px 60px -24px rgba(20,19,18,.24);
  --shadow-xl: 0 8px 20px rgba(20,19,18,.09), 0 54px 96px -32px rgba(20,19,18,.38);

  /* ---- Rörelse ---- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: 180ms;
  --dur: 380ms;
  --dur-slow: 900ms;

  --letter-label: 0.18em;
}

/* ---- Mörka ytor. color sätts här, annars ärvs den ljusa textfärgen. ---- */
.on-dark {
  color: var(--fg);
  --bg:          var(--char-900);
  --bg-raised:   var(--char-800);
  --bg-sunken:   #0D0C0B;
  --fg:          var(--sand-50);
  --fg-muted:    #ADA69A;
  --fg-subtle:   #8C857A;
  --line:        rgba(255,255,255,.13);
  --line-strong: rgba(255,255,255,.24);
  --accent:      var(--brass-400);
  --accent-fg:   #14100E;
  color-scheme: dark;
}