/**
 * natural — colors.css
 * Source: MOCKUP/assets/css/tokens.css (verbatim) + MOCKUP/assets/css/natural.css
 * (Bootstrap 5.3 --bs-* variable mapping + brand token layer). Light theme only —
 * there is intentionally no [data-bs-theme=dark] block.
 */

/**
 * natural — design tokens (The Natural Carpet Company).
 * Same token NAMES as E:/WEBSITES/LIBRARY/tokens/template-tokens.css — values only.
 *
 * LIGHT-FIRST. One theme, no dark mode. Palette sampled from the live
 * naturalcarpetcompany3 site's logo SVG and templates/newline/css/natural.css
 * (brand teal #27B6AF, CTA red #B11117, charcoal #202324) and re-measured for
 * WCAG contrast — the raw brand teal fails text contrast on white (2.50:1),
 * so a darkened AA-safe teal (#1C847F, 4.51:1) carries the "secondary" role
 * for text/buttons; the pure #27B6AF stays reserved for the logo mark and
 * non-text decorative use. See RESEARCH/tools/palette.php for the computation.
 *
 *   #B11117 red       primary — 7.09:1 on white (AA/AAA text + fill)
 *   #8C0D12 red dark  hover / pressed — 9.63:1
 *   #202324 charcoal  headings, dark bands — 15.82:1
 *   #1C847F teal      secondary (AA-safe) — 4.51:1
 *   #585956 steel     secondary text
 *   #F6F8F9 fog       alt sections
 *
 * Banned anywhere: #000000, #6366f1, #800000.
 */

:root {
    --template-primary: #B11117;
    --template-primary-hover: #8C0D12;
    --template-primary-active: #700B0F;
    --template-primary-subtle: #FBE7E7;
    --template-primary-subtle-hover: #FAD9DD;
    --template-primary-border-subtle: #EFACAF;
    --template-primary-text-emphasis: #8C0D12;
    --template-on-primary: #FFFFFF;

    --template-secondary: #1C847F;
    --template-secondary-hover: #15625F;
    --template-accent: #202324;
    --template-accent-hover: #141416;
    --template-bg: #FFFFFF;
    --template-bg-alt: #F6F8F9;
    --template-text: #202324;
    --template-text-body: #3A3D42;
    --template-text-secondary: #585956;
    --template-border: #E2E4E8;
}

/* ============================================================
   THE NATURAL CARPET COMPANY — Color Theme: NATURAL
   Maps Bootstrap 5.3 --bs-* variables and the brand token layer
   onto the natural palette. Swap this file to re-theme the site.
   Light-only: there is no [data-bs-theme=dark] block on purpose.
   Every pair below is contrast-measured (RESEARCH/tools/palette.php).
   ============================================================ */

:root, [data-bs-theme=light] {
    --bs-primary: #B11117;
    --bs-primary-rgb: 177, 17, 23;
    --bs-primary-text-emphasis: #8C0D12;
    --bs-primary-bg-subtle: #FBE7E7;
    --bs-primary-border-subtle: #EFACAF;

    --bs-secondary: #1C847F;
    --bs-secondary-rgb: 28, 132, 127;
    --bs-secondary-text-emphasis: #15625F;
    --bs-secondary-bg-subtle: #E3F6F5;
    --bs-secondary-border-subtle: #A8E2DE;

    --bs-dark: #202324;
    --bs-dark-rgb: 32, 35, 36;
    --bs-light: #F6F8F9;
    --bs-light-rgb: 244, 244, 245;

    --bs-body-font-family: var(--font-body);
    --bs-body-font-size: 1rem;
    --bs-body-color: #3A3D42;
    --bs-body-color-rgb: 58, 61, 66;
    --bs-body-bg: #FFFFFF;
    --bs-emphasis-color: #202324;
    --bs-secondary-color: #585956;
    --bs-secondary-bg: #F6F8F9;
    --bs-tertiary-bg: #F9F9FA;
    --bs-heading-color: #202324;
    --bs-border-color: #E2E4E8;
    --bs-border-color-translucent: rgba(32, 35, 36, .12);
    --bs-border-radius: 4px;
    --bs-border-radius-sm: 3px;
    --bs-border-radius-lg: var(--radius-sm);
    --bs-border-radius-xl: var(--radius-sm);

    --bs-link-color: #B11117;
    --bs-link-color-rgb: 177, 17, 23;
    --bs-link-hover-color: #8C0D12;
    --bs-link-hover-color-rgb: 140, 13, 18;
    --bs-focus-ring-color: rgba(177, 17, 23, .4);

    --bs-success: #1E7A46;
    --bs-success-rgb: 30, 122, 70;
    --bs-success-text-emphasis: #155C34;
    --bs-success-bg-subtle: #E6F4EC;
    --bs-warning: #9A5B00;
    --bs-warning-rgb: 154, 91, 0;
    --bs-danger: #B11117;
    --bs-danger-rgb: 177, 17, 23;
    --bs-info: #1C847F;
    --bs-info-rgb: 28, 132, 127;
}

