/* ─────────────────────────────────────────────────────────────────
   Panel Licence — Public theme (v2)

   Loaded last on every public page, so it restyles the whole marketing
   site without touching the markup or the base stylesheets. Everything is
   scoped to .public-body, which every public layout sets on <body>.

   Direction: warm paper background, deep teal as the single brand colour,
   Inter for text, and a dark ink footer to close each page.
   ───────────────────────────────────────────────────────────────── */

/* ── Typeface (bundled, no CDN) ───────────────────────────────── */
@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-Regular.woff2") format("woff2");
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-Medium.woff2") format("woff2");
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-SemiBold.woff2") format("woff2");
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-Bold.woff2") format("woff2");
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-ExtraBold.woff2") format("woff2");
    font-weight: 800; font-style: normal; font-display: swap;
}

/* ── Tokens: light ────────────────────────────────────────────── */
.public-body {
    --pl-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    --pl-bg:            #f7f5f0;
    --pl-surface:       #ffffff;
    --pl-surface-alt:   #f1eee6;
    --pl-border:        #e6e1d5;
    --pl-border-strong: #cfc8b6;
    --pl-text:          #161a22;
    --pl-text-muted:    #5b6472;
    --pl-text-faint:    #8a909b;

    --pl-primary:        #0f766e;
    --pl-primary-hover:  #0b5e58;
    --pl-primary-soft:   #e3f2f0;
    --pl-accent:         #b45309;

    --pl-success:      #15803d;
    --pl-success-soft: #e7f6ec;
    --pl-warning:      #b45309;
    --pl-warning-soft: #fbf1e3;
    --pl-danger:       #b42318;
    --pl-danger-soft:  #fdecea;
    --pl-info:         #1d4ed8;
    --pl-info-soft:    #e9f0fd;

    --pl-radius:    14px;
    --pl-radius-sm: 9px;
    --pl-radius-lg: 20px;

    --pl-shadow-sm: 0 1px 2px rgba(22, 26, 34, .05);
    --pl-shadow:    0 6px 20px rgba(22, 26, 34, .07);
    --pl-shadow-lg: 0 18px 44px rgba(22, 26, 34, .12);

    background: var(--pl-bg);
    color: var(--pl-text);
    font-family: var(--pl-font);
    font-feature-settings: "cv11", "ss01";
    -webkit-font-smoothing: antialiased;
}

/* ── Tokens: dark (follows the site toggle) ───────────────────── */
[data-theme="dark"] .public-body {
    --pl-bg:            #0d1117;
    --pl-surface:       #151b24;
    --pl-surface-alt:   #1b2330;
    --pl-border:        #263041;
    --pl-border-strong: #364259;
    --pl-text:          #eef1f6;
    --pl-text-muted:    #9aa5b8;
    --pl-text-faint:    #6e7a8e;

    --pl-primary:        #2dd4bf;
    --pl-primary-hover:  #5eead4;
    --pl-primary-soft:   #12302d;
    --pl-accent:         #fbbf24;

    --pl-success-soft: #112a1d;
    --pl-warning-soft: #2b2113;
    --pl-danger-soft:  #2c1517;
    --pl-info-soft:    #132340;
}

/* ── Typography ───────────────────────────────────────────────── */
.public-body h1,
.public-body h2,
.public-body h3 {
    font-family: var(--pl-font);
    letter-spacing: -.02em;
    line-height: 1.12;
}
.public-body h1 { font-weight: 800; }
.public-body h2 { font-weight: 750; }
.public-body h3 { font-weight: 650; letter-spacing: -.01em; }
.public-body p  { line-height: 1.65; }

/* Keep the body text readable on warm paper. */
.public-body .page-lead {
    font-size: 1.08rem;
    color: var(--pl-text-muted);
}

/* ── Header ───────────────────────────────────────────────────── */
.public-header {
    background: color-mix(in srgb, var(--pl-surface) 92%, transparent);
    backdrop-filter: saturate(160%) blur(10px);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid var(--pl-border);
}
.public-header .header-inner { height: 72px; }

.public-brand { font-weight: 800; letter-spacing: -.01em; }
.public-brand .brand-mark {
    background: var(--pl-primary);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(15, 118, 110, .28);
}

.public-nav a {
    font-weight: 600;
    color: var(--pl-text-muted);
    border-radius: 999px;
    padding: 8px 14px;
}
.public-nav a.is-active {
    color: var(--pl-text);
    background: var(--pl-surface-alt);
}
.public-nav a:hover { background: var(--pl-surface-alt); color: var(--pl-text); }

/* ── Page heroes (every inner page) ───────────────────────────── */
.public-body .page-hero,
.public-body .page-hero-sm {
    position: relative;
    background:
        radial-gradient(900px 260px at 92% -20%, color-mix(in srgb, var(--pl-primary) 14%, transparent), transparent 70%),
        var(--pl-surface);
    border-bottom: 1px solid var(--pl-border);
    padding: 64px 0 52px;
}
.public-body .page-hero-sm { padding: 48px 0 40px; }
.public-body .page-hero h1 {
    font-size: clamp(2rem, 3.2vw, 2.7rem);
    margin-bottom: 14px;
    max-width: 22ch;
}
.public-body .page-hero .page-lead { max-width: 62ch; }

