/*-----------------------------------------------------------------------------------------
  TempikLabs CSS Stylesheet - Styles
  Created by: Bobby H.
  Contact: admin@tempiklabs.com
  Created: 11/11/2025

  Description: Core CSS styles for TempikLabs Website definin colors, typography and
                backgrounds.

  Change Log:
  Version 1.0.0 - 11/11/2025
                > Initial creation of stylesheet.
          1.0.1 - 11/15/2024
                > Added dark mode color variables.
                > Updated link colors for better visibility.
                > Refined background color variables for improved aesthetics.
                > Standardized typography colors across the site.
                > Minor adjustments to accent colors for consistency.
          1.0.2 - 11/26/2025
                > Added card background and text color variables.
*-----------------------------------------------------------------------------------------*/

/* ──────────────── Base Reset & Variables ──────────────── */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  
    /*Background Colors*/
    --oob-bg-color:     rgba(128, 128, 128,1);    /*Out-of-Bounds Color: Area Outside of Main*/
    --main-bg-color:    rgba(255,255,255,1);      /*Main Container Color*/
    --card-bg-color:    rgba(0,0,0,0);            /*Card Color*/
    --header-bg-color:  rgb(41, 44, 51);          /*Header Container Color*/
    --footer-bg-color:  rgba(128, 128, 128,1);    /*Footer Background Color*/

    /*Text Colors*/
    --oob-txt-color:    rgba(0,0,0,1);            /*Out-of-Bounds Text: Text Ouside of Main*/
    --main-txt-color:   rgba(0,0,0,1);            /*Main Container Text*/
    --card-txt-color:   rgba(255,255,255,1);      /*Card Text Color*/ 
    --header-txt-color: rgba(255,255,255,1);      /*Header Text Color*/
    --footer-txt-color: rgba(0,0,0,1);              /*Footer Text Color*/

    /*Border Colors*/
    --main-brd-color: rgba(0,0,0,1);                /*Main Border Color*/
    
    
    /* Links Colors */
    --links-color: rgba(0,0,255,1);                 /*Blue*/
    --links-hover-color: rgba(0,0,205,1);           /*Medium Blue*/
    --links-visited-color: rgba(75,0,130,1);        /*Indigo*/
    --links-active-color: rgba(255,0,0,1);          /*Red*/

    /* Accent Color */
    --color-accent: rgba(255, 165, 0, 1);           /*Orange*/
}

@media (prefers-color-scheme: dark) {
  :root {



  
    /*Background Colors*/
    --oob-bg-color:     rgb(51, 51, 51);          /*Out-of-Bounds Color: Area Outside of Main*/
    --main-bg-color:    rgba(230, 230, 230, 1);   /*Main Container Color*/
    --card-bg-color:    rgba(0,0,0,0.5);            /*Card Color*/
    --header-bg-color:  #0b1220;    /*Header Container Color*/
    --footer-bg-color:  rgba(0, 0, 0, 0);         /*Footer Background Color*/

    /*Text Colors*/
    --oob-txt-color:    rgba(255,255,255,1);      /*Out-of-Bounds Text: Text Ouside of Main*/
    --main-txt-color:   rgba(0,0,0,1);            /*Main Container Text*/
    --card-txt-color:   rgba(255,255,255,1);      /*Card Text Color*/ 
    --header-txt-color: rgba(255,255,255,1);      /*Header Text Color*/
    --footer-txt-color: rgba(255, 255, 255,1);    /*Footer Text Color*/

    /*Border Colors*/
    --main-brd-color: rgba(0,0,0,1);              /*Main Border Color*/
    --card-brd-color: rgba(0,0,0,1);              /*Card Border Color*/

    /* Links Colors */
    --links-color: rgba(100,149,237,1);          /*Cornflower Blue*/
    --links-hover-color: rgba(65,105,225,1);     /*Royal Blue*/
    --links-visited-color: rgba(138,43,226,1);   /*Blue Violet*/
    --links-active-color: rgba(255,69,0,1);      /*Orange Red*/

    /* Accent Color */
    --color-accent: rgba(255, 165, 0, 1);        /*Orange*/




  }
}