/* LOV’INN HOMEPAGE V2 — REVIEW ONLY — NOT PRODUCTION · design tokens (Lov'Inn Kaz Dağları DS) */
@import url('./fonts.css');

/* colors */
/* ============================================================
   COLORS — Lov'Inn Kaz Dağları
   Quiet luxury: deep forest, warm cream, stone, muted olive,
   soft (never bright) gold, firelight amber used as a whisper.
   ============================================================ */

:root {
  /* --- Forest (primary brand surface) --------------------- */
  --forest-900: #141B16;
  --forest-800: #1C261E;
  --forest-700: #243029;   /* primary dark surface */
  --forest-600: #2E3D33;
  --forest-500: #3B4F42;

  /* --- Olive (secondary, natural) ------------------------- */
  --olive-600: #5A5F44;
  --olive-500: #6E7257;
  --olive-400: #878B6C;
  --olive-300: #A6A88B;

  /* --- Warm neutrals: cream / linen / stone --------------- */
  --cream-50:  #FBF8F2;
  --cream-100: #F5F0E7;
  --linen-200: #EEE6D8;
  --stone-300: #E1D7C5;
  --stone-400: #CDBFA8;
  --taupe-500: #AD9F88;
  --taupe-600: #7E7260;

  /* --- Ink (text on light) -------------------------------- */
  --ink-900: #22271F;
  --ink-700: #3B4034;
  --ink-500: #5E6353;

  /* --- Gold / Amber (accent — soft, restrained) ----------- */
  --gold-500: #B5965B;   /* soft gold, primary accent */
  --gold-400: #C7AC7B;
  --amber-500: #BE803F;  /* firelight — sparing use only */

  /* --- Functional (kept muted, no bright UI signals) ------ */
  --success-600: #5A6B4E;
  --danger-600:  #98553F;

  /* ========================================================
     SEMANTIC ALIASES — reach for these in product code
     ======================================================== */

  /* Surfaces */
  --surface-page:        var(--cream-50);
  --surface-raised:      #FFFFFF;
  --surface-sunken:      var(--linen-200);
  --surface-forest:      var(--forest-700);
  --surface-forest-deep: var(--forest-900);
  --surface-olive:       var(--olive-500);

  /* Text */
  --text-primary:    var(--ink-900);
  --text-secondary:  var(--taupe-600);
  --text-muted:      var(--taupe-500);
  --text-on-forest:  var(--cream-100);
  --text-on-forest-muted: rgba(245, 240, 231, 0.62);
  --text-accent:     var(--gold-500);

  /* Lines & borders (hairline, warm) */
  --border-hair:     rgba(34, 39, 31, 0.12);
  --border-soft:     rgba(34, 39, 31, 0.08);
  --border-strong:   rgba(34, 39, 31, 0.24);
  --border-on-forest: rgba(245, 240, 231, 0.16);

  /* Accent roles */
  --accent:          var(--gold-500);
  --accent-quiet:    var(--olive-500);

  /* Overlays / scrims (cinematic image protection) */
  --scrim-forest:    linear-gradient(180deg, rgba(20,27,22,0) 0%, rgba(20,27,22,0.66) 100%); /* @kind other */
  --scrim-soft:      linear-gradient(180deg, rgba(20,27,22,0) 40%, rgba(20,27,22,0.45) 100%); /* @kind other */
}

/* typography */
/* ============================================================
   TYPOGRAPHY — Lov'Inn Kaz Dağları
   Editorial hierarchy. Serif for voice, sans for interface.
   Generous line-height, optical tracking, minimal labels.
   ============================================================ */

:root {
  /* Families */
  --font-serif:      'Cormorant Garamond', 'Marcellus', Georgia, 'Times New Roman', serif;
  --font-serif-alt:  'Marcellus', 'Cormorant Garamond', Georgia, serif;
  --font-sans:       'Jost', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

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

  /* Display / editorial scale (serif) — fluid */
  --text-hero:    clamp(3.25rem, 6vw, 5.75rem);   /* 52–92px */
  --text-display: clamp(2.5rem, 4.5vw, 4rem);     /* 40–64px */
  --text-h1:      clamp(2rem, 3.2vw, 2.75rem);    /* 32–44px */
  --text-h2:      clamp(1.6rem, 2.4vw, 2.1rem);   /* 26–34px */
  --text-h3:      1.5rem;                          /* 24px    */

  /* Body & interface scale (sans) */
  --text-lead:    1.25rem;    /* 20px editorial intro */
  --text-body:    1.0625rem;  /* 17px default body    */
  --text-small:   0.9375rem;  /* 15px                 */
  --text-label:   0.8125rem;  /* 13px UI label        */
  --text-eyebrow: 0.6875rem;  /* 11px overline        */

  /* Line heights */
  --leading-tight:   1.05;   /* hero serif        */
  --leading-snug:    1.18;   /* headlines         */
  --leading-normal:  1.6;    /* body              */
  --leading-relaxed: 1.85;   /* editorial long-form */

  /* Tracking (letter-spacing) */
  --tracking-display: -0.012em;  /* tighten large serif optically */
  --tracking-tight:   -0.006em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-label:   0.16em;    /* tracked UI labels */
  --tracking-eyebrow: 0.28em;    /* overlines / eyebrows */
}

/* spacing */
/* ============================================================
   SPACING — Lov'Inn Kaz Dağları
   4px base. Luxury lives in the large end of the scale —
   every section should breathe.
   ============================================================ */

