/* GENERATED by frontend/scripts/generate-tokens.cjs — DO NOT EDIT BY HAND.
   Source of truth: frontend/packages/design-system/src/ (regenerate: `yarn --cwd frontend tokens`).

   The shared components (ms-*) of the Rails pages, concatenated from src/css/ in the order of its index.css.
   The React applications import the same sources directly. */
@layer tokens, base, components, pages;

/* ——— src/css/base.css ——— */

/* What every surface of the brand shares under its root (.kl — the Rails pages, .ms-brand — the designer and the
   checkout): headings in the display typeface, the weight of bold text, the colour of a text selection and the focus
   ring, both in the tone. :where() keeps it at zero specificity, so a component or a page decides the rest. */
@layer base {
  :where(.kl, .ms-brand) :where(h1, h2, h3, h4, h5, h6) {
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
  }

  /* Jost is loaded up to 500: a heavier weight would be synthesised. */
  :where(.kl, .ms-brand) :where(strong, b) {
    font-weight: var(--weight-medium);
  }

  :where(.kl, .ms-brand) ::selection {
    background: var(--tone-pale);
    color: var(--ink);
  }

  :where(.kl, .ms-brand) :focus-visible {
    outline: 2px solid var(--tone);
    outline-offset: 3px;
  }
}

/* ——— src/css/button.css ——— */

/* A button: a pill with a label (and an icon). One strong action per view is --primary (the garnet gradient); the
   second is --secondary (glass with a line of the tone); --quiet is the lightest glass, for actions beside a drawing.
   Works on <button> and <a>; a refused one carries disabled or aria-disabled="true", a pending one .is-busy.
   .kl__btn and its variants: names saved content may hold (docs/styl.md, „Nazwy klas”). */
@layer components {
  .ms-button,
  .kl__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px 28px;
    border: 1px solid transparent;
    border-radius: var(--radius-button);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--weight-regular);
    line-height: 1.2;
    letter-spacing: var(--tracking-wide);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition:
      filter var(--duration-base) var(--ease-standard),
      opacity var(--duration-base) var(--ease-standard),
      background var(--duration-base) var(--ease-standard),
      color var(--duration-base) var(--ease-standard),
      border-color var(--duration-base) var(--ease-standard);
  }

  .ms-button--primary,
  .kl__btn--primary {
    border-color: color-mix(in srgb, var(--paper) 18%, transparent);
    color: var(--white);
    background: var(--gradient-action);
    box-shadow: var(--shadow-action);
  }

  .ms-button--secondary,
  .kl__btn--secondary {
    border-color: var(--line-strong);
    color: var(--tone);
    background: var(--glass-fill);
    backdrop-filter: var(--glass-blur-sm);
    -webkit-backdrop-filter: var(--glass-blur-sm);
    box-shadow: var(--highlight), var(--shadow-md);
  }

  .ms-button--quiet {
    border-color: var(--glass-edge);
    color: var(--tone);
    background: var(--glass-tint);
    backdrop-filter: var(--glass-blur-sm);
    -webkit-backdrop-filter: var(--glass-blur-sm);
  }

  .ms-button--small,
  .kl__btn--sm {
    padding: 10px 20px;
    font-size: var(--text-md);
  }

  .ms-button--block,
  .kl__btn--block {
    width: 100%;
  }

  .ms-button:disabled,
  .ms-button[aria-disabled='true'] {
    opacity: 0.45;
    cursor: not-allowed;
  }

  .ms-button.is-busy {
    opacity: 0.72;
    cursor: progress;
  }

  /* Hovers only where a pointer hovers: a tap would leave them stuck on a touch screen. */
  @media (hover: hover) {
    :is(.ms-button--primary, .kl__btn--primary):not(:disabled, [aria-disabled='true']):hover {
      filter: brightness(1.08);
    }

    :is(.ms-button--secondary, .kl__btn--secondary):not(:disabled, [aria-disabled='true']):hover {
      border-color: color-mix(in srgb, var(--tone) 45%, transparent);
      background: var(--glass-tint-strong);
    }

    .ms-button--quiet:not(:disabled, [aria-disabled='true']):hover {
      background: var(--glass-tint-strong);
    }
  }
}

