/* =========================================================================
   DOSPA REALITY — Colors & Type Tokens
   Quiet luxury · warm minimalism · Slovak real estate
   ========================================================================= */

/* ---------- Fonts ---------------------------------------------------------
   The DOSPA wordmark is a custom condensed display sans (geometric, mono-
   weight, all-caps with a flat period). We don't have the original file —
   we substitute Archivo for body/UI and Archivo Narrow for headings, which
   carries the same mono-weight, modern, slightly condensed feel.
   FLAG → ask the user for the original wordmark font if available. */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=Archivo+Narrow:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

:root {
  /* ---------- Brand palette --------------------------------------------- */
  /* Champagne / sand — the signature accent. Used for logo block, gold
     contact bar, accent words ("DOMOVY", "PRÍBEHY"). */
  --champagne:        #C9A98E;   /* primary accent */
  --champagne-soft:   #D8C0A8;   /* lighter, for hover / fills */
  --champagne-deep:   #A88869;   /* hover / pressed / fine borders */
  --champagne-tint:   #F2E9DE;   /* 10–15% wash for surface tints */

  /* Cream — the brand's "white". Use over pure white for warmth. */
  --cream-50:         #FBF8F3;
  --cream-100:        #F5F1EA;   /* default surface */
  --cream-200:        #ECE5D8;   /* card divider, subtle bg */

  /* Near-black — the brand's "ink". Never pure #000. */
  --ink-900:          #0A0A0A;   /* logo, headlines */
  --ink-800:          #1A1A1A;
  --ink-700:          #2A2A2A;
  --ink-600:          #414141;   /* body */
  --ink-500:          #6E6E6E;   /* secondary */
  --ink-400:          #9A9A9A;   /* disabled, captions */
  --ink-300:          #C4C4C4;
  --ink-200:          #E5E5E5;
  --ink-100:          #F2F2F2;
  --ink-0:            #FFFFFF;

  /* Semantic — minimal, only used for app UI (not posters) */
  --success:          #4A7C59;   /* muted moss, in-palette */
  --warning:          #C8A14A;   /* harmonised gold */
  --danger:           #B5483D;   /* terracotta, in-palette */
  --info:             #5B6E7F;   /* warm slate */

  /* ---------- Semantic surface / text ----------------------------------- */
  --bg-page:          var(--cream-100);
  --bg-elevated:      var(--ink-0);
  --bg-sunken:        var(--cream-200);
  --bg-inverse:       var(--ink-900);

  --fg-primary:       var(--ink-900);
  --fg-secondary:     var(--ink-600);
  --fg-tertiary:      var(--ink-500);
  --fg-disabled:      var(--ink-400);
  --fg-inverse:       var(--cream-100);
  --fg-accent:        var(--champagne-deep);

  --border-subtle:    var(--cream-200);
  --border-default:   var(--ink-200);
  --border-strong:    var(--ink-700);
  --border-accent:    var(--champagne);

  /* ---------- Type families --------------------------------------------- */
  --font-display:     'Archivo Narrow', 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:        'Archivo', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:        'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  /* ---------- Type scale ------------------------------------------------ */
  /* Heavily uppercased display + sentence-case body. Tight on display,
     comfortable on body. Letter-spacing is positive on display caps. */
  --fs-display-xl:    clamp(48px, 7vw, 96px);
  --fs-display-lg:    clamp(36px, 5vw, 64px);
  --fs-display-md:    clamp(28px, 3.5vw, 44px);
  --fs-h1:            32px;
  --fs-h2:            24px;
  --fs-h3:            20px;
  --fs-h4:            17px;
  --fs-body-lg:       17px;
  --fs-body:          15px;
  --fs-body-sm:       13px;
  --fs-caption:       11px;
  --fs-micro:         10px;

  --lh-tight:         1.0;
  --lh-display:       1.05;
  --lh-heading:       1.2;
  --lh-body:          1.5;
  --lh-loose:         1.7;

  --ls-display:       0.02em;    /* uppercase display gets slight positive */
  --ls-eyebrow:       0.16em;    /* tracking on tiny eyebrows / labels */
  --ls-body:          0;
  --ls-tight:         -0.01em;

  --fw-regular:       400;
  --fw-medium:        500;
  --fw-semibold:      600;
  --fw-bold:          700;
  --fw-heavy:         800;

  /* ---------- Spacing — 4 / 8 grid, with sand-grain rhythm ------------- */
  --space-0:          0;
  --space-1:          4px;
  --space-2:          8px;
  --space-3:          12px;
  --space-4:          16px;
  --space-5:          20px;
  --space-6:          24px;
  --space-8:          32px;
  --space-10:         40px;
  --space-12:         48px;
  --space-16:         64px;
  --space-20:         80px;
  --space-24:         96px;

  /* ---------- Radius — subtle, never round-bubbly --------------------- */
  --radius-none:      0;
  --radius-xs:        2px;
  --radius-sm:        4px;
  --radius-md:        6px;     /* default control */
  --radius-lg:        10px;    /* cards */
  --radius-xl:        14px;
  --radius-pill:      999px;

  /* ---------- Shadow — quiet, warm, almost imperceptible -------------- */
  --shadow-none:      none;
  --shadow-xs:        0 1px 2px rgba(42, 30, 18, 0.04);
  --shadow-sm:        0 2px 6px rgba(42, 30, 18, 0.06);
  --shadow-md:        0 6px 18px rgba(42, 30, 18, 0.08);
  --shadow-lg:        0 16px 40px rgba(42, 30, 18, 0.10);
  --shadow-xl:        0 28px 80px rgba(42, 30, 18, 0.14);
  --shadow-poster:    0 24px 60px -12px rgba(42, 30, 18, 0.22);
  --shadow-inset:     inset 0 0 0 1px rgba(10, 10, 10, 0.06);

  /* ---------- Motion — calm easing, never bouncy ---------------------- */
  --ease-out:         cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out:      cubic-bezier(0.65, 0, 0.35, 1);
  --dur-instant:      80ms;
  --dur-fast:         140ms;
  --dur-base:         220ms;
  --dur-slow:         400ms;

  /* ---------- Layout --------------------------------------------------- */
  --container-max:    1280px;
  --gutter:           24px;
  --header-h:         64px;
}

/* =========================================================================
   Semantic element styles — drop-in to get the brand voice automatically
   ========================================================================= */

.ds-body, body.ds {
  background: var(--bg-page);
  color: var(--fg-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ds-display-xl,
.ds-display-lg,
.ds-display-md {
  font-family: var(--font-display);
  font-weight: var(--fw-heavy);
  text-transform: uppercase;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  color: var(--fg-primary);
}
.ds-display-xl { font-size: var(--fs-display-xl); }
.ds-display-lg { font-size: var(--fs-display-lg); }
.ds-display-md { font-size: var(--fs-display-md); }

.ds-h1, .ds-h2, .ds-h3, .ds-h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  color: var(--fg-primary);
}
.ds-h1 { font-size: var(--fs-h1); }
.ds-h2 { font-size: var(--fs-h2); }
.ds-h3 { font-size: var(--fs-h3); }
.ds-h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); }

.ds-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--fg-accent);
}

.ds-p, .ds-body-text {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-secondary);
  text-wrap: pretty;
}

.ds-caption {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  color: var(--fg-tertiary);
  letter-spacing: 0.02em;
}

.ds-accent { color: var(--fg-accent); }
.ds-mono   { font-family: var(--font-mono); font-size: var(--fs-body-sm); }

/* The signature "trailing period" used after wordmarks/headlines */
.ds-period { color: var(--fg-accent); }