/* ============================================================
   BRAND DESIGN TOKENS
   ============================================================ */
:root {
    --brand-primary:         var(--template-primary);
    --brand-primary-hover:   var(--template-primary-hover);
    --brand-primary-active:  var(--template-primary-active);
    --brand-primary-subtle:  var(--template-primary-subtle);
    --brand-primary-on-dark: #FF8087;   /* 6.14:1 on #181B24 — red TEXT on dark bands */
    --brand-secondary:       var(--template-secondary);   /* navy */
    --brand-secondary-hover: var(--template-secondary-hover);
    --brand-secondary-subtle:#E3F6F5;
    --brand-charcoal:        #202324;
    --brand-ink:             #181B24;   /* dark bands + footer */
    --brand-ink-2:           #232630;

    --brand-bg:              var(--template-bg);
    --brand-bg-alt:          var(--template-bg-alt);
    --brand-bg-soft:         #F9F9FA;

    --brand-text:            var(--template-text);
    --brand-text-body:       var(--template-text-body);
    --brand-text-secondary:  var(--template-text-secondary);
    --brand-text-on-primary: var(--template-on-primary);
    --brand-text-on-dark:    #FFFFFF;
    --brand-text-on-dark-2:  #B9BEC5;   /* 9.02:1 on ink */

    --brand-border:          var(--template-border);   /* decorative only — 1.27:1 */
    --brand-border-strong:   #8A9099;                  /* 3.22:1 — UI component edges */
    --brand-border-dark:     #3A3D42;

    --color-success:  #1E7A46;
    --color-warning:  #9A5B00;
    --color-danger:   #B11117;
    --color-star:     #B45309;   /* 5.02:1 — stars always ship with a numeric rating */

    --brand-primary-rgb:   177, 17, 23;
    --brand-secondary-rgb: 28, 132, 127;
    --brand-ink-rgb:       24, 27, 36;

    /* Typography — Oswald (display + headings, 500/600/700) and Roboto
       (body) are the two Google Fonts actually loaded on the live
       naturalcarpetcompany3 site — not invented. */
    --font-display: 'Oswald', 'Arial Narrow', Arial, sans-serif;
    --font-heading: 'Oswald', 'Arial Narrow', Arial, sans-serif;
    --font-body:    'Roboto', 'Helvetica Neue', Arial, sans-serif;

    --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-md:1.125rem; --text-lg:1.25rem;
    --text-xl:clamp(1.25rem,1.2vw + .9rem,1.5rem);
    --text-2xl:clamp(1.5rem,1.8vw + .9rem,2rem);
    --text-3xl:clamp(1.875rem,2.6vw + 1rem,2.75rem);
    --text-4xl:clamp(2.25rem,3.6vw + 1rem,3.75rem);
    --text-5xl:clamp(2.75rem,5.4vw + 1rem,5.5rem);

    --tracking-tight:-0.01em; --tracking-wide:.04em; --tracking-widest:.16em;

    --section-py:clamp(3rem,6vw,5.5rem);
    --section-py-sm:clamp(2rem,4vw,3.5rem);

    --radius-sm:3px; --radius-md:4px; --radius-lg:var(--radius-sm);
    --skew: -12deg;

    --shadow-sm:0 1px 2px rgba(20,20,22,.06),0 1px 3px rgba(20,20,22,.08);
    --shadow-md:0 6px 18px rgba(20,20,22,.10),0 2px 6px rgba(20,20,22,.06);
    --shadow-lg:0 18px 40px rgba(20,20,22,.14),0 6px 12px rgba(20,20,22,.08);
    --focus-ring:0 0 0 3px #FFFFFF, 0 0 0 5px #B11117;

    --transition-fast:150ms ease; --transition-base:250ms ease; --transition-slow:450ms ease;
}

/* ============================================================
   BOOTSTRAP COMPONENT SKINS (variables only — markup stays Bootstrap)
   ============================================================ */
.btn {
    --bs-btn-font-family: var(--font-heading);
    --bs-btn-font-weight: 700;
    --bs-btn-padding-x: 1.35rem;
    --bs-btn-padding-y: .65rem;
    --bs-btn-border-radius: var(--radius-sm);
    --bs-btn-border-width: 2px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}
.btn-lg { --bs-btn-padding-x: 2rem; --bs-btn-padding-y: .9rem; --bs-btn-font-size: 1.125rem; }
.btn-sm { --bs-btn-padding-x: .85rem; --bs-btn-padding-y: .4rem; }

