/*  CSS edermconsult.com, wind 2026  */

/* 
---------------------------------------------- 
---- colors.css ----------------------------- 
---------------------------------------------- 
*/

:root {

/*
------------------------------------------------------------
-- # b2 TYPOGRAPHY -----------------------------------------
------------------------------------------------------------
    
font-family: "Livvic", sans-serif; ➝  überschriften (h1-h5) + highlights (i)
font-family: 'TikTok Sans', sans-serif;  ➝ standard body fonts
font-family: "Baloo 2", sans-serif; -> nav, eyebrows ... ev field labels?
font-family: "Source Sans 3", sans-serif; -> inline-links, italic highlights, subheader

*/
    --livvic: 'Livvic', system-ui, sans-serif; 
    --tiktok: 'TikTok Sans', system-ui, 'Segoe UI', Roboto, sans-serif;
    --baloo: 'Baloo 2', system-ui, sans-serif; 
    --source: 'Source Sans 3', system-ui, sans-serif; 
/* 
----------------------- 
  # b1 base colors ----
----------------------- 
*/
    --ederm-logo-blue: #2779bc;
    --ederm-sea-blue: #1484b9; 
    --d2p-green: #5BB13F;
    --d2p-green-500: #4ea033;
    --telederm-blue: #2F86BF;
    --vermilion-red: #D94830;
    --white: #FFFFFF;

/* 
----------------------- 
  # b1 INKS -----------
----------------------- 
 */
    --text-highlight-color: var(--ederm-sea-blue);
    --text-std-color: #333;
    --ink-900: #2C3137;
    --ink-700: #333;
    --ink-600: #4A4A4A;
    --ink-500: #6A6F75;
    --ink-400: #80858c;
    --ink-300: #9AA0A6; 
    --taupe: #897f72;


    --blue-ink-400: var(--telederm-blue);
    --blue-ink-500: var(--ederm-logo-blue);
    --red-ink-500: var(--vermilion-red);
    --green-ink-500: var(--d2p-green-500);
    --white-ink-900: var(--white);
    --white-ink-500: #C8C8C8;  
/* 
----------------------- 
  # b1 surface colors -
 ---------------------- 
 */
    --beige-50: #F5F4EE;
    --beige-100: #E9E8E0;
    --lightgrey-100: #eef0f2;
    --red-surface: var(--vermilion-red);
    --blue-surface: var(--ederm-logo-blue);

    --page-background: #f5f5f0; 
    --bg-band: var(--beige-100);
    --paper-hover: #f5f5d7;
    --footer-bg: #313844;

    --card-on-page: #FaFbF7;
    --card-on-band: var(--beige-50);
     
    --card-bg: var(--page-background);  
    --card-hover-bg: var(--paper-hover); 

    --picture-band-bg: #7d7672;

/* 
----------------------- 
  # b1 buttons
 ---------------------- 
 */
    --button-blue: var(--ederm-sea-blue);
    --button-blue-td: var(--telederm-blue);
    --button-text-blue: var(--ederm-logo-blue);
    --button-border-blue: var(--ederm-logo-blue);

    --button-red: var(--vermilion-red);
    --button-text-red: var(--vermilion-red);
    --button-border-red: var(--vermilion-red);

    --button-green: var(--d2p-green);
    --button-text-green: var(--d2p-green);
    --button-border-green: var(--d2p-green);

    --button-white: var(--white);
    --button-text-white: var(--white);


/* 
----------------------- 
  # b1 gradients
 ---------------------- 
 */

    --gradient-d2p: linear-gradient(180deg,#6cc24f,#4ea033);
    --gradient-td: linear-gradient(180deg,#5cabdd,#3b8fc9);
    --gradient-silver-26: linear-gradient(0deg, #e8eaee 26%, #f5f7f9 100%);
    --gradient-silver: linear-gradient(180deg, #f5f7f9, #e8eaee);
    --gradient-hero-textbox: linear-gradient(0deg, #E0DEDCDC 0%, #E0DEDCC8 50%, #E0DEDCA3 100%); 

/* 
----------------------- 
# b1 shades ----------- 
----------------------- 
*/
    --shadow-s: 0 1px 3px #1f262d14, 0 1px 2px #1f262d0a;
    --shadow-badge: 1px 1px 2px 0px #0000002e;
/* 
----------------------- 
# b1 animation -------- 
----------------------- 
*/
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1); 
  --ease-in-out: cubic-bezier(0.45, 0, 0.25, 1); 
/* 
----------------------- 
# b1 border ink ------- 
----------------------- 
*/
    --border-10: #E9E8E0;   
    --border-50: #E2E7E8;
    --border-100: #DDD;
    --border-200: #C4CAC4;
    --border-300: #BBB;
    --border-500: #888;

    --border-blue: #4cb1e0;
    --border-blue-700: var(--telederm-blue);
    --border-red: var(--vermilion-red);
    --border-green: var(--d2p-green-500);

    --page-divider: var(--border-10);
    --band-border-200: #c9c5c0;
    --band-border-300: #b3afab;
    --section-border: var(--border-200);
    --section-on-band-border: var(--band-border-200);

    --card-border: var(--border-300);
    --card-img-border-light: var(--border-300);
    --card-img-border-dark: var(--border-500);

    --dl-border-light: var(--border-50);

/* 
----------------------- 
# b1 LINK colors ------
----------------------- 
# c3 NAV --------------
----------------------- 
*/
    --a-nav-active: var(--white-ink-900);
    --a-nav-inactive: var(--white-ink-500); 
    --a-nav-hover: var(--white-ink-900);
    --a-nav-hover-bg: #e4f5f533;

/* 
-----------------------
# c3 general links ----
----------------------- 
*/
    --a-std: var(--ederm-logo-blue);
    --a-std-bg: inherit;
    --a-std-hover: var(--ederm-sea-blue);
    --a-std-hover-bg: #E6F5FA;

    --a-std-underline: #99cbf4;
    --a-std-underline-hover: #5aa6dc;

/* 
-----------------------
# c1 index.php -------- 
----------------------- 
*/
    --hero-bg: inherit;          
    --hero-header: #253541D9;   
    --hero-header-border: #444;  
    --hero-border: #444;        
    --logo-border: #7070B0AA;
    --logo-bg: #D8DEF266;
    --a-hero-txtcolor: inherit;
    --a-hero-hover-bg: #e4f5f500;  
    --hero-bg: var(--white);

}