/* 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, body {
    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;
}