/* Base of the public pages' styles: the .kl custom properties, the reset and the typography. The kl/ sheets
   are linked in this order in layouts/_head.html.erb — the cascade depends on it. */

/* Styles of the public pages (.kl) — landing, about us, catalogue, product page, contact, legal documents, sign-in,
   account panel. Linked in the shared <head> (app/views/layouts/_head.html.erb), so they reach both layouts, but they
   only apply inside a .kl wrapper (and html:has(.kl)). The React apps have none, except around the public-site
   navbar the designer and the checkout show above themselves (layouts/application_spa.html.erb + spa_site_nav.css).
   Brand tokens (colours/typefaces/radii) come from tokens.css (scoped to .kl and the toast region, generated from
   frontend/packages/design-tokens/src/tokens.ts) — NOT defined HERE; this sheet only derives surfaces from them.

   VISUAL PREMISE (the mockups "Karta produktu 3b" and "Strona główna"): cool morning light. The page sits on a gradient
   from sky blue through blush to white, with a soft blush glow in the top right corner; panels are frosted glass on
   it (white, translucent, a white hairline and a faint garnet shadow); garnet is the one strong accent (the primary
   button, links, markers). Photos keep square corners, controls are pills. Headings, the wordmark and prices: Outfit;
   running text, forms and labels: Jost. The landing mockup is drawn at 1280px (desktop) and 390px (phone); its
   sizes are restated here in rem (px / 16), and where it leaves the line height to the browser, so does this sheet
   (line-height: normal on the navbar, the landing and the footer). */

  .kl {
    /* Page grid of the mockup: a 1280px box with 40px gutters on a desktop (content 1200px), 20px on a phone. */
    --page-max: 1280px;
    --gutter: clamp(20px, 3.2vw, 40px);
    /* Height of the navbar while it covers the top of the window: sticky columns stop under it. A desktop bar scrolls
       away with the page (0); the phone bar (max-width 768px) is sticky and 73px tall with its border. */
    --nav-stuck: 0px;

    /* Surfaces derived from the brand tokens. */
    --atmosphere:
      radial-gradient(900px 500px at 85% 10%, var(--blush-glow) 0%, transparent 70%),
      linear-gradient(180deg, var(--sky) 0%, var(--blush) 55%, var(--paper) 100%);
    /* The landing's gradient: the glow sits higher and the blush comes earlier (the "Strona główna" mockup). */
    --atmosphere-landing:
      radial-gradient(900px 500px at 85% 6%, var(--blush-glow) 0%, transparent 70%),
      linear-gradient(180deg, var(--sky) 0%, var(--blush) 40%, var(--paper) 100%);
    --glass-fill: linear-gradient(135deg, rgb(255 255 255 / .72), rgb(255 255 255 / .38));
    --glass-edge: rgb(255 255 255 / .95);
    --glass-blur: blur(16px);
    --hairline: color-mix(in srgb, var(--accent) 12%, transparent);
    --shadow-glass: 0 16px 36px -26px color-mix(in srgb, var(--accent) 45%, transparent);
    --shadow-float: 0 18px 40px -28px color-mix(in srgb, var(--accent) 50%, transparent);
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);

    font-family: var(--font-sans);
    font-weight: 400;
    color: var(--ink);
    background: var(--paper);
    /* No -webkit-font-smoothing: the mockups render with the system's default smoothing — on macOS "antialiased"
       would draw every stroke thinner than they do. */
    line-height: 1.65;
  }
  .kl * { box-sizing: border-box; }
  .kl ::selection { background: var(--accent-pale); color: var(--ink); }

  /* Smooth scrolling after a click on an in-page anchor. scroll-behavior has to sit on the scrolling element (html),
     not on .kl. prefers-reduced-motion is respected. */
  @media (prefers-reduced-motion: no-preference) {
    html:has(.kl) { scroll-behavior: smooth; }
  }
  /* What the browser scrolls to — an anchor's section, or an element focused with the keyboard — stops a little below
     the top of the window. On a phone the sticky navbar covers the top, so the scrollport starts under it (the phone
     section). Only on the Rails layout: above a React application (.spa-site-nav) the application sets its own scroll
     padding. */
  html:has(> body > .kl:not(.spa-site-nav)) { scroll-padding-top: 24px; }

  /* Short pages (sign-in, contact, a small catalogue) on a tall window: the footer sits at the bottom of the window
     instead of ending above an empty strip. Only the Rails layout; on body, so the development banner above .kl
     counts too. */
  body:has(> .kl:not(.spa-site-nav)) { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
  body > .kl:not(.spa-site-nav) { flex: 1 0 auto; display: flex; flex-direction: column; }
  body > .kl:not(.spa-site-nav) > .kl__footer { margin-top: auto; }

  /* No color:inherit on every link — each <a> has its own colour (brand/nav/btn); inherit would have a higher
     specificity (.kl a) than .kl__btn--* and break the text colour of the buttons. Plain links in running text
     (no class) take the link blue of the mockup. */
  .kl a { text-decoration: none; }
  .kl a:not([class]) { color: var(--link); transition: color .15s ease; }
  .kl a:not([class]):hover { color: var(--link-hover); }
  .kl :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .kl img { max-width: 100%; }
  .kl__wrap { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); }

  /* ——— Typography ——— */

  /* Every heading — also in views without a class of their own (sessions, e-mail change) — gets the display typeface.
     :where() zeroes the specificity, so the .kl__* classes still decide the rest of the style. */
  .kl :where(h1, h2, h3, h4, h5, h6) { font-family: var(--font-display); font-weight: 400; }

  .kl__h2 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1.12;
    letter-spacing: -.01em;
    color: var(--ink);
    margin: 0 0 16px;
  }
  .kl__h3 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.35rem;
    line-height: 1.25;
    color: var(--ink);
    margin: 30px 0 12px;
  }
  /* The small uppercase label of the product page ("O kamieniu"). */
  .kl__eyebrow { margin: 0; font-size: .6875rem; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
  /* The landing's label above a heading ("Nowości"), in the link blue of the mockup. */
  .kl__kicker { margin: 0; font-size: .75rem; line-height: normal; letter-spacing: .2em; text-transform: uppercase; color: var(--link); }