/* =========================================================
   MOVINEST DESIGN SYSTEM
   Elite Editorial Real Estate — Poznań, PL
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

:root {
  /* ---------- BRAND CORE ---------- */
  --mov-slate:          #1C2B3A;   /* Anchor / primary */
  --mov-slate-deep:     #0E1722;   /* Darker shade for overlays */
  --mov-slate-soft:     #2C3D4F;   /* Hover / lifted slate */
  --mov-gold:           #C9A84C;   /* Editorial accent */
  --mov-gold-soft:      #D8BD6E;   /* Lifted gold on hover */
  --mov-gold-deep:      #A88934;   /* Pressed gold */
  --mov-cream:          #F5F0E8;   /* Foundational background */
  --mov-cream-dim:      #EAE3D5;   /* Cards / soft surfaces */
  --mov-white:          #FFFFFF;
  --mov-ink:            #1A1C1C;   /* Body copy on cream */
  --mov-ink-soft:       #44474C;   /* Secondary body / labels */
  --mov-ink-faint:      #8A8E94;   /* Captions / disabled */
  --mov-rule:           #DCD4C2;   /* 1px hairlines (cream-darkened ~10%) */
  --mov-rule-strong:    #C4C6CC;   /* Outline variant */

  /* ---------- SEMANTIC ---------- */
  --mov-success:        #1F6B47;
  --mov-error:          #BA1A1A;
  --mov-error-soft:     #FFDAD6;

  /* ---------- SURFACES (Material-style tiers) ---------- */
  --surface:                       var(--mov-cream);
  --surface-bright:                #FBF7EF;
  --surface-dim:                   #E6DFCF;
  --surface-container-lowest:      var(--mov-white);
  --surface-container-low:         #F1ECE2;
  --surface-container:             #EDE6D8;
  --surface-container-high:        #E5DDCB;
  --surface-container-highest:     #DCD2BC;
  --on-surface:                    var(--mov-ink);
  --on-surface-variant:            var(--mov-ink-soft);
  --inverse-surface:               var(--mov-slate);
  --inverse-on-surface:            var(--mov-cream);

  /* ---------- TYPOGRAPHY: families ---------- */
  --font-serif: 'Playfair Display', 'Times New Roman', Georgia, serif;
  --font-sans:  'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- TYPOGRAPHY: scale tokens ---------- */
  --type-display-lg:    900 64px/1.1   var(--font-serif);  /* hero billboard */
  --type-display-md:    900 48px/1.1   var(--font-serif);
  --type-headline-lg:   900 40px/1.2   var(--font-serif);  /* page H1 */
  --type-headline-md:   700 32px/1.3   var(--font-serif);  /* section title */
  --type-headline-sm:   700 24px/1.35  var(--font-serif);  /* card title */
  --type-body-lg:       400 18px/1.6   var(--font-sans);   /* long-form */
  --type-body-md:       400 16px/1.55  var(--font-sans);   /* default body */
  --type-body-sm:       400 14px/1.5   var(--font-sans);   /* caption */
  --type-label-lg:      700 14px/1.2   var(--font-sans);   /* eyebrows / buttons */
  --type-label-md:      700 12px/1.2   var(--font-sans);   /* small caps labels */

  /* ---------- LETTERSPACING ---------- */
  --tracking-tight:   -0.02em;   /* display serif */
  --tracking-normal:   0;
  --tracking-wide:     0.1em;    /* uppercase labels */
  --tracking-wider:    0.18em;   /* eyebrow tags */
  --tracking-mega:     0.32em;   /* logo wordmark */

  /* ---------- SPACING (8px base) ---------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 120px;   /* desktop section gap */

  /* ---------- LAYOUT ---------- */
  --container-max:        1280px;
  --gutter:               24px;
  --margin-mobile:        20px;
  --margin-desktop:       64px;
  --section-gap-desktop:  120px;
  --section-gap-mobile:   64px;

  /* ---------- RADII (sharp by design) ---------- */
  --radius-sharp: 0px;
  --radius-pill:  999px;   /* used ONLY for status pills / circular icons */

  /* ---------- ELEVATION ---------- */
  /* Ambient — soft, diffused, slate-tinted */
  --shadow-ambient-1: 0 2px 12px rgba(28, 43, 58, 0.05);
  --shadow-ambient-2: 0 8px 28px rgba(28, 43, 58, 0.07);
  --shadow-ambient-3: 0 18px 48px rgba(28, 43, 58, 0.10);
  /* Focus ring — gold */
  --focus-ring: 0 0 0 2px var(--mov-cream), 0 0 0 4px var(--mov-gold);

  /* ---------- BORDERS ---------- */
  --border-hair:      1px solid var(--mov-rule);
  --border-gold:      1px solid var(--mov-gold);
  --border-slate:     1px solid var(--mov-slate);
  --border-slate-50:  1px solid rgba(28, 43, 58, 0.5);

  /* ---------- MOTION ---------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emph:     cubic-bezier(0.3, 0, 0, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;
}

/* =========================================================
   SEMANTIC TYPE — drop-in element styles
   ========================================================= */

html { color: var(--on-surface); background: var(--surface); }
body { font: var(--type-body-md); color: var(--on-surface); margin: 0; -webkit-font-smoothing: antialiased; }

h1, .h1 { font: var(--type-headline-lg); letter-spacing: var(--tracking-tight); color: var(--mov-slate); margin: 0; text-wrap: balance; }
h2, .h2 { font: var(--type-headline-md); letter-spacing: var(--tracking-tight); color: var(--mov-slate); margin: 0; text-wrap: balance; }
h3, .h3 { font: var(--type-headline-sm); color: var(--mov-slate); margin: 0; text-wrap: balance; }

.display { font: var(--type-display-lg); letter-spacing: var(--tracking-tight); color: var(--mov-slate); }
.display-md { font: var(--type-display-md); letter-spacing: var(--tracking-tight); color: var(--mov-slate); }

p, .body { font: var(--type-body-md); color: var(--on-surface-variant); margin: 0; text-wrap: pretty; }
.body-lg { font: var(--type-body-lg); color: var(--on-surface-variant); text-wrap: pretty; }
.body-sm { font: var(--type-body-sm); color: var(--on-surface-variant); }

.eyebrow, .label {
  font: var(--type-label-md);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--mov-slate);
}
.eyebrow-gold {
  font: var(--type-label-md);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--mov-gold);
}
.tag-gold {
  display: inline-block;
  font: var(--type-label-lg);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--mov-slate);
  background: var(--mov-gold);
  padding: 10px 22px;
}
small, .caption { font: var(--type-body-sm); color: var(--mov-ink-faint); }
a { color: var(--mov-slate); text-decoration: underline; text-decoration-color: var(--mov-gold); text-underline-offset: 4px; }
a:hover { color: var(--mov-gold-deep); }

::selection { background: var(--mov-gold); color: var(--mov-slate); }