/* Breadcrumb: quieter and aligned with the heading. */
.public-body .breadcrumbs {
    font-size: .8rem;
    color: var(--pl-text-faint);
    margin-bottom: 14px;
}

/* ── Cards ────────────────────────────────────────────────────── */
.public-body .card,
.public-body .product-card,
.public-body .empty-state {
    border-radius: var(--pl-radius-lg);
    border-color: var(--pl-border);
    box-shadow: var(--pl-shadow-sm);
    transition: transform var(--pl-transition), box-shadow var(--pl-transition), border-color var(--pl-transition);
}
.public-body .product-card:hover,
.public-body .card.is-linked:hover {
    transform: translateY(-2px);
    box-shadow: var(--pl-shadow);
    border-color: var(--pl-border-strong);
}
.public-body .card-head { background: transparent; }

/* ── Buttons ──────────────────────────────────────────────────── */
.public-body .btn {
    border-radius: 11px;
    font-weight: 650;
    letter-spacing: -.005em;
}
.public-body .btn-primary {
    background: var(--pl-primary);
    box-shadow: 0 1px 2px rgba(15, 118, 110, .25), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.public-body .btn-primary:hover { background: var(--pl-primary-hover); }
.public-body .btn-outline {
    background: var(--pl-surface);
    border-color: var(--pl-border-strong);
    color: var(--pl-text);
}

/* ── Badges and chips ─────────────────────────────────────────── */
.public-body .badge,
.public-body .product-category,
.public-body .hero-tag {
    border-radius: 999px;
    font-weight: 650;
    letter-spacing: .01em;
}

/* ── Products & pricing ───────────────────────────────────────── */
.public-body .product-card-media {
    background: linear-gradient(160deg, var(--pl-primary-soft), var(--pl-surface-alt));
}
.public-body .price-now {
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--pl-text);
}

/* ── Home hero ────────────────────────────────────────────────── */
.public-body .hero h1 {
    font-size: clamp(2.1rem, 3.6vw, 3rem);
    max-width: 18ch;
    letter-spacing: -.03em;
}
.public-body .hero-lead { max-width: 52ch; }

/* ── Forms ────────────────────────────────────────────────────── */
/* Catalogue search and sort controls are plain inputs, styled to match. */
.public-body .input-with-icon { position: relative; }
.public-body .input-with-icon > svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--pl-text-faint);
    pointer-events: none;
}
.public-body .input-with-icon input[type="search"] { padding-left: 38px; }
.public-body input[type="search"],
.public-body .sort-form select,
.public-body .search-form input {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--pl-border-strong);
    border-radius: 11px;
    background: var(--pl-surface);
    color: var(--pl-text);
    font: inherit;
    font-size: .92rem;
}
.public-body input[type="search"]:focus,
.public-body .sort-form select:focus {
    border-color: var(--pl-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--pl-primary) 18%, transparent);
    outline: none;
}
.public-body .sort-form select { width: auto; min-width: 180px; cursor: pointer; }
.public-body .catalogue-sidebar .filter-block {
    border-radius: var(--pl-radius-lg);
    background: var(--pl-surface);
    border: 1px solid var(--pl-border);
    padding: 18px;
}
.public-body .input,
.public-body .select,
.public-body .textarea {
    border-radius: 11px;
    background: var(--pl-surface);
    border-color: var(--pl-border-strong);
}
.public-body .input:focus,
.public-body .select:focus,
.public-body .textarea:focus {
    border-color: var(--pl-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--pl-primary) 18%, transparent);
    outline: none;
}

/* ── Legal and document text ──────────────────────────────────── */
.public-body .legal-content {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--pl-text);
}

/* ── Footer: dark ink band to close every page ────────────────── */
.public-body .public-footer {
    background: #161a22;
    color: #c9cfdb;
    border-top: 0;
    padding-top: 56px;
}
[data-theme="dark"] .public-body .public-footer {
    background: #0a0d12;
    border-top: 1px solid var(--pl-border);
}
.public-body .public-footer h4 {
    color: #ffffff;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
}
.public-body .public-footer a { color: #aab3c4; }
.public-body .public-footer a:hover { color: #ffffff; text-decoration: none; }
.public-body .public-footer .footer-brand p,
.public-body .public-footer .footer-col li { color: #9aa3b5; }
.public-body .public-footer .public-brand { color: #ffffff; }
.public-body .public-footer .public-brand .brand-mark { background: var(--pl-primary); }

/* ── Motion and focus ─────────────────────────────────────────── */
.public-body a:focus-visible,
.public-body button:focus-visible {
    outline: 2px solid var(--pl-primary);
    outline-offset: 2px;
    border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
    .public-body * { transition: none !important; }
}