/*
- ALO Elements: Preset color classes
- Each preset class sets CSS variables used by component stylesheets.
*/

.alo-accent-blue,
.alo-btn--bg-blue {
    --alo-accent-color: #2563eb;
    --alo-btn-bg: #2563eb;
    --alo-listing-accent-color: #2563eb;
    --alo-heading-border-color: #2563eb;
    --alo-heading-accent-color: #2563eb;
    --alo-heading-title-color: #2563eb;
    --alo-heading-icon-color: #2563eb;
    --alo-callout-border-color: #2563eb;
    --alo-callout-icon-color: #2563eb;
    --alo-callout-title-color: #2563eb;
}

.alo-accent-green,
.alo-btn--bg-green {
    --alo-accent-color: #16a34a;
    --alo-btn-bg: #16a34a;
    --alo-listing-accent-color: #16a34a;
    --alo-heading-border-color: #16a34a;
    --alo-heading-accent-color: #16a34a;
    --alo-heading-title-color: #16a34a;
    --alo-heading-icon-color: #16a34a;
    --alo-callout-border-color: #16a34a;
    --alo-callout-icon-color: #16a34a;
    --alo-callout-title-color: #16a34a;
}

.alo-accent-orange,
.alo-btn--bg-orange {
    --alo-accent-color: #ea580c;
    --alo-btn-bg: #ea580c;
    --alo-listing-accent-color: #ea580c;
    --alo-heading-border-color: #ea580c;
    --alo-heading-accent-color: #ea580c;
    --alo-heading-title-color: #ea580c;
    --alo-heading-icon-color: #ea580c;
    --alo-callout-border-color: #ea580c;
    --alo-callout-icon-color: #ea580c;
    --alo-callout-title-color: #ea580c;
}

.alo-accent-red,
.alo-btn--bg-red {
    --alo-accent-color: #dc2626;
    --alo-btn-bg: #dc2626;
    --alo-listing-accent-color: #dc2626;
    --alo-heading-border-color: #dc2626;
    --alo-heading-accent-color: #dc2626;
    --alo-heading-title-color: #dc2626;
    --alo-heading-icon-color: #dc2626;
    --alo-callout-border-color: #dc2626;
    --alo-callout-icon-color: #dc2626;
    --alo-callout-title-color: #dc2626;
}

.alo-accent-purple,
.alo-btn--bg-purple {
    --alo-accent-color: #7c3aed;
    --alo-btn-bg: #7c3aed;
    --alo-listing-accent-color: #7c3aed;
    --alo-heading-border-color: #7c3aed;
    --alo-heading-accent-color: #7c3aed;
    --alo-heading-title-color: #7c3aed;
    --alo-heading-icon-color: #7c3aed;
    --alo-callout-border-color: #7c3aed;
    --alo-callout-icon-color: #7c3aed;
    --alo-callout-title-color: #7c3aed;
}

.alo-accent-teal,
.alo-btn--bg-teal {
    --alo-accent-color: #0d9488;
    --alo-btn-bg: #0d9488;
    --alo-listing-accent-color: #0d9488;
    --alo-heading-border-color: #0d9488;
    --alo-heading-accent-color: #0d9488;
    --alo-heading-title-color: #0d9488;
    --alo-heading-icon-color: #0d9488;
    --alo-callout-border-color: #0d9488;
    --alo-callout-icon-color: #0d9488;
    --alo-callout-title-color: #0d9488;
}

.alo-accent-dark_gray,
.alo-btn--bg-dark_gray {
    --alo-accent-color: #374151;
    --alo-btn-bg: #374151;
    --alo-listing-accent-color: #374151;
    --alo-heading-border-color: #374151;
    --alo-heading-accent-color: #374151;
    --alo-heading-title-color: #374151;
    --alo-heading-icon-color: #374151;
    --alo-callout-border-color: #374151;
    --alo-callout-icon-color: #374151;
    --alo-callout-title-color: #374151;
}