.btn-primary {
    --bs-btn-bg: #B11117; --bs-btn-border-color: #B11117; --bs-btn-color: #FFFFFF;
    --bs-btn-hover-bg: #8C0D12; --bs-btn-hover-border-color: #8C0D12; --bs-btn-hover-color: #FFFFFF;
    --bs-btn-active-bg: #700B0F; --bs-btn-active-border-color: #700B0F;
    --bs-btn-disabled-bg: #B11117; --bs-btn-disabled-border-color: #B11117;
    --bs-btn-focus-shadow-rgb: 177, 17, 23;
}
.btn-secondary {
    --bs-btn-bg: #1C847F; --bs-btn-border-color: #1C847F; --bs-btn-color: #FFFFFF;
    --bs-btn-hover-bg: #15625F; --bs-btn-hover-border-color: #15625F; --bs-btn-hover-color: #FFFFFF;
    --bs-btn-active-bg: #0E413E; --bs-btn-active-border-color: #0E413E;
    --bs-btn-focus-shadow-rgb: 28, 132, 127;
}
.btn-dark {
    --bs-btn-bg: #202324; --bs-btn-border-color: #202324;
    --bs-btn-hover-bg: #B11117; --bs-btn-hover-border-color: #B11117;
    --bs-btn-active-bg: #8C0D12; --bs-btn-active-border-color: #8C0D12;
}
.btn-outline-primary {
    --bs-btn-color: #B11117; --bs-btn-border-color: #B11117;
    --bs-btn-hover-bg: #B11117; --bs-btn-hover-border-color: #B11117; --bs-btn-hover-color: #FFFFFF;
    --bs-btn-active-bg: #8C0D12; --bs-btn-active-border-color: #8C0D12;
    --bs-btn-focus-shadow-rgb: 177, 17, 23;
}
.btn-outline-dark {
    --bs-btn-color: #202324; --bs-btn-border-color: #202324;
    --bs-btn-hover-bg: #202324; --bs-btn-hover-border-color: #202324;
}
.btn-outline-light {
    --bs-btn-color: #FFFFFF; --bs-btn-border-color: rgba(255,255,255,.85);
    --bs-btn-hover-bg: #FFFFFF; --bs-btn-hover-color: #202324;
}
.btn-link { text-transform: none; letter-spacing: normal; font-family: var(--font-body); font-weight: 500; }

.form-control, .form-select {
    --bs-border-color: #8A9099;
    border-radius: var(--radius-sm);
    padding: .65rem .9rem;
}
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: #B11117;
    box-shadow: 0 0 0 .2rem rgba(177, 17, 23, .25);
}
.form-check-input { border-color: #8A9099; }
.form-check-input:checked { background-color: #B11117; border-color: #B11117; }
.form-label { font-weight: 500; color: var(--brand-text); }

.badge { font-family: var(--font-heading); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; border-radius: var(--radius-sm); }

.card { --bs-card-border-color: var(--brand-border); --bs-card-border-radius: var(--radius-sm); --bs-card-inner-border-radius: var(--radius-sm); }

.nav-tabs { --bs-nav-tabs-link-active-color: #202324; --bs-nav-tabs-link-active-border-color: #E2E4E8 #E2E4E8 #FFFFFF; }
.nav-pills { --bs-nav-pills-link-active-bg: #B11117; }
.nav-link { color: var(--brand-text); }
.nav-link:hover, .nav-link:focus { color: #B11117; }

.pagination {
    --bs-pagination-color: #202324;
    --bs-pagination-hover-color: #B11117;
    --bs-pagination-focus-color: #B11117;
    --bs-pagination-active-bg: #B11117;
    --bs-pagination-active-border-color: #B11117;
    --bs-pagination-border-color: #E2E4E8;
    font-family: var(--font-heading);
    font-weight: 600;
}

.accordion {
    --bs-accordion-active-color: #202324;
    --bs-accordion-active-bg: #FBE7E7;
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(177, 17, 23, .25);
    --bs-accordion-border-color: #E2E4E8;
}

.breadcrumb { --bs-breadcrumb-divider-color: #8A9099; --bs-breadcrumb-item-active-color: #202324; font-size: var(--text-sm); }

.list-group { --bs-list-group-active-bg: #B11117; --bs-list-group-active-border-color: #B11117; }

.dropdown-menu { --bs-dropdown-link-active-bg: #B11117; --bs-dropdown-border-color: #E2E4E8; --bs-dropdown-border-radius: 0 0 var(--radius-sm) var(--radius-sm); }

.progress { --bs-progress-bar-bg: #B11117; }

.table { --bs-table-color: var(--brand-text-body); }

.text-bg-primary { background-color: #B11117 !important; color: #FFFFFF !important; }
.text-bg-secondary { background-color: #1C847F !important; color: #FFFFFF !important; }
.text-bg-dark { background-color: #202324 !important; color: #FFFFFF !important; }
.bg-dark { background-color: var(--brand-ink) !important; }
.link-primary { color: #B11117 !important; }