/* ===========================================
   CSS Custom Properties (Variables)
   Migrated from SCSS const.scss
   =========================================== */

:root {
    /* ============ COLORS ============ */

    /* Primary palette */
    --primary-color: #feb737;       /* Yellow */
    --secondary-color: #d01f2f;     /* Red */
    --tertiary-color: #05a852;      /* Green */
    --alt-color: #EE7601;           /* Orange */

    /* Input colors */
    --disable-color: #b0b0b0;       /* Dark Gray */
    --input-background: #eceeed;    /* Light Gray */
    --input-text: #222;             /* Medium Black */

    /* Social colors */
    --facebook-color: #3b5998;
    --twitter-color: #55acee;
    --linkedin-color: #007bb6;
    --google-color: #dd4b39;

    /* Link colors */
    --link-color: #428bca;
    --link-hover-color: #2a6496;

    /* Button colors */
    --button-background: var(--primary-color);
    --button-background-hover: rgba(8, 8, 8, 0.85);
    --button-background-selected: #333;
    --button-text: #fff;

    /* Named colors */
    --red: var(--secondary-color);
    --green: var(--tertiary-color);
    --yellow: var(--primary-color);
    --orange: var(--alt-color);
    --lightblue: #428BCA;
    --blue: #225fa9;
    --purple: #605ca8;
    --maroon: #D81B60;
    --indigo: #6610f2;
    --cyan: #17a2b8;

    /* Gray scale */
    --dark-gray: var(--disable-color);
    --medium-gray: #c6c8c7;
    --light-gray: var(--input-background);
    --medium-black: var(--input-text);

    /* Misc */
    --first-time-from: #B47400;

    /* ============ FONTS ============ */

    --light-font: 'Circe Light';
    --regular-font: 'Circe Book';
    --bold-font: 'Circe Bold';
    --extra-bold-font: 'Circe Extrabold';

    /* ============ SIZES ============ */

    --header-height: 50px;
    --footer-height: 46px;
    --footer-height-xs: 83px;

    /* ============ BREAKPOINTS ============ */

    --breakpoint-lg-min: 1200px;
    --breakpoint-md-max: 1199px;
    --breakpoint-md-min: 992px;
    --breakpoint-sm-max: 991px;
    --breakpoint-sm-min: 768px;
    --breakpoint-xs-max: 767px;
    --breakpoint-xs-min: 480px;
    --breakpoint-xxs-max: 479px;

    /* ============ DARK THEME (Dashboard/Timeline) ============ */

    /* Background gradients */
    --dark-bg-primary: #1a1a2e;
    --dark-bg-secondary: #16162a;
    --dark-bg-tertiary: #0d0d1a;

    /* Accent colors */
    --accent-orange: #f6511d;
    --accent-orange-light: #ff8c42;
    --accent-yellow: #ffc300;

    /* Text colors */
    --dark-text: rgba(255, 255, 255, 0.85);
    --dark-text-muted: rgba(255, 255, 255, 0.5);
    --dark-border: rgba(255, 255, 255, 0.1);
}