.alo-accent-gray,
.alo-btn--bg-gray {
    --alo-accent-color: #6b7280;
    --alo-btn-bg: #6b7280;
    --alo-listing-accent-color: #6b7280;
    --alo-heading-border-color: #6b7280;
    --alo-heading-accent-color: #6b7280;
    --alo-heading-title-color: #6b7280;
    --alo-heading-icon-color: #6b7280;
    --alo-callout-border-color: #6b7280;
    --alo-callout-icon-color: #6b7280;
    --alo-callout-title-color: #6b7280;
}

/* Showcase object-fit utilities */
.alo-showcase--objectfit-contain { --alo-showcase-object-fit: contain; }
.alo-showcase--objectfit-fill    { --alo-showcase-object-fit: fill; }
.alo-showcase--objectfit-cover   { --alo-showcase-object-fit: cover; }

/* Showcase visible-count utilities (1..10) */
.alo-showcase--visible-1 { --alo-showcase-visible-count: 1; }
.alo-showcase--visible-2 { --alo-showcase-visible-count: 2; }
.alo-showcase--visible-3 { --alo-showcase-visible-count: 3; }
.alo-showcase--visible-4 { --alo-showcase-visible-count: 4; }
.alo-showcase--visible-5 { --alo-showcase-visible-count: 5; }
.alo-showcase--visible-6 { --alo-showcase-visible-count: 6; }
.alo-showcase--visible-7 { --alo-showcase-visible-count: 7; }
.alo-showcase--visible-8 { --alo-showcase-visible-count: 8; }
.alo-showcase--visible-9 { --alo-showcase-visible-count: 9; }
.alo-showcase--visible-10 { --alo-showcase-visible-count: 10; }

/* Showcase gap utilities (0..50 px) */
.alo-showcase--gap-0  { --alo-showcase-gap: 0px; }
.alo-showcase--gap-1  { --alo-showcase-gap: 1px; }
.alo-showcase--gap-2  { --alo-showcase-gap: 2px; }
.alo-showcase--gap-3  { --alo-showcase-gap: 3px; }
.alo-showcase--gap-4  { --alo-showcase-gap: 4px; }
.alo-showcase--gap-5  { --alo-showcase-gap: 5px; }
.alo-showcase--gap-6  { --alo-showcase-gap: 6px; }
.alo-showcase--gap-7  { --alo-showcase-gap: 7px; }
.alo-showcase--gap-8  { --alo-showcase-gap: 8px; }
.alo-showcase--gap-9  { --alo-showcase-gap: 9px; }
.alo-showcase--gap-10 { --alo-showcase-gap: 10px; }
.alo-showcase--gap-11 { --alo-showcase-gap: 11px; }
.alo-showcase--gap-12 { --alo-showcase-gap: 12px; }
.alo-showcase--gap-13 { --alo-showcase-gap: 13px; }
.alo-showcase--gap-14 { --alo-showcase-gap: 14px; }
.alo-showcase--gap-15 { --alo-showcase-gap: 15px; }
.alo-showcase--gap-16 { --alo-showcase-gap: 16px; }
.alo-showcase--gap-17 { --alo-showcase-gap: 17px; }
.alo-showcase--gap-18 { --alo-showcase-gap: 18px; }
.alo-showcase--gap-19 { --alo-showcase-gap: 19px; }
.alo-showcase--gap-20 { --alo-showcase-gap: 20px; }
.alo-showcase--gap-21 { --alo-showcase-gap: 21px; }
.alo-showcase--gap-22 { --alo-showcase-gap: 22px; }
.alo-showcase--gap-23 { --alo-showcase-gap: 23px; }
.alo-showcase--gap-24 { --alo-showcase-gap: 24px; }
.alo-showcase--gap-25 { --alo-showcase-gap: 25px; }
.alo-showcase--gap-26 { --alo-showcase-gap: 26px; }
.alo-showcase--gap-27 { --alo-showcase-gap: 27px; }
.alo-showcase--gap-28 { --alo-showcase-gap: 28px; }
.alo-showcase--gap-29 { --alo-showcase-gap: 29px; }
.alo-showcase--gap-30 { --alo-showcase-gap: 30px; }
.alo-showcase--gap-31 { --alo-showcase-gap: 31px; }
.alo-showcase--gap-32 { --alo-showcase-gap: 32px; }
.alo-showcase--gap-33 { --alo-showcase-gap: 33px; }
.alo-showcase--gap-34 { --alo-showcase-gap: 34px; }
.alo-showcase--gap-35 { --alo-showcase-gap: 35px; }
.alo-showcase--gap-36 { --alo-showcase-gap: 36px; }
.alo-showcase--gap-37 { --alo-showcase-gap: 37px; }
.alo-showcase--gap-38 { --alo-showcase-gap: 38px; }
.alo-showcase--gap-39 { --alo-showcase-gap: 39px; }
.alo-showcase--gap-40 { --alo-showcase-gap: 40px; }
.alo-showcase--gap-41 { --alo-showcase-gap: 41px; }
.alo-showcase--gap-42 { --alo-showcase-gap: 42px; }
.alo-showcase--gap-43 { --alo-showcase-gap: 43px; }
.alo-showcase--gap-44 { --alo-showcase-gap: 44px; }
.alo-showcase--gap-45 { --alo-showcase-gap: 45px; }
.alo-showcase--gap-46 { --alo-showcase-gap: 46px; }
.alo-showcase--gap-47 { --alo-showcase-gap: 47px; }
.alo-showcase--gap-48 { --alo-showcase-gap: 48px; }
.alo-showcase--gap-49 { --alo-showcase-gap: 49px; }
.alo-showcase--gap-50 { --alo-showcase-gap: 50px; }