/* ——— src/css/icon-button.css ——— */

/* A round glass button around an icon (the navbar's cart and account, the designer's undo and info). Its diameter is
   --icon-button-size (44 px by default — a touch target); the icon takes the tone. */
@layer components {
  .ms-icon-button {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--icon-button-size, 44px);
    height: var(--icon-button-size, 44px);
    padding: 0;
    border: 1px solid var(--glass-edge);
    border-radius: 50%;
    background: var(--glass-tint);
    backdrop-filter: var(--glass-blur-sm);
    -webkit-backdrop-filter: var(--glass-blur-sm);
    box-shadow: var(--shadow-sm);
    color: var(--tone);
    cursor: pointer;
  }

  .ms-icon-button:disabled,
  .ms-icon-button[aria-disabled='true'] {
    opacity: 0.35;
    cursor: default;
  }
}

/* ——— src/css/link.css ——— */

/* A text link in the tone, underlined in its pale shade, darker on hover. On its own line by default; --inline runs
   with the text around it (its size and line). A <button> dressed as a link drops the button's frame. .kl__link: a
   name saved content may hold (docs/styl.md, „Nazwy klas”). */
@layer components {
  .ms-link,
  .kl__link {
    display: inline-block;
    padding: 0;
    border: 0;
    background: none;
    color: var(--tone);
    font: inherit;
    font-size: var(--text-base);
    text-decoration: underline;
    text-decoration-color: var(--tone-pale);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    cursor: pointer;
    transition:
      color var(--duration-base) var(--ease-standard),
      text-decoration-color var(--duration-base) var(--ease-standard);
  }

  .ms-link--inline {
    display: inline;
    font-size: inherit;
    text-underline-offset: 3px;
  }

  :is(.ms-link, .kl__link):hover {
    color: var(--tone-strong);
    text-decoration-color: currentColor;
  }
}

/* ——— src/css/card.css ——— */

/* A glass card: the panel a page lays its content on (forms, the account, the checkout's lines and summary). Its
   padding belongs to the page, and so may its radius.
   .kl__values-card is such a card in the landing's saved content, so it keeps its name. */
@layer components {
  .ms-card,
  .kl__values-card {
    border: 1px solid var(--glass-edge);
    border-radius: var(--radius-card);
    background: var(--glass-fill);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow-lg);
  }

  /* A card as tall as a document: over the plain white page the blur shows nothing and would cost a layer that
     tall. */
  .ms-card--still {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ——— src/css/panel.css ——— */

/* A glass panel over a photo (the landing's hero caption, the bestseller's name and price): smaller and more opaque
   than a card, so its text reads over the picture. Its padding and position belong to the page.
   .kl__hero-caption is such a panel in the landing's saved content, so it keeps its name. */
@layer components {
  .ms-panel,
  .kl__hero-caption {
    border: 1px solid var(--glass-edge);
    border-radius: var(--radius-panel);
    background: var(--glass-fill-strong);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow-lg);
  }
}

/* ——— src/css/field.css ——— */

/* A form field: its label, the input, a hint and an error, stacked. The input's frame mixes --muted into white, so
   it keeps at least 3:1 against the glass, as a control needs. An invalid input carries aria-invalid="true" (or
   --invalid where the markup cannot). Inputs are 16 px: iOS Safari zooms the page into a smaller focused field. */
