/* ============================================================
   FINCA — Design Tokens (canonical source of truth)
   finca.fan · Ibiza property browser
   Identity ported from hike.fan (Assouline-poster "Ibiza chic"),
   adapted for real-estate. Import this file anywhere — the app,
   the holding page, and the /designsystem reference all read it.
   ============================================================ */

:root {
  /* --- Paper & neutrals (Assouline cream) --- */
  --paper:        #F1E8D4;  /* primary background */
  --paper-deep:   #E8DDC3;  /* slightly darker cream */
  --bone:         #F8F0DB;  /* lightest — surfaces, cards */
  --linen:        #E0D4B8;  /* photo / image backings */
  --rule:         #1E1F1A;  /* hard ink borders */
  --rule-soft:    #C9B98F;  /* hairline borders */

  /* --- Ink (text) --- */
  --ink:          #14160F;  /* near-black body */
  --ink-soft:     #545548;  /* muted labels */
  --ink-faint:    #8B8A77;  /* hairline text */

  /* --- Forest (primary brand — Ibiza poster green) --- */
  --forest:       #1E3A2C;  /* wordmark, headings, primary brand */
  --forest-deep:  #12271D;  /* darkest backgrounds */
  --forest-mid:   #2A5240;  /* mid accent */

  /* --- Magenta (hot pink — CTAs & accent) --- */
  --magenta:      #E8457D;  /* accent, links, signature pink */
  --magenta-deep: #B52B5A;  /* AA-safe pink on bone, button fill */

  /* --- Butter (Miami yellow — highlight, sparing) --- */
  --butter:       #F5D24F;
  --butter-deep:  #E6B72E;

  /* --- Clay (terracotta — roofs, land, warmth) --- */
  --clay:         #C36A3A;
  --clay-deep:    #9A4A24;
  --clay-light:   #E39A72;

  /* --- Sea blue (cool accent, washes) --- */
  --blue:         #6F74F7;
  --blue-deep:    #4248D6;
  --blue-wash:    #D6D8FA;

  /* --- Property-semantic colours --- */
  --status-sale:      #6F8F5E;          /* "For sale" — calm green */
  --status-reserved:  var(--butter-deep);/* "Reserved / under offer" */
  --status-sold:      var(--magenta-deep);/* "Sold" stamp */
  --price-drop:       var(--magenta);    /* price reduced */
  --price-up:         var(--clay-deep);  /* price raised (rare) */
  --price-tag-bg:     var(--forest);     /* price chip background */
  --price-tag-fg:     var(--bone);       /* price chip text */
  --land-accent:      var(--clay);       /* plots / terrenos */

  /* --- Typography --- */
  --font-display: "Cormorant", Georgia, "Times New Roman", serif;   /* thin high-contrast serif — headlines, wordmark, titles, quotes */
  --font-caps:    "Jost", system-ui, -apple-system, sans-serif;     /* labels, eyebrows, data, prices (tracked uppercase) */
  --font-body:    "Jost", system-ui, -apple-system, sans-serif;     /* body copy — light geometric sans */

  /* Fluid type scale (clamp: min, fluid, max) */
  --fs-wall:    clamp(3.75rem, 14vw + 0.5rem, 11rem);   /* 60–176px hero wall */
  --fs-hero:    clamp(3rem, 10vw, 8.5rem);              /* 48–136px page hero */
  --fs-h1:      clamp(2.25rem, 3.5vw + 1rem, 4.5rem);   /* 36–72px */
  --fs-h2:      clamp(1.5rem, 2vw + 0.8rem, 2.5rem);    /* 24–40px */
  --fs-h3:      clamp(1.125rem, 0.4vw + 1rem, 1.375rem);/* 18–22px */
  --fs-body:    clamp(0.9375rem, 0.2vw + 0.875rem, 1rem);/* ~15–16px */
  --fs-caption: 0.75rem;                                 /* 12px */
  --fs-eyebrow: 0.6875rem;                               /* 11px tracked */
  --fs-price:   clamp(1.25rem, 1vw + 1rem, 1.75rem);     /* price display (Space Grotesk) */

  /* Letter-spacing */
  --track-tighter: -0.05em;   /* wall type */
  --track-tight:   -0.035em;  /* display headlines */
  --track-normal:  0;
  --track-wide:    0.08em;
  --track-wider:   0.18em;    /* eyebrows, caps labels */

  /* Line-height */
  --lh-tight:   0.95;
  --lh-snug:    1.15;
  --lh-body:    1.55;

  /* --- Spacing scale (4px base) --- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;

  /* --- Layout --- */
  --content-max:  1240px;
  --gutter:       clamp(1.25rem, 3vw, 3rem);
  --nav-h:        72px;
  --nav-h-mobile: 58px;
  --tabbar-h:     64px;

  /* --- Radii (poster-flat, rectangular) --- */
  --r-sm:    2px;
  --r-md:    4px;
  --r-lg:    8px;
  --r-xl:    16px;
  --r-pill:  999px;
  --r-photo: 2px;   /* polaroid */
  --r-card:  4px;

  /* --- Borders --- */
  --bd-hair:      1px solid var(--rule-soft);
  --bd-ink:       2px solid var(--ink);
  --bd-ink-thick: 3px solid var(--ink);

  /* --- Elevation (ink-inked, poster-flat hard shadows) --- */
  --shadow-poster:   8px 12px 0 rgba(20, 22, 15, 0.14);
  --shadow-card:     4px 6px 0 rgba(20, 22, 15, 0.10);
  --shadow-polaroid: 0 14px 30px -16px rgba(20, 22, 15, 0.55),
                     0 4px 8px -4px rgba(20, 22, 15, 0.28);
  --shadow-float:    0 24px 48px -20px rgba(20, 22, 15, 0.35);

  /* --- Motion --- */
  --ease-out:    cubic-bezier(0.22, 0.9, 0.32, 1);   /* content entry */
  --ease-spring: cubic-bezier(0.34, 1.42, 0.6, 1);   /* playful bounce */
  --t-fast:  160ms;
  --t-med:   280ms;
  --t-slow:  500ms;

  /* --- Z-index --- */
  --z-map:     10;
  --z-nav:     50;
  --z-tabbar:  60;
  --z-sheet:   80;
  --z-toast:   90;
  --z-modal:   100;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 1ms; --t-med: 1ms; --t-slow: 1ms; }
}