/* Listing font-size utilities (10..100 px) */
.alo-listing--fs-10 { --alo-listing-font-size: 10px; }
.alo-listing--fs-11 { --alo-listing-font-size: 11px; }
.alo-listing--fs-12 { --alo-listing-font-size: 12px; }
.alo-listing--fs-13 { --alo-listing-font-size: 13px; }
.alo-listing--fs-14 { --alo-listing-font-size: 14px; }
.alo-listing--fs-15 { --alo-listing-font-size: 15px; }
.alo-listing--fs-16 { --alo-listing-font-size: 16px; }
.alo-listing--fs-17 { --alo-listing-font-size: 17px; }
.alo-listing--fs-18 { --alo-listing-font-size: 18px; }
.alo-listing--fs-19 { --alo-listing-font-size: 19px; }
.alo-listing--fs-20 { --alo-listing-font-size: 20px; }
.alo-listing--fs-21 { --alo-listing-font-size: 21px; }
.alo-listing--fs-22 { --alo-listing-font-size: 22px; }
.alo-listing--fs-23 { --alo-listing-font-size: 23px; }
.alo-listing--fs-24 { --alo-listing-font-size: 24px; }
.alo-listing--fs-25 { --alo-listing-font-size: 25px; }
.alo-listing--fs-26 { --alo-listing-font-size: 26px; }
.alo-listing--fs-27 { --alo-listing-font-size: 27px; }
.alo-listing--fs-28 { --alo-listing-font-size: 28px; }
.alo-listing--fs-29 { --alo-listing-font-size: 29px; }
.alo-listing--fs-30 { --alo-listing-font-size: 30px; }
.alo-listing--fs-31 { --alo-listing-font-size: 31px; }
.alo-listing--fs-32 { --alo-listing-font-size: 32px; }
.alo-listing--fs-33 { --alo-listing-font-size: 33px; }
.alo-listing--fs-34 { --alo-listing-font-size: 34px; }
.alo-listing--fs-35 { --alo-listing-font-size: 35px; }
.alo-listing--fs-36 { --alo-listing-font-size: 36px; }
.alo-listing--fs-37 { --alo-listing-font-size: 37px; }
.alo-listing--fs-38 { --alo-listing-font-size: 38px; }
.alo-listing--fs-39 { --alo-listing-font-size: 39px; }
.alo-listing--fs-40 { --alo-listing-font-size: 40px; }
.alo-listing--fs-41 { --alo-listing-font-size: 41px; }
.alo-listing--fs-42 { --alo-listing-font-size: 42px; }
.alo-listing--fs-43 { --alo-listing-font-size: 43px; }
.alo-listing--fs-44 { --alo-listing-font-size: 44px; }
.alo-listing--fs-45 { --alo-listing-font-size: 45px; }
.alo-listing--fs-46 { --alo-listing-font-size: 46px; }
.alo-listing--fs-47 { --alo-listing-font-size: 47px; }
.alo-listing--fs-48 { --alo-listing-font-size: 48px; }
.alo-listing--fs-49 { --alo-listing-font-size: 49px; }
.alo-listing--fs-50 { --alo-listing-font-size: 50px; }
.alo-listing--fs-51 { --alo-listing-font-size: 51px; }
.alo-listing--fs-52 { --alo-listing-font-size: 52px; }
.alo-listing--fs-53 { --alo-listing-font-size: 53px; }
.alo-listing--fs-54 { --alo-listing-font-size: 54px; }
.alo-listing--fs-55 { --alo-listing-font-size: 55px; }
.alo-listing--fs-56 { --alo-listing-font-size: 56px; }
.alo-listing--fs-57 { --alo-listing-font-size: 57px; }
.alo-listing--fs-58 { --alo-listing-font-size: 58px; }
.alo-listing--fs-59 { --alo-listing-font-size: 59px; }
.alo-listing--fs-60 { --alo-listing-font-size: 60px; }
.alo-listing--fs-61 { --alo-listing-font-size: 61px; }
.alo-listing--fs-62 { --alo-listing-font-size: 62px; }
.alo-listing--fs-63 { --alo-listing-font-size: 63px; }
.alo-listing--fs-64 { --alo-listing-font-size: 64px; }
.alo-listing--fs-65 { --alo-listing-font-size: 65px; }
.alo-listing--fs-66 { --alo-listing-font-size: 66px; }
.alo-listing--fs-67 { --alo-listing-font-size: 67px; }
.alo-listing--fs-68 { --alo-listing-font-size: 68px; }
.alo-listing--fs-69 { --alo-listing-font-size: 69px; }
.alo-listing--fs-70 { --alo-listing-font-size: 70px; }
.alo-listing--fs-71 { --alo-listing-font-size: 71px; }
.alo-listing--fs-72 { --alo-listing-font-size: 72px; }
.alo-listing--fs-73 { --alo-listing-font-size: 73px; }
.alo-listing--fs-74 { --alo-listing-font-size: 74px; }
.alo-listing--fs-75 { --alo-listing-font-size: 75px; }
.alo-listing--fs-76 { --alo-listing-font-size: 76px; }
.alo-listing--fs-77 { --alo-listing-font-size: 77px; }
.alo-listing--fs-78 { --alo-listing-font-size: 78px; }
.alo-listing--fs-79 { --alo-listing-font-size: 79px; }
.alo-listing--fs-80 { --alo-listing-font-size: 80px; }
.alo-listing--fs-81 { --alo-listing-font-size: 81px; }
.alo-listing--fs-82 { --alo-listing-font-size: 82px; }
.alo-listing--fs-83 { --alo-listing-font-size: 83px; }
.alo-listing--fs-84 { --alo-listing-font-size: 84px; }
.alo-listing--fs-85 { --alo-listing-font-size: 85px; }
.alo-listing--fs-86 { --alo-listing-font-size: 86px; }
.alo-listing--fs-87 { --alo-listing-font-size: 87px; }
.alo-listing--fs-88 { --alo-listing-font-size: 88px; }
.alo-listing--fs-89 { --alo-listing-font-size: 89px; }
.alo-listing--fs-90 { --alo-listing-font-size: 90px; }
.alo-listing--fs-91 { --alo-listing-font-size: 91px; }
.alo-listing--fs-92 { --alo-listing-font-size: 92px; }
.alo-listing--fs-93 { --alo-listing-font-size: 93px; }
.alo-listing--fs-94 { --alo-listing-font-size: 94px; }
.alo-listing--fs-95 { --alo-listing-font-size: 95px; }
.alo-listing--fs-96 { --alo-listing-font-size: 96px; }
.alo-listing--fs-97 { --alo-listing-font-size: 97px; }
.alo-listing--fs-98 { --alo-listing-font-size: 98px; }
.alo-listing--fs-99 { --alo-listing-font-size: 99px; }
.alo-listing--fs-100 { --alo-listing-font-size: 100px; }