@layer components {
  .ms-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
  }

  .ms-field__label {
    font-size: var(--text-md);
    font-weight: var(--weight-medium);
    color: var(--ink);
  }

  .ms-field__optional {
    font-weight: var(--weight-regular);
    color: var(--muted);
  }

  .ms-field__hint,
  .ms-field__error {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--muted);
  }

  .ms-field__error {
    color: var(--error);
  }

  .ms-input {
    box-sizing: border-box;
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--line-control);
    border-radius: var(--radius-field);
    background: var(--glass-tint-strong);
    color: var(--ink);
    font: inherit;
    font-size: var(--text-lg);
    transition:
      border-color var(--duration-fast) var(--ease-standard),
      box-shadow var(--duration-fast) var(--ease-standard),
      background-color var(--duration-fast) var(--ease-standard);
  }

  .ms-input::placeholder {
    color: var(--muted);
  }

  @media (hover: hover) {
    .ms-input:hover {
      border-color: var(--muted);
    }
  }

  .ms-input:focus {
    outline: none;
    border-color: var(--tone);
    background: var(--paper);
    box-shadow: var(--focus-ring);
  }

  .ms-input[aria-invalid='true'],
  .ms-input--invalid {
    border-color: var(--error);
  }

  .ms-input:is([aria-invalid='true'], .ms-input--invalid):focus {
    box-shadow: var(--focus-ring-error);
  }

  .ms-input--multiline {
    min-height: 130px;
    line-height: 1.55;
    resize: vertical;
  }

  .ms-checkbox {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 3px 0 0;
    accent-color: var(--accent);
    cursor: pointer;
  }
}

/* ——— src/css/notice.css ——— */

/* A message in the flow of a page: an optional icon, then its body (a title, text, a list, actions). The variants are
   the soft families of the palette; --compact is a single line under a control. */
@layer components {
  .ms-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--glass-edge);
    border-radius: var(--radius-field);
    background: var(--glass-tint-strong);
    font-size: var(--text-base);
    line-height: 1.55;
    color: var(--ink);
  }

  .ms-notice--compact {
    display: block;
    padding: 10px 14px;
    font-size: var(--text-sm);
    line-height: 1.5;
  }

  .ms-notice__icon {
    display: inline-flex;
    flex: none;
    margin-top: 1px;
  }

  .ms-notice__body {
    min-width: 0;
  }

  .ms-notice__body > * + * {
    margin-top: 6px;
  }

  .ms-notice__title {
    margin: 0;
    font-weight: var(--weight-medium);
  }

  .ms-notice__list {
    margin: 6px 0 0;
    padding-left: 20px;
  }

  .ms-notice__list li + li {
    margin-top: 3px;
  }

  .ms-notice__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
  }

  .ms-notice--success {
    border-color: var(--success-bd);
    background: var(--success-bg);
  }

  .ms-notice--success .ms-notice__icon {
    color: var(--success);
  }

  .ms-notice--info {
    border-color: var(--info-bd);
    background: var(--info-bg);
  }

  .ms-notice--info .ms-notice__icon {
    color: var(--info);
  }

  .ms-notice--warning {
    border-color: var(--warning-bd);
    background: var(--warning-bg);
  }

  .ms-notice--warning .ms-notice__icon {
    color: var(--warning);
  }

  .ms-notice--error {
    border-color: var(--error-bd);
    background: var(--error-bg);
  }

  .ms-notice--error :is(.ms-notice__icon, .ms-notice__title) {
    color: var(--error);
  }
}

/* ——— src/css/badge.css ——— */

/* A state marker in a pill (a verified address, the default address, a sold-out product). kl__badge: names saved
   content may hold (docs/styl.md, „Nazwy klas”). */
@layer components {
  .ms-badge,
  .kl__badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 11px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    line-height: 1.7;
  }

  .ms-badge--small {
    padding: 1px 8px;
    font-size: var(--text-2xs);
    line-height: 1.6;
  }

  .ms-badge--success,
  .kl__badge--available {
    border-color: var(--success-bd);
    background: var(--success-bg);
    color: var(--success);
  }

  .ms-badge--warning,
  .kl__badge--soon {
    border-color: var(--warning-bd);
    background: var(--warning-bg);
    color: var(--warning);
  }

  .ms-badge--danger {
    background: color-mix(in srgb, var(--accent-bright) 8%, var(--white));
    color: var(--accent-bright);
  }
}

/* ——— src/css/chip.css ——— */

/* A glass pill on a photo or a drawing: small garnet capitals. kl__chip: names saved content may hold (docs/styl.md,
   „Nazwy klas”). */
