/* ==========================================================================
   Lombard Centrum Złota – GLOBAL TOKENS
   All colours of the website live here. Change a value once – it changes
   everywhere. Do NOT put hex / rgb colour values in any other file.
   ========================================================================== */

:root {
  /* ---- Base palette ------------------------------------------------------ */
  --color-black:           #0A0A0A;
  --color-black-soft:      #141414;
  --color-black-elevated:  #1F1F1F;

  --color-yellow:          #FFC400;
  --color-yellow-dark:     #E0A800;
  --color-yellow-soft:     #FFF5CC;

  --color-white:           #FFFFFF;

  --color-gray-50:         #F6F6F5;
  --color-gray-100:        #EDEDEB;
  --color-gray-200:        #DEDEDB;
  --color-gray-400:        #A3A39E;
  --color-gray-600:        #62625E;
  --color-gray-800:        #2E2E2B;

  --color-success:         #2E9E5B;

  /* ---- Semantic roles (use these in components) ------------------------- */
  --bg-page:               var(--color-white);
  --bg-alt:                var(--color-gray-50);
  --bg-dark:               var(--color-black);
  --bg-dark-soft:          var(--color-black-soft);
  --bg-dark-elevated:      var(--color-black-elevated);
  --bg-card:               var(--color-white);
  --bg-highlight:          var(--color-yellow-soft);

  --text:                  var(--color-black);
  --text-muted:            var(--color-gray-600);
  --text-on-dark:          var(--color-white);
  --text-on-dark-muted:    var(--color-gray-400);

  --accent:                var(--color-yellow);
  --accent-hover:          var(--color-yellow-dark);
  --accent-contrast:       var(--color-black);   /* text placed on yellow */

  --border:                var(--color-gray-200);
  --border-strong:         var(--color-gray-400);
  --border-dark:           var(--color-gray-800);

  --check:                 var(--color-success);

  /* Translucent tints – derived from the palette above */
  --accent-tint:           color-mix(in srgb, var(--color-yellow) 14%, transparent);
  --overlay-dark:          color-mix(in srgb, var(--color-black) 60%, transparent);
  --shadow-sm:             0 1px 3px color-mix(in srgb, var(--color-black) 10%, transparent);
  --shadow-md:             0 8px 24px color-mix(in srgb, var(--color-black) 10%, transparent);
  --shadow-lg:             0 20px 48px color-mix(in srgb, var(--color-black) 18%, transparent);
  --shadow-accent:         0 8px 24px color-mix(in srgb, var(--color-yellow) 35%, transparent);

  /* ---- Typography -------------------------------------------------------- */
  --font-heading:          "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:             "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-xs:                 0.8125rem;
  --fs-sm:                 0.9375rem;
  --fs-base:               1rem;
  --fs-lg:                 1.125rem;
  --fs-xl:                 1.375rem;
  --fs-h3:                 clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --fs-h2:                 clamp(1.625rem, 1.3rem + 1.4vw, 2.375rem);
  --fs-h1:                 clamp(2rem, 1.5rem + 2.6vw, 3.5rem);

  /* ---- Layout ------------------------------------------------------------ */
  --container:             1200px;
  --gutter:                clamp(16px, 4vw, 32px);
  --section-y:             clamp(56px, 8vw, 104px);
  --radius:                3px;    /* ALL rounded corners on the site */
  --header-h:              76px;
  --transition:            180ms ease;
}

/* ---- Cursors ------------------------------------------------------------- */
body { cursor: default; }
a, button, summary, select, label[for],
input[type="range"], input[type="checkbox"], input[type="radio"],
input[type="submit"], input[type="button"], [role="button"] { cursor: pointer; }
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
textarea { cursor: text; }