/* Cri-One "bootstrap in Arial" — site-wide type + primitives.
   Loaded alongside cri-palette.css. Bootstrap-scale type ladder,
   Arial family, and a small Bootstrap-esque utility set that any page
   can adopt without pulling actual Bootstrap. */

:root {
    /* Bootstrap-esque type ladder, all Arial */
    --cri-fs-xs:   12px;
    --cri-fs-sm:   13.5px;
    --cri-fs-base: 16px;
    --cri-fs-lg:   18px;
    --cri-fs-xl:   22px;
    --cri-fs-2xl:  28px;
    --cri-fs-3xl:  36px;
    --cri-fs-4xl:  48px;
    --cri-fs-5xl:  64px;

    --cri-lh-tight: 1.15;
    --cri-lh-snug:  1.35;
    --cri-lh-body:  1.6;

    --cri-radius-sm: 4px;
    --cri-radius:    6px;
    --cri-radius-lg: 12px;
    --cri-radius-pill: 999px;

    --cri-shadow-sm: 0 1px 3px rgba(0,0,0,.08);
    --cri-shadow:    0 4px 14px rgba(0,0,0,.10);
    --cri-shadow-lg: 0 12px 36px rgba(0,0,0,.14);

    --cri-space-1: 4px;
    --cri-space-2: 8px;
    --cri-space-3: 12px;
    --cri-space-4: 16px;
    --cri-space-5: 24px;
    --cri-space-6: 32px;
    --cri-space-7: 48px;
    --cri-space-8: 64px;
}

/* ── Global type baseline ────────────────────────────────────────
   Applies gently — doesn't override existing store/channel headings
   that already have specific rules. */
html {
    font-size: var(--cri-fs-base);
}
/* The Magento admin theme sets html{font-size:62.5%} (10px) and builds every
   rem in the backend on it. This file is injected after Magento's own CSS, so
   the 16px root above would win and scale the entire admin UI by 1.6x. Put the
   admin root back. Storefront rendering is unchanged. */
html:has(body[class*='adminhtml-']) {
    font-size: 62.5%;
}
body:not([class*='adminhtml-']) {
    font-family: Arial, Helvetica, sans-serif;
    font-size: var(--cri-fs-base);
    line-height: var(--cri-lh-body);
    color: var(--cri-ink, #0a1e40);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
    font-family: Arial, Helvetica, sans-serif;
    line-height: var(--cri-lh-tight);
    margin: 0 0 var(--cri-space-3);
}
p, li, dd, dt, blockquote {
    line-height: var(--cri-lh-body);
    margin: 0 0 var(--cri-space-3);
}

/* ── Bootstrap-esque utility primitives ──────────────────────────
   Namespaced .cri-* so they don't clash with real Bootstrap if
   somebody loads it too. */
.cri-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--cri-space-4);
}
.cri-container-sm { max-width: 720px; }
.cri-container-md { max-width: 960px; }
.cri-container-lg { max-width: 1200px; }
.cri-container-xl { max-width: 1400px; }

.cri-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cri-space-4);
}
.cri-col      { flex: 1 1 0; min-width: 0; }
.cri-col-auto { flex: 0 0 auto; }
.cri-col-6    { flex: 0 0 calc(50% - var(--cri-space-4) / 2); }
.cri-col-4    { flex: 0 0 calc(33.333% - var(--cri-space-4) * 2 / 3); }
.cri-col-3    { flex: 0 0 calc(25% - var(--cri-space-4) * 3 / 4); }
@media (max-width: 720px) {
    .cri-col-6, .cri-col-4, .cri-col-3 { flex: 1 1 100%; }
}

