/** Layouts Demo Test 1 **/
/*  
Extending Arches

Arches is a living product and will never be 100% complete nor will it cover 100% of situations.  Judiciously extending the system or building complementary stylesheets will always occur. Here are some of the helpers and functions of Arches to help you build and expand the style system. 

Weight:1000

 Styleguide: SCSS
*/
/*  
get-theme-color($key: primary, $modifier: 0, $color-profile: HEX, $alpha:1 , $theme-map: $theme-palette )

Gets a color value that fits into the set color patterns for usage in new css.

 $key - The color name to be modified [primary,secondary,etc...]
 $modifier   - The color shift you desire default is 0 but you can pass in [-5,-4,...0,1...4,5]. 

 Styleguide: SCSS.get-theme-color
*/
/*  
get-theme-color($key: primary, $modifier: 0, $color-profile: HEX, $alpha:1 , $theme-map: $theme-palette )

Gets a color value that fits into the set color patterns for usage in new css.

 $key - The color name to be modified [primary,secondary,etc...]
 $modifier   - The color shift you desire default is 0 but you can pass in [-5,-4,...0,1...4,5]. 

 Styleguide: SCSS.get-theme-color
*/

/*
Cross Domain Designs

Description: Arches aim to simplify and streamline frontend implementation inside of the ACC portfolio.  Arches extrapolate design names into a generic naming convention so frontend elements can be built once and be adaptive to the domain's brand when rendered.  

Weight:0

Styleguide CrossDomainDesigns
*/
/*
Colors

<p>A common approach in CSS involves naming color variables based not on the color they symbolize, but on their functional role within the design. For instance, the variable "ACC Blue" in the brand doesn't necessarily indicate a blue color, but it represents a global color named "acc". This method ensures that the user interface remains adaptable even if the College's branding undergoes color changes.</p><p>The application of functional naming allows design elements and components to seamlessly transition between different domains, correctly applying colors to text, backgrounds, and borders. The standard design colors include Primary, Secondary, Highlight, and Info, alongside variations of black and white.
</p><p>Additionally, there's a reserved subset of colors known as action colors. These are primarily used to interactively respond to user actions, particularly when an application conducts validations within the design. Action colors encompass Alert, Warning, and Success. The "Design Base" section within each brand area defines these colors.
</p>
<div class="flex_row:md flex_column flex gap-x_4 gap-y_4">
    <div class="flex_auto">
        <h2 class="font_display">ACC.org</h2>
        <div class="flex flex_column font_display font_2:lg font_0 w_100 c_white font_bold lowercase">
            <div class="flex_auto flex flex_row">
                <div class="flex_auto p_3 br_3 br_solid br_white w_20" style="background-color:#198dae;">Primary</div>
                <div class="flex_auto p_3 br_3 br_solid br_white p-b_5 w_10" style="background-color:#676a72;">Secondary</div>
                <div class="flex_auto w_10 flex flex_column">
                    <div class="flex_auto p_3 br_3 br_solid br_white" style="background-color: #16a385;">Accent</div>
                    <div class="flex_auto flex flex_row">
                        <div class="flex_auto p_3 br_3 br_solid br_white " style="background-color: #7742bd;">Highlight</div>
                        <div class="flex_auto p_3 br_3 br_solid br_white " style="background-color: #a3988c;">Info</div>
                    </div>
                </div>
            </div>
            <div class="flex_auto flex_row flex">
                <div class="flex_auto p_3 br_3 br_solid br_white" style="background-color:#dd1a1a;">Alert</div>
                <div class="flex_auto p_3 br_3 br_solid br_white" style="background-color: #da8210;">Warning</div>
                <div class="flex_auto p_3 br_3 br_solid br_white" style="background-color: #078a2e;">Sucess</div>
            </div>
        </div>
    </div>
    <div class="flex_auto">
        <h2 class="font_display">CVQUALITY.ORG</h2>
        <div class="flex flex_column font_display font_2:lg font_0 w_100 c_white font_bold lowercase">
            <div class="flex_auto  flex flex_row">
                <div class="flex_auto p_3 br_3 br_solid br_white w_20" style="background-color:#0088aa;">Primary</div>
                <div class="flex_auto p_3 br_3 br_solid br_white p-b_5 w_10" style="background-color:#e87d1e">Secondary</div>
                <div class="flex_auto w_10 flex flex_column">
                    <div class="flex_auto p_3 br_3 br_solid br_white " style="background-color: #ffc425;">Accent</div>
                    <div class="flex_auto flex flex_row">
                    <div class="flex_auto p_3 br_3 br_solid br_white " style="background-color: #a3988c">Highlight</div>
                    <div class="flex_auto p_3 br_3 br_solid br_white " style="background-color: #05aee5">Info</div>
                    </div>
                </div>
            </div>
            <div class="flex_auto flex_row flex">
                <div class="flex_auto p_3 br_3 br_solid br_white" style="background-color:#990000">Alert</div>
                <div class="flex_auto p_3 br_3 br_solid br_white" style="background-color: #f4a122">Warning</div>
                <div class="flex_auto p_3 br_3 br_solid br_white" style="background-color: #078a2e">Sucess</div>
            </div>
        </div>
    </div>
</div>

Weight:0



Styleguide CrossDomainDesigns.Colors
*/
/*
Fonts

<p>Similar to color naming, font naming in this system aims to simplify transitions between different brands. Therefore, the font names have been generalized into four main categories: Display, Copy, Accent, and UI. This approach facilitates a smoother application of typography across varying brand designs.
.</p>
<div class="table">
<table class="w_100">
<thead>
<tr>
<th>Brand Name</th>
<th>Display</th>
<th>Copy</th>
<th>Accent</th>
<th>UI</th>
</tr>
</thead>
<tbody>
<tr>
<td>ACC</td>
<td>Maven Pro</td>
<td>Open Sans</td>
<td>Roboto Slab</td>
<td>Open Sans</td>
</tr>
<tr>
<td>CardioSmart</td>
<td>Maven Pro</td>
<td>Open Sans</td>
<td>Roboto Slab</td>
<td>Open Sans</td>
</tr>
<tr>
<td>CVQuality</td>
<td>Maven Pro</td>
<td>Lato</td>
<td>Roboto Slab</td>
<td>Lato</td>
</tr>
<tr>
<td>Virtual</td>
<td>Libre Franklin</td>
<td>Open Sans</td>
<td>Roboto Slab</td>
<td>Open Sans</td>
</tr>
</tbody>
</table>
</div>

Weight:10

Styleguide CrossDomainDesigns.Fonts
*/