@layer components {
  .ms-chip,
  .kl__chip {
    padding: 4px 10px;
    border: 1px solid var(--glass-edge);
    border-radius: var(--radius-pill);
    background: var(--glass-tint);
    backdrop-filter: var(--glass-blur-sm);
    -webkit-backdrop-filter: var(--glass-blur-sm);
    font-size: var(--text-3xs);
    line-height: normal;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--accent);
  }

  .ms-chip--large,
  .kl__chip--lg {
    padding: 5px 12px;
    font-size: var(--text-2xs);
  }
}

/* ——— src/css/eyebrow.css ——— */

/* The small spaced capitals above a heading or a name, in the tone. .kl__eyebrow: a name saved content may hold
   (docs/styl.md, „Nazwy klas”). */
@layer components {
  .ms-eyebrow,
  .kl__eyebrow {
    margin: 0;
    font-size: var(--text-2xs);
    font-weight: var(--weight-regular);
    line-height: normal;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--tone);
  }
}

/* ——— src/css/title.css ——— */

/* The title of a page (its h1): the serif in capitals at the page size; --narrow for the narrow pages (sign-in, the
   account, an empty cart). The space around it belongs to the page. */
@layer components {
  .ms-title {
    margin: 0;
    font-family: var(--font-serif);
    font-size: var(--heading-page);
    font-weight: var(--weight-bold);
    line-height: 1.05;
    letter-spacing: var(--tracking-title);
    text-transform: uppercase;
    color: var(--ink);
    text-wrap: balance;
  }

  .ms-title--narrow {
    font-size: var(--heading-section);
  }
}

/* ——— src/css/price.css ——— */

/* An amount of money: the display typeface, figures of one width, never broken. Its size belongs to the place. */
@layer components {
  .ms-price {
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  /* A reduced price (an automatic promotion, Pricing::Offers): the regular one crossed out before the new one, smaller
     and quieter, so the eye lands on what the bracelet costs now. */
  .ms-price__regular {
    margin-inline-end: 0.45em;
    font-size: 0.72em;
    color: var(--muted);
    text-decoration: line-through;
  }
  .ms-price__reduced {
    color: var(--accent);
    text-decoration: none;
  }

  /* The Omnibus line under a reduced price: the lowest price of the 30 days before the reduction. Small text, but in
     the body typeface and the readable muted colour — the law wants it seen, not hidden. */
  .ms-price-lowest {
    margin: 4px 0 0;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    line-height: 1.4;
    color: var(--muted);
  }

  /* „W Klubie: 85,00 zł” under the price for a visitor outside the club (ProductsHelper#club_price_teaser): the price a
     member pays, with the Omnibus line under it, as a loyalty price is a reduction too. */
  .ms-price-club {
    display: block;
    margin: 6px 0 0;
    font-size: var(--text-sm);
    color: var(--ink-soft);
  }
  .ms-price-club strong {
    font-family: var(--font-display);
    font-weight: var(--weight-medium);
    font-variant-numeric: tabular-nums;
    color: var(--accent);
    white-space: nowrap;
  }
  .ms-price-club .ms-price-lowest {
    display: block;
  }
}

/* ——— src/css/placeholder.css ——— */

/* The picture of a bracelet without a photo (a catalogue tile, an empty cart): its outline in a pale hairline with one
   garnet bead hanging at the bottom, on sky. --placeholder-ring is the outline's share of the square, --placeholder-bead
   the bead's. */
@layer components {
  .ms-placeholder {
    --placeholder-ring: 44%;
    --placeholder-bead: 6%;

    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-media);
    background: var(--sky);
  }

  .ms-placeholder::before {
    content: '';
    width: var(--placeholder-ring);
    aspect-ratio: 1 / 1;
    border: 1px solid var(--accent-pale);
    border-radius: 50%;
    transition: border-color var(--duration-base) var(--ease-standard);
  }

  /* A ring centred in the square ends (100% − ring) / 2 above its bottom edge. */
  .ms-placeholder::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: calc((100% - var(--placeholder-ring)) / 2);
    width: var(--placeholder-bead);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: var(--accent);
    translate: -50% 50%;
  }
}

/* ——— src/css/visually-hidden.css ——— */

/* Words for assistive technology alone: in the accessibility tree, not drawn. */
@layer components {
  .ms-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}