/*
 * Velento Shop — Design System layer
 * ---------------------------------------------------------------------------
 * One place for the rules every page shares. Loaded after the page
 * stylesheets and the unified typography so it can settle conflicts between
 * the two token families without touching each page file.
 *
 * Principles (visual hierarchy): scale · contrast · proximity · colour ·
 * typography · whitespace · flow · consistency · focal point · balance.
 *
 * 1. Token roles   2. Legacy aliases   3. Typography rhythm
 * 4. Focus & input accessibility   5. Wayfinding (breadcrumbs)
 * 6. Rhythm & CTA hierarchy   7. Motion   8. Breakpoints (documentation)
 */

/* ---------- 1. Token roles ---------------------------------------------- */
:root {
    /* Brand colour — one gold family instead of five near-identical yellows */
    --brand: #FFC21F;            /* fills, highlights, CTAs on dark */
    --brand-strong: #E5A912;     /* hover / pressed fills */
    --brand-ink: #7A5200;        /* gold used AS TEXT on light bg (≥ 6:1 on white) */
    --on-brand: #1F1F1F;         /* text on brand fills (10:1) — never white on yellow */

    /* Neutral roles */
    --surface-page: var(--vl-page, #fff);
    --surface-card: var(--vl-surface, #fff);
    --surface-soft: var(--vl-soft, #f4f4f4);
    --line: var(--vl-line, #ececec);
    --ink: var(--vl-text, #1f1f1f);
    --ink-muted: #5E5E5E;        /* 6.1:1 on white (was #6E6E6E 5.1:1) */

    /* Status */
    --success: #1E7B3A;
    --danger: #B3261E;

    /* Type scale — fluid, modular (≈1.25) */
    --fs-xs: .8125rem;                                   /* 13 meta, captions */
    --fs-sm: .9375rem;                                   /* 15 secondary body */
    --fs-md: 1rem;                                       /* 16 body */
    --fs-lg: 1.125rem;                                   /* 18 lead, card title */
    --fs-xl: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);     /* 22–28 section title */
    --fs-2xl: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);    /* 28–40 page title */
    --fs-hero: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);     /* 32–52 hero title */
    --lh-body: 1.9;              /* Persian script needs air */
    --lh-heading: 1.35;
    --measure: 68ch;             /* comfortable line length for articles */

    /* Layout */
    --container: 1280px;
    --gutter: clamp(16px, 4vw, 40px);
    --section-gap: clamp(48px, 6vw, 96px);   /* whitespace between page sections */
    --header-offset: 96px;                    /* sticky header + announcement bar */

    /* Interaction */
    --focus-ring: 0 0 0 3px var(--surface-page), 0 0 0 5px var(--brand-strong);
    --tap-min: 44px;
}
[data-theme="dark"] {
    --ink-muted: #B5B5B5;
    --brand-ink: #FFC21F;        /* on dark surfaces the bright gold is the readable one */
    --success: #5BD083;
    --danger: #FF8A80;
}

/* ---------- 2. Legacy aliases (old pages read --accent / --secondary) ---- */
:root {
    --accent: var(--brand-strong);
    --secondary: var(--ink-muted);
}
[data-theme="dark"] { --accent: var(--brand); }

/* ---------- 3. Typography rhythm ---------------------------------------- */
html { scroll-padding-top: var(--header-offset); -webkit-text-size-adjust: 100%; }
body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { text-wrap: balance; }
p, li { text-wrap: pretty; }
img, video, svg { max-width: 100%; }
img { height: auto; }

/* Long-form reading (posts, static pages): one comfortable measure */
.vl-article-body,
.entry-content,
.page-default__content { max-width: var(--measure); margin-inline: auto; }
.vl-article-body a:not([class]),
.entry-content a:not([class]),
.page-default__content a:not([class]) {
    color: var(--brand-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}

/* ---------- 4. Focus & input accessibility ------------------------------ */
:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: 2px solid transparent;      /* keeps the ring visible in forced-colors mode */
    box-shadow: var(--focus-ring);
    border-radius: inherit;
}
:where(a, button, input, select, textarea):focus:not(:focus-visible) { box-shadow: none; }

/* Skip link becomes visible and obvious on focus */
.skip-link.screen-reader-text:focus {
    background: var(--brand); color: var(--on-brand); font-weight: 700;
    padding: 12px 20px; border-radius: 0 0 12px 12px; z-index: 10000;
}

/* iOS zooms any input under 16px — keep every field at 16px on touch screens */
@media (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px; }
    .btn, .vl-btn, .button, button[type="submit"], .vl-chip, .header-icon { min-height: var(--tap-min); }
}

/* ---------- 5. Wayfinding: breadcrumbs on every inner page --------------- */
.vl-crumbs {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px;
    margin-bottom: 26px; font-size: var(--fs-xs); color: var(--ink-muted);
}
.vl-crumbs a { color: inherit; text-decoration: none; }
.vl-crumbs a:hover { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 3px; }
.vl-crumbs [aria-current] { color: var(--ink); font-weight: 600; }
.vl-crumbs [aria-hidden] { opacity: .5; }

/* ---------- 6. Rhythm & CTA hierarchy ----------------------------------- */
/* Exactly one primary action per view: filled brand + dark ink.
   Secondary = outline. Tertiary = text link. White on yellow fails contrast. */
.vl-btn--primary, .hero-cta { background: var(--brand); color: var(--on-brand); }
.vl-btn--primary:hover, .hero-cta:hover { background: var(--brand-strong); color: var(--on-brand); }

/* Muted body copy must stay readable on both themes */
.vl-main :where(.vl-muted, .vl-lead, .vl-shop-lead, .vl-cart-lead) { color: var(--ink-muted); }

/* Sticky header must never cover anchored content */
:target { scroll-margin-top: var(--header-offset); }

/* ---------- 7. Motion ---------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- 8. Breakpoints (single standard; CSS can't read variables here)
   sm 640 · md 820 · lg 1100 — new CSS should use only these three.
   Legacy values (420/480/560/700/780/860/900/980) are consolidated as each
   page file is touched. ------------------------------------------------- */