:root {
  --space-1:  0.25rem;   /* 4   */
  --space-2:  0.5rem;    /* 8   */
  --space-3:  0.75rem;   /* 12  */
  --space-4:  1rem;      /* 16  */
  --space-5:  1.5rem;    /* 24  */
  --space-6:  2rem;      /* 32  */
  --space-7:  3rem;      /* 48  */
  --space-8:  4rem;      /* 64  */
  --space-9:  6rem;      /* 96  */
  --space-10: 8rem;      /* 128 */
  --space-11: 11rem;     /* 176 */

  /* Section rhythm (generous negative space) */
  --section-y:        clamp(5rem, 12vh, 11rem); /* @kind spacing */
  --section-y-tight:  clamp(3.5rem, 8vh, 7rem); /* @kind spacing */

  /* Content measures */
  --measure-prose:    62ch;   /* @kind other */
  --measure-narrow:   42ch;   /* @kind other */
  --content-max:      1240px; /* @kind spacing */
  --content-wide:     1480px; /* @kind spacing */

  /* Gutters */
  --gutter:  clamp(1.25rem, 5vw, 4rem);  /* @kind spacing */
}

/* layout */
/* ============================================================
   LAYOUT & GRID — Lov'Inn Kaz Dağları
   Editorial grid architecture. 12 / 8 / 4 columns, 8px base,
   museum-scale section spacing.
   ============================================================ */

:root {
  /* Column counts (reference values) */
  --grid-cols-desktop: 12; /* @kind other */
  --grid-cols-tablet:  8;  /* @kind other */
  --grid-cols-mobile:  4;  /* @kind other */

  /* Breakpoints (reference values) */
  --bp-mobile:  480px;  /* @kind other */
  --bp-tablet:  768px;  /* @kind other */
  --bp-laptop:  1024px; /* @kind other */
  --bp-desktop: 1280px; /* @kind other */
  --bp-wide:    1440px; /* @kind other */

  /* Containers */
  --container-max:   1440px; /* @kind spacing */
  --container-text:  1080px; /* @kind spacing */
  --container-pad:   clamp(1.25rem, 5vw, 4rem); /* @kind spacing */

  /* Grid gutters */
  --grid-gap:        clamp(16px, 1.6vw, 32px); /* @kind spacing */
  --grid-gap-tight:  16px; /* @kind spacing */

  /* Section spacing — museum scale (160–240px) */
  --section-space:        clamp(7rem, 16vh, 15rem);  /* @kind spacing */
  --section-space-tight:  clamp(4.5rem, 10vh, 8.5rem); /* @kind spacing */

  /* Standard radius (used everywhere unless pill) */
  --radius-standard: 4px; /* @kind radius */
}

/* Reusable grid scaffolds (opt-in utility classes) */
.lk-container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); }
.lk-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--grid-gap); }
@media (max-width: 1024px) { .lk-grid { grid-template-columns: repeat(8, 1fr); } }
@media (max-width: 768px)  { .lk-grid { grid-template-columns: repeat(4, 1fr); } }

/* elevation */
/* ============================================================
   ELEVATION — Lov'Inn Kaz Dağları
   Shadows are soft, warm and low. Radii are small (luxury =
   restraint). Borders are hairlines, not boxes.
   ============================================================ */

:root {
  /* Radii — keep small; nothing pill-shaped except inputs/chips */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-pill: 999px;

  /* Shadows — diffuse, warm-tinted, never harsh */
  --shadow-none:  none;
  --shadow-xs:    0 1px 2px rgba(34, 39, 31, 0.05);
  --shadow-sm:    0 2px 10px rgba(34, 39, 31, 0.06);
  --shadow-md:    0 12px 32px -12px rgba(34, 39, 31, 0.16);
  --shadow-lg:    0 28px 60px -24px rgba(34, 39, 31, 0.22);
  --shadow-float: 0 40px 90px -36px rgba(20, 27, 22, 0.30);

  /* Borders */
  --border-width: 1px;

  /* Texture: subtle linen/paper grain (SVG noise, very faint) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E"); /* @kind other */
}

/* motion */
/* ============================================================
   MOTION — Lov'Inn Kaz Dağları
   Apple-level soft motion. Slow cinematic reveals, gentle
   fades. Nothing bounces; nothing snaps.
   ============================================================ */

:root {
  /* Easing */
  --ease-quiet:   cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-linear:  linear; /* @kind other */

  /* Durations */
  --dur-fast:    180ms; /* @kind other */
  --dur-base:    320ms; /* @kind other */
  --dur-slow:    560ms; /* @kind other */
  --dur-cinema:  900ms; /* @kind other */

  /* Named motion language (the brand's choreography) */
  --dur-hover:      250ms;  /* @kind other */
  --dur-page:       1000ms; /* @kind other */
  --dur-reveal:     900ms;  /* @kind other */
  --reveal-shift:   28px;   /* @kind spacing */
  --parallax-depth: 0.12;   /* @kind other */

  /* Composed transitions */
  --t-hover:  color var(--dur-fast) var(--ease-quiet),
              background-color var(--dur-fast) var(--ease-quiet),
              border-color var(--dur-fast) var(--ease-quiet),
              opacity var(--dur-fast) var(--ease-quiet);
  --t-reveal: opacity var(--dur-cinema) var(--ease-out),
              transform var(--dur-cinema) var(--ease-out);
}