/* Cards */
.cri-card {
    background: var(--cri-paper, #fff);
    border: 1px solid var(--cri-line, #e5e5e5);
    border-radius: var(--cri-radius);
    padding: var(--cri-space-5);
    box-shadow: none;
    transition: box-shadow .15s ease, transform .1s ease;
}
.cri-card:hover           { box-shadow: var(--cri-shadow-sm); }
.cri-card.cri-lift:hover  { transform: translateY(-1px); box-shadow: var(--cri-shadow); }
.cri-card-body            { padding: var(--cri-space-4); }
.cri-card-title {
    font-size: var(--cri-fs-xl);
    font-weight: 700;
    margin: 0 0 var(--cri-space-2);
    color: var(--cri-ink);
}
.cri-card-sub {
    font-size: var(--cri-fs-sm);
    color: var(--cri-muted-fg, #666);
    margin: 0 0 var(--cri-space-3);
}

/* Buttons */
.cri-btn {
    display: inline-block;
    padding: 10px 22px;
    border: 1px solid transparent;
    border-radius: var(--cri-radius-pill);
    font-family: inherit;
    font-size: var(--cri-fs-base);
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none !important;
    text-align: center;
    transition: background .1s, color .1s, border-color .1s;
    white-space: nowrap;
}
.cri-btn-primary   { background: var(--cri-ink); color: #fff; border-color: var(--cri-ink); }
.cri-btn-primary:hover { background: #142f5c; border-color: #142f5c; color: #fff; }
.cri-btn-outline   { background: transparent; color: var(--cri-ink); border-color: var(--cri-ink); }
.cri-btn-outline:hover { background: var(--cri-ink); color: #fff; }
.cri-btn-accent    { background: var(--cri-terra, #b4592e); color: #fff; border-color: var(--cri-terra, #b4592e); }
.cri-btn-accent:hover { background: #a04f28; border-color: #a04f28; color: #fff; }
.cri-btn-sm { padding: 6px 14px; font-size: var(--cri-fs-sm); }
.cri-btn-lg { padding: 14px 30px; font-size: var(--cri-fs-lg); }

/* Alerts / notices */
.cri-alert {
    padding: var(--cri-space-4);
    border-left: 4px solid var(--cri-slate, #5a6b7a);
    background: var(--cri-slate-bg, #e8ecf0);
    border-radius: var(--cri-radius-sm);
    margin: 0 0 var(--cri-space-4);
}
.cri-alert-info    { border-left-color: var(--cri-slate);   background: var(--cri-slate-bg); }
.cri-alert-warn    { border-left-color: var(--cri-mustard); background: var(--cri-mustard-bg); }
.cri-alert-danger  { border-left-color: var(--cri-terra);   background: var(--cri-terra-bg); }
.cri-alert-success { border-left-color: var(--cri-sage);    background: var(--cri-sage-bg); }

/* Spacing utilities */
.cri-mt-0{margin-top:0}.cri-mt-1{margin-top:var(--cri-space-1)}.cri-mt-2{margin-top:var(--cri-space-2)}.cri-mt-3{margin-top:var(--cri-space-3)}.cri-mt-4{margin-top:var(--cri-space-4)}.cri-mt-5{margin-top:var(--cri-space-5)}.cri-mt-6{margin-top:var(--cri-space-6)}
.cri-mb-0{margin-bottom:0}.cri-mb-1{margin-bottom:var(--cri-space-1)}.cri-mb-2{margin-bottom:var(--cri-space-2)}.cri-mb-3{margin-bottom:var(--cri-space-3)}.cri-mb-4{margin-bottom:var(--cri-space-4)}.cri-mb-5{margin-bottom:var(--cri-space-5)}.cri-mb-6{margin-bottom:var(--cri-space-6)}
.cri-p-2{padding:var(--cri-space-2)}.cri-p-3{padding:var(--cri-space-3)}.cri-p-4{padding:var(--cri-space-4)}.cri-p-5{padding:var(--cri-space-5)}
.cri-py-3{padding-top:var(--cri-space-3);padding-bottom:var(--cri-space-3)}.cri-py-4{padding-top:var(--cri-space-4);padding-bottom:var(--cri-space-4)}.cri-py-5{padding-top:var(--cri-space-5);padding-bottom:var(--cri-space-5)}
.cri-px-3{padding-left:var(--cri-space-3);padding-right:var(--cri-space-3)}.cri-px-4{padding-left:var(--cri-space-4);padding-right:var(--cri-space-4)}

/* Text utilities */
.cri-text-center { text-align: center; }
.cri-text-right  { text-align: right; }
.cri-text-muted  { color: var(--cri-muted-fg); }
.cri-text-lg     { font-size: var(--cri-fs-lg); }
.cri-text-xl     { font-size: var(--cri-fs-xl); }
.cri-text-sm     { font-size: var(--cri-fs-sm); }
.cri-fw-light    { font-weight: 300; }
.cri-fw-normal   { font-weight: 400; }
.cri-fw-bold     { font-weight: 700; }
.cri-lead        { font-size: var(--cri-fs-lg); font-weight: 300; line-height: 1.5; color: var(--cri-muted-fg); }
.cri-display     { font-size: var(--cri-fs-4xl); font-weight: 300; line-height: 1.05; letter-spacing: -.4px; }
.cri-display-lg  { font-size: var(--cri-fs-5xl); font-weight: 300; line-height: 1.02; letter-spacing: -.6px; }

/* Divider */
.cri-hr {
    border: 0;
    border-top: 1px solid var(--cri-line, #e5e5e5);
    margin: var(--cri-space-5) 0;
}

/* Focus ring — accessibility */
.cri-btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible,
a.cri-btn:focus-visible {
    outline: 2px solid var(--cri-terra, #b4592e);
    outline-offset: 2px;
}