/*
 * Cascade layers, declared once, in this order. Later layers win regardless of
 * specificity, so: reset < tokens < base < components < sections < utilities.
 * Every public stylesheet wraps its rules in one of these layers.
 */
@layer reset, tokens, base, components, sections, utilities;

/* Values copied from docs/design/landing-e/Landing-E.dc.html. */
@layer tokens {
  :root {
    /* Colors */
    --pl-green-950: #12331f;   /* header, footer, art tile, theme-color */
    --pl-green-800: #1c5a34;   /* hero, primary button, summary card */
    --pl-green-300: #b9cdbf;   /* footer muted text, chip border */
    --pl-green-200: #d7e6d9;   /* muted text on green */
    --pl-green-150: #dcebd8;   /* protein tile */
    --pl-green-100: #e7f1e3;   /* #inside background */
    --pl-cream: #f6e3b0;       /* header CTA, price tile, Place order */
    --pl-yellow: #f3d48a;      /* badges, CTA tile */
    --pl-ink: #161513;         /* text, dark tiles, focus ring */
    --pl-paper: #ffffff;
    --pl-sand-50: #f3f2ee;     /* soft fills: stepper rows, inputs, steps */
    --pl-sand-100: #e9e6de;    /* "0" tile */
    --pl-muted: #5c5952;       /* secondary text on white */
    --pl-placeholder: #6b6860;
    --pl-border: #8f8a80;      /* input border */
    --pl-error: #b3261e;

    /* Translucent lines and fills */
    --pl-line-dark: rgba(22, 21, 19, 0.12);      /* dl rows on white */
    --pl-line-light: rgba(255, 255, 255, 0.22);  /* rows on green */
    --pl-header-line: rgba(255, 255, 255, 0.08); /* header bottom border */
    --pl-fill-light: rgba(255, 255, 255, 0.14);  /* nav hover, language pill */
    --pl-fill-light-strong: rgba(255, 255, 255, 0.16); /* summary ± buttons */
    --pl-focus-halo: rgba(22, 21, 19, 0.14);     /* focused input glow */

    /* Radii */
    --pl-r-input: 14px;
    --pl-r-control: 16px;   /* stepper rows, big buttons */
    --pl-r-thumb: 18px;     /* summary product thumb */
    --pl-r-chip: 20px;      /* ingredient chips, steps */
    --pl-r-tile-sm: 22px;   /* hero badge tiles */
    --pl-r-card-sm: 26px;   /* hero order card */
    --pl-r-card: 28px;      /* tiles, cards */
    --pl-r-pill: 999px;

    /* Type */
    --pl-font: "Noto Sans Georgian", system-ui, sans-serif;
    --pl-fs-body: 16px;
    --pl-lh-body: 1.55;
    --pl-fs-h2: clamp(28px, 3.3vw, 42px);

    /* Layout */
    --pl-container: 1216px;
    --pl-gutter: clamp(20px, 4vw, 40px);
    --pl-header-h: 64px;
    --pl-section-y: clamp(56px, 7vw, 96px);
    --pl-scroll-margin: 64px;           /* sections under the sticky header */
    --pl-scroll-margin-checkout: 92px;  /* #checkout */
    --pl-sticky-top: 88px;              /* .pl-sticky summary card */

    /* Motion */
    --pl-ease: 0.15s ease;
  }
}