/* =============================================================================
 * Quietplugs · Design tokens
 * Source of truth: design-system.json
 * Phase 1 scaffold — kompletna lista tokenów. Zero komponentów, zero @media.
 * ============================================================================= */

:root {
    /* ---- Color · base ---- */
    --c-bg:                 #ffffff;
    --c-ink:                #000000;

    /* ---- Color · ink opacity scale (zastępuje 'szarości') ---- */
    --c-ink-95:             rgba(0, 0, 0, 0.95);
    --c-ink-80:             rgba(0, 0, 0, 0.80);
    --c-ink-65:             rgba(0, 0, 0, 0.65);
    --c-ink-45:             rgba(0, 0, 0, 0.45);
    --c-ink-25:             rgba(0, 0, 0, 0.25);
    --c-ink-12:             rgba(0, 0, 0, 0.12);
    --c-ink-06:             rgba(0, 0, 0, 0.06);
    --c-ink-03:             rgba(0, 0, 0, 0.03);

    /* ---- Color · status (jedyny wyjątek od B&W) ---- */
    --c-success:            #137333;
    --c-error:              #b3261e;

    /* ---- Typography ---- */
    --ff-base:              "Nunito Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

    --fw-light:             300;
    --fw-regular:           400;
    --fw-semibold:          600;
    --fw-bold:              800;

    --fs-xs:                11px;
    --fs-sm:                13px;
    --fs-md:                15px;
    --fs-lg:                18px;
    --fs-xl:                22px;
    --fs-2xl:               28px;
    --fs-3xl:               38px;
    --fs-section:           clamp(38px, 5vw, 64px);
    --fs-display:           clamp(48px, 9vw, 132px);

    --lh-tight:             0.95;
    --lh-snug:              1.1;
    --lh-normal:            1.45;
    --lh-relaxed:           1.6;

    --ls-display:           -0.025em;
    --ls-heading:           -0.015em;
    --ls-body:              0;
    --ls-eyebrow:           0.16em;
    --ls-button:            -0.005em;

    /* ---- Spacing scale (4px base) ---- */
    --s-0:                  0;
    --s-1:                  4px;
    --s-2:                  8px;
    --s-3:                  12px;
    --s-4:                  16px;
    --s-5:                  24px;
    --s-6:                  32px;
    --s-7:                  48px;
    --s-8:                  64px;
    --s-9:                  96px;
    --s-10:                 128px;

    /* ---- Section vertical rhythm ---- */
    --section-py-mobile:    var(--s-7);
    --section-py-tablet:    var(--s-8);
    --section-py-desktop:   var(--s-9);
    --section-py-wide:      var(--s-10);

    /* ---- Container ---- */
    --container-max:        1440px;
    --container-px-mobile:  var(--s-4);
    --container-px-tablet:  var(--s-6);
    --container-px-desktop: var(--s-7);
    --text-max:             640px;

    /* ---- Radius ---- */
    --r-none:               0;
    --r-xs:                 4px;
    --r-sm:                 8px;
    --r-md:                 12px;
    --r-lg:                 20px;
    --r-xl:                 32px;
    --r-pill:               9999px;

    /* ---- Border ---- */
    --bw:                   1px;
    --bw-emphasis:          2px;
    --bc-default:           var(--c-ink-12);
    --bc-emphasis:          var(--c-ink-95);

    /* ---- Shadow ---- */
    --shadow-none:          none;
    --shadow-sm:            0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-md:            0 4px 12px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-lg:            0 12px 32px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);
    --shadow-drawer:        -12px 0 32px rgba(0, 0, 0, 0.10);

    /* ---- Z-index ---- */
    --z-base:               0;
    --z-raised:             10;
    --z-sticky:             100;
    --z-drawer:             200;
    --z-overlay:            250;
    --z-modal:              300;
    --z-toast:              400;

    /* ---- Transition ---- */
    --d-fast:               150ms;
    --d-base:               240ms;
    --d-slow:               400ms;
    --d-pageshift:          600ms;
    --ease:                 cubic-bezier(0.2, 0, 0, 1);
    --ease-emphasized:      cubic-bezier(0.4, 0, 0.2, 1);

    /* ---- Header ---- */
    --header-h-mobile:      60px;
    --header-h-desktop:     72px;

    /* ---- Buttons ---- */
    --btn-h-sm:             38px;
    --btn-h-md:             44px;
    --btn-h-lg:             56px;
    --btn-px-sm:            var(--s-4);
    --btn-px-md:            var(--s-5);
    --btn-px-lg:            var(--s-6);

    /* ---- Forms ---- */
    --input-h:              44px;
    --input-px:             var(--s-4);
    --input-radius:         var(--r-sm);
}