:root {

  /* =========================================
     BRAND PALETTE
  ========================================= */
  --color-telum-black: #1C1C1E;
  --color-telum-red: #C1121F;
  --color-telum-gray: #7A7A7A;

  --color-border: #2F2F33;

  --color-steel-gray: #5A5A60;
  --color-soft-gray: #B0B0B5;
  --color-muted-white: #D6D6DA;
  --color-off-white: #F4F4F5;
  --color-pure-white: #FFFFFF;
  --color-pure-black: #000000;

  --color-signal-red: var(--color-telum-red);
  --color-bright-red: var(--color-telum-red);

  --color-off-white-transparent: #f4f4f5a5;
  --color-telum-black-transparent: #1c1c1ea9;
  --color-telum-red-transparent: #c1121e41;
  --color-telum-gray-trasparent: #7a7a7a4d;

  /* =========================================
    MOTION
  ========================================= */
  --ease-premium: cubic-bezier(.19,1,.22,1);
  --ease-breathing: cubic-bezier(.37,0,.63,1);

  --transition-fast: 0.25s;
  --transition-medium: 0.4s;
  --transition-slow: 0.8s;

  /* =========================================
     RADII
  ========================================= */
  --radius-small: 12px;
  --radius-medium: 24px;
  --radius-large: 30px;
  --radius-pill: 999px;

  /* =========================================
     LAYOUT
  ========================================= */
  --max-width: 1400px;
  --section-spacing: 120px;
  --navbar-height: 78px;


/* ************************************************************************************************************************
   LIGHT THEME
************************************************************************************************************************ */
  /* =========================================
    SEMANTIC COLORS
  ========================================= */
  --color-bg-primary: var(--color-off-white);
  --color-bg-navbar:var(--color-off-white-transparent);
  --color-bg-dropdown:var(--color-off-white);
  --color-card-bg:var(--color-pure-white);

  --color-text-primary: var(--color-telum-black);
  --color-text-secondary: var(--color-telum-black);
  --color-text-muted: var(--color-steel-gray);

  --color-accent: var(--color-telum-red);

  /* =========================================
     BORDERS
  ========================================= */
  --color-border-subtle:rgba(0,0,0,0.12);
  --color-navbar-divider:rgba(0,0,0,0.10);
  --border-subtle: 1px solid var(--color-border-subtle);
  --border-red   : 1px solid var(--color-telum-red-transparent);

  /* =========================================
     SHADOWS
  ========================================= */
  --shadow-red-soft: 0 0 25px var(--color-telum-red-transparent);
  --shadow-gray-soft: 0 0 25px var(--color-telum-gray-trasparent);
  --shadow-card: 0 20px 40px rgba(0,0,0,0.10);

  /* =========================================
    STATUS BOX
  ========================================= */
  --status-box-top-left: var(--color-telum-red-transparent);
  --status-box-bottom-right: var(--color-bg-primary);

  /* =========================================
    CONTACT BOX
  ========================================= */
  --color-contact-box-top-left: var(--color-telum-gray-trasparent);
  --color-contact-box-bottom-right: var(--color-bg-primary);
  --color-contact-box-text-box: var(--color-bg-primary);
  --color-contact-box-button: var(--color-telum-black-transparent);
  --color-contact-box-button-hover: var(--color-telum-black);
  --color-contact-box-button-shadow: var(--color-telum-red-transparent);


  /* =========================================
     FOOTER
  ========================================= */
  --color-footer-bg: var(--color-telum-black);
  --color-footer-border-top:rgba(255,255,255,0.06);
  --color-footer-text: var(--color-telum-gray);


   /* =========================================
     BUTTONS
  ========================================= */
  --color-btn-primary-text: var(--color-text-primary);
  --color-btn-primary-bg: var(--color-telum-gray-trasparent);
  --color-btn-primary-border: var(--border-subtle);
  --color-btn-primary-shadow: var(--shadow-red-soft);

  --color-btn-secondary-text: var(--color-text-secondary);
  --color-btn-secondary-bg: var(--color-bg-primary);
  --color-btn-secondary-border: var(--border-subtle);
  --color-btn-secondary-shadow: var(--shadow-gray-soft);
}


/* ************************************************************************************************************************
   DARK THEME
************************************************************************************************************************ */
html[data-theme="dark"] {

  /* =========================================
     SEMANTIC COLORS
  ========================================= */
  --color-bg-primary:var(--color-telum-black);
  --color-bg-navbar: var(--color-telum-black-transparent);
  --color-bg-dropdown:var(--color-telum-black);
  --color-card-bg:var(--color-pure-black);

  --color-text-primary:var(--color-telum-gray);
  --color-text-secondary:var(--color-soft-gray);
  --color-text-muted:var(--color-steel-gray);

  --color-accent:var(--color-bright-red);
  --color-accent:var(--color-telum-red);

  /* =========================================
     BORDERS
  ========================================= */
  --color-border-subtle:rgba(255,255,255,0.12);
  --color-navbar-divider:rgba(255,255,255,0.10);
  --border-subtle:1px solid var(--color-border-subtle);
  --border-red:1px solid rgba(214,26,40,0.30);

  /* =========================================
     SHADOWS
  ========================================= */
  --shadow-red-soft:0 0 30px rgba(214,26,40,0.28);
  --shadow-card:0 24px 48px rgba(255, 255, 255, 0.1);

  /* =========================================
    CONTACT BOX
  ========================================= */
  --color-contact-box-bottom-right: var(--color-bg-primary);

  /* =========================================
    STATUS BOX
  ========================================= */
  --status-box-top-left: rgba(193,18,31,0.25);
  --status-box-bottob-right: var(--color-bg-primary);

  /* =========================================
     FOOTER
  ========================================= */
  --color-footer-bg:var(--color-pure-black);
  --color-footer-border-top:rgba(255,255,255,0.08);
  --color-footer-text:var(--color-soft-gray);

   /* =========================================
     BUTTONS
  ========================================= */
  --color-btn-primary-text: var(--color-text-secondary);
  --color-btn-secondary-text: var(--color-text-primary);
}