/* ============================================================
   MOORE — Design Tokens
   Studio wykończeń premium · Poznań · Karol Derbin
   ------------------------------------------------------------
   Derived from the "Samara" architectural-light system, adjusted
   per client direction:
     • Lighter, fresher palette — NO black backgrounds.
     • Removed Sky Blue + Signal Orange (no vivid accent).
     • CTA = Ink. Single warm accent = Clay (replaces Sky Blue's
       "one point of color" role, but quieter — premium, not loud).
     • Scandinavian / geometric type, generous whitespace.
   Font: Regola isn't free → Plus Jakarta Sans (Manrope fallback).
   ============================================================ */

:root {
  /* ---------- Colors ---------- */
  /* Neutrals — the whole system lives here */
  --color-parchment: #fdfdf7;   /* Primary page background — NEVER pure #fff */
  --color-warm-sand: #f5f2de;   /* Card / panel backgrounds */
  --color-driftwood: #e7e3e1;   /* Secondary button surfaces, dividers */
  --color-ash:       #d3d3d3;   /* Decorative, disabled states */
  --color-stone:     #999999;   /* Subtle borders, placeholder text */
  --color-graphite:  #666666;   /* Secondary text, metadata */
  --color-ink:       #1a1a1a;   /* Headlines + body. Softened from pure #000 */
  --color-pure-white:#ffffff;   /* Text on dark/ink surfaces, button labels */

  /* Accent — Moore's single warm note (replaces Sky Blue) */
  --color-clay:       #b08060;  /* Links, small interactive cues, hover details */
  --color-clay-deep:  #8a6a4f;  /* Hover/active state for clay */

  /* Semantic roles */
  --bg:            var(--color-parchment);
  --surface:       var(--color-warm-sand);
  --text:          var(--color-ink);
  --text-muted:    var(--color-graphite);
  --border:        rgba(26, 26, 26, 0.10);
  --cta-bg:        var(--color-ink);     /* Primary CTA = Ink, white label */
  --cta-text:      var(--color-pure-white);
  --accent:        var(--color-clay);
  --accent-hover:  var(--color-clay-deep);

  /* ---------- Typography ---------- */
  --font-display: 'Plus Jakarta Sans', 'Manrope', ui-sans-serif, system-ui,
                  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body:    var(--font-display);

  /* Weights — headlines stay LIGHT. Size carries authority, not boldness. */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;

  /* Type scale (size / line-height / letter-spacing) */
  --text-caption-sm: 12px;  --leading-caption-sm: 1.5;  --tracking-caption-sm: -0.48px;
  --text-caption:    14px;  --leading-caption:    1.5;  --tracking-caption:    -0.56px;
  --text-body-sm:    16px;  --leading-body-sm:    1.49; --tracking-body-sm:    -0.22px;
  --text-body:       18px;  --leading-body:       1.33; --tracking-body:       -0.18px;
  --text-body-lg:    23px;  --leading-body-lg:    1.25; --tracking-body-lg:    -0.46px;
  --text-subheading: 30px;  --leading-subheading: 1.14; --tracking-subheading: -0.9px;
  --text-heading-sm: 36px;  --leading-heading-sm: 1.1;  --tracking-heading-sm: -0.5px;
  --text-heading:    48px;  --leading-heading:    1.0;  --tracking-heading:    -1.3px;
  --text-heading-lg: 60px;  --leading-heading-lg: 0.96; --tracking-heading-lg: -2.46px;
  --text-display:    96px;  --leading-display:    0.9;  --tracking-display:    -4.51px;

  /* ---------- Spacing ---------- */
  --spacing-5: 5px;   --spacing-6: 6px;   --spacing-8: 8px;   --spacing-9: 9px;
  --spacing-10: 10px; --spacing-12: 12px; --spacing-14: 14px; --spacing-15: 15px;
  --spacing-16: 16px; --spacing-18: 18px; --spacing-24: 24px; --spacing-30: 30px;
  --spacing-32: 32px; --spacing-36: 36px; --spacing-42: 42px; --spacing-54: 54px;
  /* Section rhythm — large vertical gaps define breaks, not lines */
  --section-gap: 120px;
  --section-gap-mobile: 72px;

  /* ---------- Layout ---------- */
  --page-max-width: 1280px;
  --content-max-width: 720px; /* for narrative text columns */

  /* ---------- Border Radius ---------- */
  --radius-sm: 2px;   --radius-md: 6px;   --radius-lg: 9px;
  --radius-xl: 12px;  --radius-2xl: 18px; --radius-3xl: 24px;
  --radius-cards: 12px;
  --radius-pills: 24px;
  --radius-inputs: 12px;
  --radius-buttons: 12px;
  --radius-specialty: 18px;

  /* ---------- Shadows (subtle + short only) ---------- */
  --shadow-subtle: rgba(0, 0, 0, 0.12) 0px 0.5px 2px 0px;
  --shadow-md:     rgba(0, 0, 0, 0.08) 0px 2px 10px 0px;  /* hover */
  --shadow-sm:     rgba(0, 0, 0, 0.20) 0px 2px 4px 0px;   /* elevated card */
  --shadow-sm-2:   rgba(0, 0, 0, 0.12) 0px 2px 4px 0px;
}

/* ============================================================
   Base elements
   ============================================================ */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-weight: var(--weight-light);  /* light, never bold */
  color: var(--text);
}
h1 { font-size: var(--text-heading-lg); line-height: var(--leading-heading-lg); letter-spacing: var(--tracking-heading-lg); }
h2 { font-size: var(--text-heading);    line-height: var(--leading-heading);    letter-spacing: var(--tracking-heading); }
h3 { font-size: var(--text-subheading); line-height: var(--leading-subheading); letter-spacing: var(--tracking-subheading); }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

/* ============================================================
   Components
   ============================================================ */

/* Primary CTA — Ink (replaces Samara Sky Blue) */
.btn-primary {
  background: var(--cta-bg);
  color: var(--cta-text);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  padding: 14px 24px;
  border-radius: var(--radius-buttons);
  border: none;
  cursor: pointer;
}
.btn-primary:hover { box-shadow: var(--shadow-md); }

/* Secondary — ghost pill on driftwood */
.btn-ghost {
  background: rgba(26, 26, 26, 0.04);
  color: var(--text);
  border-radius: var(--radius-pills);
  padding: 12px 22px;
  border: none;
  cursor: pointer;
}

/* Standard card */
.card {
  background: var(--surface);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-sm-2);
  padding: var(--spacing-36);
}

/* Specialty / featured card */
.card-feature {
  background: var(--color-warm-sand);
  border-radius: var(--radius-specialty);
  box-shadow: var(--shadow-subtle);
  padding: var(--spacing-36);
}

/* Text input */
.input {
  background: rgba(26, 26, 26, 0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-inputs);
  padding: 15px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
}
.input::placeholder { color: var(--color-stone); }

/* Section wrapper */
.section {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding-block: var(--section-gap);
}
@media (max-width: 768px) {
  .section { padding-block: var(--section-gap-mobile); }
  h1 { font-size: var(--text-heading-sm); letter-spacing: var(--tracking-heading-sm); }
}